`

Flex中如何利用mx:states和mx:State创建不同状态应用的例子

阅读更多

1.

代码

<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout
="absolute">
<mx:Script>
<![CDATA[
import mx.validators.ValidationResult;
import mx.controls.Alert;
//登陆处理
private function loginHandle():void
{
currentState
="index";//成功后跳转到新状态"index"
}
]]
>
</mx:Script>

<!--新状态"index"-->
<mx:states>
<mx:State name="index"> <!--新建'index'State-->
<mx:RemoveChild target="{panel1}"/> <!--移除”登陆框“-->

<mx:AddChild position="lastChild"> <!--添加新的组件-->
<mx:Panel x="144" y="76" width="400" height="400" layout="absolute">
<mx:Label x="200" y="200" text="欢迎来到主页" fontSize="20" fontFamily="Georgia" color="#EAC248"/>
</mx:Panel>
</mx:AddChild>


</mx:State>
</mx:states>
<!--登陆框-->
<mx:Panel width="326" height="247"
layout
="absolute" title="用户登陆" id="panel1"
fontFamily
="Georgia" fontSize="12" fontWeight="normal" left="108" top="108">
<!--"用户名标签"-->
<mx:Label x="41.5" y="33" text="用户名"/>
<!--"密码标签"-->
<mx:Label x="41.5" y="77" text="密 码"/>
<!--"用户名输入框"-->
<mx:TextInput x="110" y="33" id="txtUsername" />
<!--"密码输入框"-->
<mx:TextInput x="110" y="75" id="txtPassword" displayAsPassword="true"/>
<!--"验证码输入框"-->
<mx:TextInput x="110" y="108" width="48" id="txtCheckCode"/>
<!--"登陆按钮"-->
<mx:Button x="106" y="155" label="登陆" id="btnLogin" click="loginHandle()"/>
<!--"重置按钮"-->
<mx:Button x="218" y="155" label="重置" id="btnReset" />
<!--"验证码标签"-->
<mx:Label x="41.5" y="108" text="验证码"/>
<!--"验证码显示标签"-->
<mx:Label x="166" y="108" width="49" height="25" id="lblCheckCode"/>
<!--"重设验证码"-->
<mx:Label x="223" y="108" text="看不清楚" height="25" />
</mx:Panel>
</mx:Application>

 

 

2.

代码

<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout
="vertical"
verticalAlign
="middle"
backgroundColor
="white">

<mx:states>
<mx:State name="login">
<mx:AddChild>
<mx:Form id="loginForm">
<mx:FormHeading label="Login" />
<mx:FormItem label="Username:">
<mx:TextInput id="log_username" />
</mx:FormItem>
<mx:FormItem label="Password:">
<mx:TextInput id="log_password"
displayAsPassword
="true" />
</mx:FormItem>
<mx:FormItem>
<mx:Button label="Login" />
</mx:FormItem>
</mx:Form>
</mx:AddChild>
</mx:State>
<mx:State name="register">
<mx:AddChild>
<mx:Form id="registerForm">
<mx:FormHeading label="Register" />
<mx:FormItem label="Username:">
<mx:TextInput id="reg_username" />
</mx:FormItem>
<mx:FormItem label="Password:">
<mx:TextInput id="reg_password1"
displayAsPassword
="true" />
</mx:FormItem>
<mx:FormItem label="Confirm password:">
<mx:TextInput id="reg_password2"
displayAsPassword
="true" />
</mx:FormItem>
<mx:FormItem>
<mx:Button label="Register" />
</mx:FormItem>
</mx:Form>
</mx:AddChild>
</mx:State>
</mx:states>

<mx:transitions>
<mx:Transition id="loginTransition"
fromState
="*"
toState
="login">
<mx:WipeDown target="{loginForm}"/>
</mx:Transition>
<mx:Transition id="registerTransition"
fromState
="*"
toState
="register">
<mx:WipeDown target="{registerForm}"/>
</mx:Transition>
</mx:transitions>

<mx:Script>
<![CDATA[
import mx.events.ItemClickEvent;

private
function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
currentState
= evt.item.data;
}
]]
>
</mx:Script>

<mx:Array id="dp">
<mx:Object data="" label="Default state" />
<mx:Object data="login" label="Login" />
<mx:Object data="register" label="Register" />
</mx:Array>

<mx:ApplicationControlBar dock="true">
<mx:ToggleButtonBar id="toggleButtonBar"
dataProvider
="{dp}"
itemClick
="toggleButtonBar_itemClick(event);" />
</mx:ApplicationControlBar>

</mx:Application>

分享到:
评论

相关推荐

    了解 flex State对象

    在Flex程序中,状态设计是一种强大的工具,用于根据用户的交互和应用需求动态地改变UI布局和组件行为。通过使用State对象,开发者可以定义和管理多个状态,使程序更加灵活和可扩展。 在Flex中,一个状态(Status)...

    flex state跳转

    1. 创建State:在Flex Builder或MXML文件中,可以通过在`&lt;mx:States&gt;`标签内定义一系列`&lt;mx:State&gt;`标签来创建状态。每个`&lt;mx:State&gt;`标签代表一种状态,如以下示例所示: ```xml &lt;mx:States&gt; &lt;mx:State name=...

    Flex使用视图状态(View States)笔记

    视图状态(View States,简称VS)是Adobe Flex框架中一个非常实用的功能,它允许开发者根据用户的交互或程序的状态来动态地更改界面元素的外观和行为。在富互联网应用(RIA)中,这种功能尤为重要,因为界面往往需要...

    flex-最简单的state对象控制

    该主题主要涉及如何通过Flex框架中的State管理机制来实现不同界面状态之间的切换。以下将围绕标题、描述以及部分代码内容进行深入解析。 ### 标题:Flex中最简单的State对象控制 这个标题表明了文章的主要讨论点...

    FLEX入门实例--------transition,state的综合运用

    在这个实例中,`Transition.mxml`文件很可能是主程序文件,它包含了对`transition`和`state`的定义和应用。可能的代码结构可能如下: ```xml &lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"&gt; &lt;mx:...

    flex quick starts

    通过使用视图状态,开发者可以轻松地管理和控制用户界面上的各种状态,从而提高用户体验和应用的灵活性。此外,这种方法还能够简化事件处理代码,减少冗余,使得代码结构更加清晰易懂。在实际开发中,结合过渡定义等...

    flex与后台交互的方法(内有代码)

    本文将详细介绍使用Flex进行后台交互的两种主要方式:通过`HTTPService`和`URLLoader`来实现与服务器的通信。 #### HTTPService:面向服务的交互方式 `HTTPService`是Flex框架提供的一个用于执行HTTP请求的类,它...

    FLEX4的皮肤skin

    本文将深入探讨FLEX4中的皮肤系统,特别是SparkSkin类,并通过实例展示如何创建和应用自定义皮肤。 1. SparkSkin的介绍: SparkSkin是Flex 4(Gumbo)引入的主要皮肤类,位于`spark.skins`包下。它是一个Group类型...

    Flex4的皮肤文档及demo

    通过以上内容,我们可以了解到在Flex4中如何利用`SparkSkin`和`Skin`类来定制组件的外观,以及如何将自定义皮肤应用到实际项目中。这对于初学者来说是一个很好的起点,能够帮助他们理解Flex4的皮肤机制,并进一步...

    使用FLEX 和 Actionscript开发FLASH 游戏(六)-4

    `&lt;mx:states&gt;`标签定义了两种状态:`Game`和`MainMenu`。`Game`状态用于游戏进行中,`MainMenu`状态则用于显示游戏主菜单。当状态切换时,对应的`enterState`和`exitState`函数会被调用,例如在进入游戏状态时,会...

    Flex4皮肤资料

    在这段代码中,首先定义了四个状态(`up`、`over`、`down`、`disabled`),这些状态对应于按钮的不同交互状态。通过`&lt;fx:Metadata&gt;`标签指定了该皮肤应用于`spark.components.Button`组件,即这是一个按钮的皮肤。 ...

    Flex4 Spark皮肤

    本篇文章将详细介绍如何利用Flex4中的Spark Skin进行控件样式的自定义。 #### 二、Spark Skin与Skin类的关系 在Flex4中,`spark.skins` 包含了一个核心类 `SparkSkin`。`SparkSkin` 是一个继承自 `Group` 类型的...

    FLEX4的皮肤制作教程

    - 使用了`&lt;s:States&gt;`标签来定义按钮的不同状态(正常状态“up”、悬停状态“over”、按下状态“down”以及禁用状态“disabled”)。 - `&lt;s:Ellipse&gt;`元素用于定义按钮的背景形状,并设置了填充颜色和边框颜色。 - `...

    Flex从入门到实践——源代码(10章)

    源代码中可能会有改变组件状态的示例,例如使用States和State类。 9. **模块化开发**:Flex支持模块化,可以帮助组织大型应用。学习如何创建和加载模块,源代码中可能会包含Module和ModuleLoader类的使用。 10. **...

    flex最大化最小化关闭

    在Flex4中,窗体(Window)的管理是应用程序用户界面设计的重要部分。"flex最大化最小化关闭"这个标题指的是如何在Flex4环境下为窗体添加最大化、最小化和关闭的功能。下面将详细介绍如何实现这些功能。 1. **Flex4...

    FLEX4 皮肤制作教程

    - **状态管理**:通过`&lt;s:states&gt;`标签定义了按钮的四种状态(正常状态“up”、悬停状态“over”、按下状态“down”以及禁用状态“disabled”),这有助于根据不同的交互情况改变按钮的外观。 - **元数据**:`&lt;fx:...

    皮肤制作文档

    根据提供的文档内容,我们可以推断出这是一篇关于皮肤制作的教程文档,主要涉及Adobe Flex框架中的皮肤(Skin)设计与实现。以下是对该文档所包含的重要知识点进行详细解析: ### 1. 皮肤(Skin)简介 在Adobe ...

Global site tag (gtag.js) - Google Analytics