1.FLEX4状态概述
在很多富互联网应用,网页外观的改变基于用户的行为。一个状态就定义了组件的一种表现样式。要想使用状态,你应该首先定义一个默认的状态,然后在此基础上重写或者更改,这样就形成了一系列的其他样式。你可以添加、移除某些子元素,更改CSS或者属性的值,更改触发的事件。
下面是一个简单的例子:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
width="400" height="300">
<!--定义了二个状态,系统默认状态为第一个-->
<s:states>
<s:State name="State1"/>
<s:State name="State2"/>
</s:states>
<mx:VBox verticalCenter="0"
horizontalCenter="0" >
<s:Button
<!--状态为state1时,设置label属性和单击事件-->
label.State1="Small"
click.State1="currentState='State2'"
<!--状态为state2时,设置width属性、height属性、label2属性和单击事件-->
width.State2="200"
height.State2="200"
label.State2="BIG"
click.State2="currentState='State1'"/>
<!--状态为state2时,该label才显示-->
<mx:Label includeIn="State2"
width="100%"
text="State 2 Only"
textAlign="center"/>
</mx:VBox>
</s:Application>
2.定义状态
flex4里状态的定义与flex3不同,你只需在<states></states>标签内定义状态就可以了。添加子元素和设置属性之类,不在这里进行了。如下所示:
<s:states>
<s:State name="State1"/>
<s:State name="State2"/>
<s:State name="State3"/>
.
.
</s:states>
3.改变状态
UIComponent类定义了一个currentState属性,通过改变这个属性的值来更换状态,这个属性的默认值是定义在需在<states></states>标签内的第一个状态。例如:
<s:Button id="b1" label="Change to State 1" click="currentState='State2';"/>
<s:Button id="b2" label="Change to the default" click="currentState='State1';"/>
当然也可以通过UIComponent类的setCurrentState方法。
4.为一个状态设定属性,样式和事件
在flex4里通过点语法来设定一个组件属于某个状态的属性值。例如:
<s:Button label="Default State" label.State2="New State"/>
上述的代码的意思是,这个按钮的lable值在State2状态下是New State,在其他状态下是Default State。
上述代码也可以这样写:
<s:Button >
<s:label>Default State</s:label>
<s:label.State2>new State</s:label.State2>
</s:Button>
要想在某个状态里清除某个属性的值,可以让属性值等于@clear。如下:
<Button color="0xFF0000" color.State1="@Clear"/>
对于事件也一样可以用点语法,例如:
<s:Button id="b1" label="Click Me"
click="ta1.text='hello';"
click.State1="ta1.text='goodbye'"/>
5.添加或移除组件
在flex4里,添加或移除某个组件,直接在这组件的属性里搞定。组件多了两个属性,includeIn和excludeFrom。includeIn, 表示这个组件要被添加到属性值所指的状态,excludeFrom,表示这个组件要从属性值所指的状态中删除,includeIn和 excludeFrom不能在同一个组件标签里出现,他们的值可以是多个状态,之间用逗号隔开。例如:
<s:states>
<s:State name="default"/>
<s:State name="addCheckBox"/>
<s:State name="addTextInput"/>
<s:State name="addCheckBoxandButton"/>
</s:states>
<s:CheckBox id="myCB" label="Checkbox"
includeIn="addCheckBox, addCheckBoxandButton"/>
<s:TextArea text="Exclude from addTextInput"
excludeFrom="addTextInput"/>
6.更改一个组件的父元素
一个组件的父元素也能变,你信吗?不过flex4真的做到了。用的就是这个<fx:Reparent>标签。还是看段代码吧!
<?xml version="1.0" encoding="utf-8"?>
<!-- states\NewStatesReparent.mxml -->
<s:Application xmlns: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>
这句话:<fx:Reparent target="setCB" includeIn="Parent2"/>什么意思呢?target的值setCB,就是我们要换父亲的组件就是setCB,setCB是第一个panel的Button的id吧!当转换到状态Parent2时,这个Button就成了第二个Panle的子元素。因为 includeIn="Parent2"告诉我们了,在状态Parent2时,就要换了setCB的父元素,换成fx:Reparent的父元素,即第二个panel。
7.添加子元素时的控制
flex4在第一次换到需要这个子元素出现的状态时,它被创建。这是默认的情况。但是,如果这个子元素的创建需要很长时间,那么用户肯定在切换状态时感到延迟,这是不好的。所以,默认的情况,可以改。通过更改itemCreationPolicy,这是组件的一个属性,它有两个值:deferred,默认值,意思是在第一次需要这个组件出现时创建; immediate,它是在程序一被启动就会创建这个子元素。
一旦子元素被创建了,它就会一直存在了。
界面的改变不是仅仅只能通过State。通过导航器,如:Accordion,Tab Navigator,ViewStack containers你也能做到。到底用哪个,取决于你的应用需求以及用户界面的设计。
8.创建状态组
在flex4里,可以给状态分组,比如第一个状态和第二个状态是一组,第三个状态和第四个状态是一组等等。我们先看怎么分组?
<s:State name="default"/>
<s:State name="addCheckBox" stateGroups="Group1"/>
<s:State name="addTextInput"/>
<s:State name="addCheckBoxandButton" stateGroups="Group1"/>
只需添加一个stateGrooups这个属性。
添加分组的好处是什么呢?
如果一个组件在多个状态中出现,你就可以把这些状态划分到一组。那么,当出现这个族里任何一个状态时,这个组件的设置都会有效。点语法后面的值可以是组的名称,excludeFrom和includeIn的值也可以使组的名称。
例1:states简单例子
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:states>
<!-- Define the new view states. -->
<s:State name="default"/>
<s:State name="NewButton"/>
</s:states>
<s:VGroup id="g1">
<s:HGroup>
<!-- Disable Button in the NewButton view state.
当前状态是NewButton时,b1按钮失效
-->
<s:Button id="b1" label="Click Me"
enabled.NewButton="false"/>
<!-- Add a new child control to the VBox. -->
<!-- 状态为NewButton时,该按钮才显示 -->
<s:Button id="b2" label="New Button"
includeIn="NewButton"/>
</s:HGroup>
<s:Button label="Change to NewButton state"
click="currentState='NewButton';"/>
<!-- Define Button control to switch to default view state. -->
<s:Button label="Change to default view state"
click="currentState='default';"/>
</s:VGroup>
</s:Application>
分享到:
相关推荐
Flex_4:开发RIA_应用程序.pdf Flex_4:开发RIA_应用程序.pdf
《Flex_4:开发RIA_应用程序pdf》完整源代码,附带每个章节习题代码。
flex_color_scheme:一种Flutter软件包,用于制作和使用基于美丽配色方案的主题
高德地图 Flex插件包,包括说明、文档,API等。
fms实现的视频播放系统,带说明,带安装说明带文档
bison_flex_1 关于 非常基本的野牛和flex示例 2020_1:简单的lex示例(C) 2020_1.5:简单的lex + yacc示例(C) 2020_2:简单的lex + yacc计算器(C) goyacc1:简单的goyacc示例(Go) goyacc2:简单的goyacc ...
- 为推文嵌入添加弹性超能力*伸缩两个盒子的位置- Flex-direction 属性以排成一行- 使用 justify-content 属性对齐元素:flex-end 用 :hammer_and_wrench: HTML 5和CSS3 你可以看看这里: 请: :wrapped_gift: ...
FlexColorPicker FlexColorPicker是Flutter的可自定义颜色选择器。 ColorPicker可以显示六种不同类型的颜色选择器,其中三种用于标准Flutter Material颜色及其阴影。 可以自定义用于拣货项目的尺寸和样式。...
flex-bison_calc 烟雾计算器警报!! Calc是一个小的字符串解析计算器库,我使用flex和bison编写。 它可以根据您的需要充当可执行文件或库函数。 输出是通过stdout进行的,但是您可以调整代码以使其返回计算出的值。...
深入浅出的介绍flex 4开发RIA程序,是入门比较好的资料
•• • • • :movie_camera: Demonstração :laptop_computer: 清醒Site para treinar os conceitos flex do CSS3,criado no curso da Origamid。 :memo: 罗泰罗视觉集团埃斯塔多塔雷法 :hammer: 牙痛症由于铸铁...
Flex_3_with_JavaFlex_3_with_JavaFlex_3_with_JavaFlex_3_with_Java
flex4源码 超酷menu导航 flex4
NULL 博文链接:https://zh-dream-success.iteye.com/blog/1685429
学习了一段时间的flex... 上传点资源,大家分享。 flex,怎么学习flex,Flex_3_Cookbook_中文版
Flex CSS简介 Flex 使用MXML设置样式 Flex 使用ActionScript设置样式 Flex 样式的继承与叠加 Flex 主题的使用 Flex 自定义皮肤 Flex 应用皮肤
SQL Server数据库在线管理系统(SSOM)
来公司第一个考核demo,用actionScrpt封装一个组件,根据提供的属性画出矩形的长、宽、背景颜色等。 //定义属性 private var _zx:Number=20;//图形左上方x轴的值 private var _zy:Number=20;//图形左上方Y轴的...
java+flex结合 适合初学flex的人
Flex_4_界面设计实战.pdf Flex_4_界面设计实战.pdf Flex_4_界面设计实战.pdf Flex_4_界面设计实战.pdf