学习收藏: Flex之State状态的…
来源:互联网 发布:linux socket 编辑:程序博客网 时间:2024/06/04 18:30
在很多富互联网应用,网页外观的改变基于用户的行为。一个状态就定义了组件的一种表现样式。要想使用状态,你应该首先定义一个默认的状态,然后在此基础上重写或者更改,这样就形成了一系列的其他样式。你可以添加、移除某些子元素,更改CSS或者属性的值,更改触发的事件。这些如何做到,我们会一一介绍。
下面我们先通过一个例子大概看一下如何使用State。
下面这段代码呈现的首先是一个登陆的界面,当你单击注册的链接,它就会变成一个注册界面。它是新的界面但不是新的页面。通过浏览器的后退按钮你是回不到原来的状态的。当然,我们也会有办法实现这个功能,以后会介绍。
<s:Applicationxmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark"xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024"minHeight="768">
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:states>
<s:Statename="default"/>
<s:Statename="Register"/>
</s:states>
<!-- Set title of the Panel container based on theview state.-->
<s:Panel id="loginPanel"
title="Login"title.Register="Register">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:Formid="loginForm">
<mx:FormItemlabel="Username:">
<s:TextInput/>
</mx:FormItem>
<mx:FormItemlabel="Password:">
<s:TextInput/>
</mx:FormItem>
<mx:FormItem id="confirm" label="Confirm:"includeIn="Register">
<!-- Add a TextInput control to the form for theRegister view state. -->
<s:TextInput/>
</mx:FormItem>
<mx:FormItemdirection="horizontal">
<!-- Use the LinkButton to change viewstate.-->
<mx:Spacer width="100%"id="spacer1"/>
<!-- Set label of the control based on the viewstate.-->
<mx:LinkButton id="registerLink"
label="Need to Register?"
label.Register="Return to Login"
click="currentState='Register'"
click.Register="currentState=''"/>
<s:Button id="loginButton"
label="Login"label.Register="Register"/>
</mx:FormItem>
</mx:Form>
</s:Panel>
</s:Application>
定义状态
flex4里状态的定义与flex3不同,你只需在<states></states>标签内定义状态就可以了。添加子元素和设置属性之类,不在这里进行了。如下所示:
<s:State name="State1"/>
<s:State name="State2"/>
<s:State name="State3"/>
.
.
</s:states>
改变状态
UIComponent类定义了一个currentState属性,通过改变这个属性的值来更换状态,这个属性的默认值是定义在需在<states></states>标签内的第一个状态。例如:
<s:Button id="b2" label="Change to the default"click="currentState='State1';"/>
为一个状态设定属性,样式和事件
这是与flex3很不同的地方。在flex4里通过点语法来设定一个组件属于某个状态的属性值。例如:
上述代码也可以这样写:
<s:label>DefaultState</s:label>
<s:label.State2>newState</s:label.State2>
</s:Button>
click="ta1.text='hello';"
click.State1="ta1.text='goodbye'"/>
添加或移除组件
在flex4里,添加或移除某个组件,直接在这组件的属性里搞定。组件多了两个属性,includeIn和excludeFrom。includeIn,表示这个组件要被添加到属性值所指的状态,excludeFrom,表示这个组件要从属性值所指的状态中删除,includeIn和excludeFrom不能在同一个组件标签里出现,他们的值可以是多个状态,之间用逗号隔开。例如:<s:states>
<s:State name="default"/>
<s:Statename="addCheckBox"/>
<s:Statename="addTextInput"/>
<s:Statename="addCheckBoxandButton"/>
</s:states>
<s:CheckBox id="myCB" label="Checkbox"
includeIn="addCheckBox, addCheckBoxandButton"/>
<s:TextArea text="Exclude fromaddTextInput"
excludeFrom="addTextInput"/>
更改一个组件的父元素
一个组件的父元素也能变,你信吗?不过flex4真的做到了。用的就是这个<fx:Reparent>标签。还是看段代码吧!
<!-- states\NewStatesReparent.mxml-->
<s:Applicationxmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:states>
<s:State name="Parent1"/>
<s:State name="Parent2"/>
</s:states>
<s:HGroup>
<s:Panel id="Panel1"
height="100" width="100"
title="Panel 1">
<s:Button id="setCB"includeIn="Parent1"/>
</s:Panel>
<s:Panel id="Panel2"
height="100" width="100"
title="Panel 2">
<fx:Reparent target="setCB"includeIn="Parent2"/>
</s:Panel>
</s:HGroup>
<s:HGroup>
<s:Button label="Parent 1"
click="currentState='Parent1'"
enabled.Parent1="false"/>
<s:Button label="Parent 2"
click="currentState='Parent2'"
enabled.Parent2="false"/>
</s:HGroup>
</s:Application>
添加子元素时的控制
或许,你有这样的疑问。我为某个状态添加了一个子元素,这个元素在原来的状态是不存在的,至少,你看不见。那么,这个子元素时是在程序一运行时就被创建了还是在切换状态时才创建呢?
flex4的答案是在第一次换到需要这个子元素出现的状态时,它被创建。这是默认的情况。但是,如果这个子元素的创建需要很长时间,那么用户肯定在切换状态时感到延迟,这是不好的。所以,默认的情况,可以改。通过更改itemCreationPolicy,这是组件的一个属性,它有两个值:deferred,默认值,意思是在第一次需要这个组件出现时创建;immediate,它是在程序一被启动就会创建这个子元素。
一旦子元素被创建了,它就会一直存在了。
界面的改变不是仅仅只能通过State。通过导航器,如:Accordion,Tab Navigator,ViewStackcontainers你也能做到。到底用哪个,取决于你的应用需求以及用户界面的设计。
创建状态组
在flex4里,可以给状态分组,比如第一个状态和第二个状态是一组,第三个状态和第四个状态是一组等等。我们先看怎么分组?
<s:State name="addCheckBox"stateGroups="Group1"/>
<s:Statename="addTextInput"/>
<s:State name="addCheckBoxandButton"stateGroups="Group1"/>
添加分组的好处是什么呢?
如果一个组件在多个状态中出现,你就可以把这些状态划分到一组。那么,当出现这个族里任何一个状态时,这个组件的设置都会有效。点语法后面的值可以是组的名称,excludeFrom和includeIn的值也可以使组的名称。
- 学习收藏: Flex之State状态的…
- 学习收藏: Flex之State状态的使用 …
- 【你不知道的flex】-【state状态切换之初始化方法】
- android学习之State List
- iptables之state状态
- 积少成多Flash(10) - Flex 3.0 状态转换(State), 状态转换的过渡效果(State Transition), 自定义鼠标指针
- Flex 状态(state)和过渡(transition)
- 设计模式学习之------State模式(状态模式)
- Flex学习收藏资料
- Flex中用state来表示不同的状态的经典的例子
- 设计模式之State(状态)
- React Native 之State状态
- Flex中如何利用mx:states和mx:State创建不同状态应用的例子
- Flex 学习之路之四 用户接口user interface 的三种状态
- 收藏的Flex网站
- Flex4 State状态的使用
- flex state 在多状态下使用事件
- Adobe FLEX学习笔记(5)-Flex SDK…
- 浏览一个Flex技术交流网站,看到的&…
- 网上看到的:ResultSet更新汇总
- 突然间,有个想法,画了出来……
- 学习过程中看到的:常见UI设计模式
- 先收藏学习:Flex特效使用大全
- 学习收藏: Flex之State状态的…
- 学习收藏: Flex之State状态的使用 …
- 最近在连接BoneCP连接池,BoneCP主…
- StageWebView AIR 移动…
- js 屏蔽Backspace 回退键
- 多个Activity之间切换原理介绍
- Android 在TextView里设置HTM…
- Android获取存储卡路径的方式
- win7下 装Tornado2.2 for ARM