设为首页收藏本站
开启辅助访问 打卡签到论坛帮助切换到窄版

守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步，快速开始

扫一扫，访问微社区

搜索
热搜: ANE FlasCC 炼金术
守望者--AIR技术交流»论坛 › 综合交流 › Apache Flex › flex4组件_s:states
返回列表 发新帖
查看: 1970|回复: 0
打印 上一主题 下一主题

[皮肤主题] flex4组件_s:states

[复制链接]
破晓
  • TA的每日心情
    擦汗
    2018-4-10 15:18

    • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    52693
    钢镚
    1422

    开源英雄守望者
    跳转到指定楼层
    楼主
    发表于 2015-1-10 18:53:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
    1.FLEX4状态概述
       在很多富互联网应用，网页外观的改变基于用户的行为。一个状态就定义了组件的一种表现样式。要想使用状态，你应该首先定义一个默认的状态，然后在此基础上重写或者更改，这样就形成了一系列的其他样式。你可以添加、移除某些子元素，更改CSS或者属性的值，更改触发的事件。

    下面是一个简单的例子：
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    3.     xmlns:s="library://ns.adobe.com/flex/spark"
    4.     xmlns:mx="library://ns.adobe.com/flex/halo"
    5.     width="400" height="300">

    7.    <!--定义了二个状态，系统默认状态为第一个-->
    8.     <s:states>
    9.         <s:State name="State1"/>
    10.         <s:State name="State2"/>
    11.     </s:states>

    13.     <mx:VBox verticalCenter="0"
    14.         horizontalCenter="0" >
    15.    
    16.         <s:Button
    17.             <!--状态为state1时，设置label属性和单击事件-->
    18.             label.State1="Small"
    19.             click.State1="currentState='State2'"

    21.             <!--状态为state2时，设置width属性、height属性、label2属性和单击事件-->
    22.             width.State2="200"
    23.             height.State2="200"
    24.             label.State2="BIG"
    25.             click.State2="currentState='State1'"/>
    26.            
    27.         <!--状态为state2时，该label才显示-->
    28.         <mx:Label includeIn="State2"
    29.             width="100%"
    30.             text="State 2 Only"
    31.             textAlign="center"/>
    32.            
    33.     </mx:VBox>
    34. </s:Application>
    复制代码


    2.定义状态
       flex4里状态的定义与flex3不同，你只需在<states></states>标签内定义状态就可以了。添加子元素和设置属性之类，不在这里进行了。如下所示：
    1. <s:states>
    2. <s:State name="State1"/>
    3. <s:State name="State2"/>
    4. <s:State name="State3"/>
    5. .
    6. .
    7. </s:states>
    复制代码


    3.改变状态
       UIComponent类定义了一个currentState属性，通过改变这个属性的值来更换状态，这个属性的默认值是定义在需在<states></states>标签内的第一个状态。例如：
    1. <s:Button id="b1" label="Change to State 1" click="currentState='State2';"/>
    2. <s:Button id="b2" label="Change to the default" click="currentState='State1';"/>
    复制代码

    当然也可以通过UIComponent类的setCurrentState方法。


    4.为一个状态设定属性，样式和事件

       在flex4里通过点语法来设定一个组件属于某个状态的属性值。例如：
         
    1. <s:Button label="Default State" label.State2="New State"/>
    复制代码

       上述的代码的意思是，这个按钮的lable值在State2状态下是New State，在其他状态下是Default State。
    上述代码也可以这样写:
       
    1. <s:Button >
    2.       <s:label>Default State</s:label>
    3.       <s:label.State2>new State</s:label.State2>
    4.    </s:Button>
    复制代码

    要想在某个状态里清除某个属性的值，可以让属性值等于@clear。如下:
       
    1. <Button color="0xFF0000" color.State1="@Clear"/>
    复制代码

    对于事件也一样可以用点语法，例如：
      
    1. <s:Button id="b1" label="Click Me"
    2.       click="ta1.text='hello';"
    3.       click.State1="ta1.text='goodbye'"/>
    复制代码



    5.添加或移除组件
       在flex4里，添加或移除某个组件，直接在这组件的属性里搞定。组件多了两个属性,includeIn和excludeFrom。includeIn, 表示这个组件要被添加到属性值所指的状态，excludeFrom，表示这个组件要从属性值所指的状态中删除，includeIn和 excludeFrom不能在同一个组件标签里出现，他们的值可以是多个状态，之间用逗号隔开。例如:

    1. <s:states>
    2.    <s:State name="default"/>
    3.    <s:State name="addCheckBox"/>
    4.    <s:State name="addTextInput"/>
    5.    <s:State name="addCheckBoxandButton"/>
    6. </s:states>

    8. <s:CheckBox id="myCB" label="Checkbox"
    9. includeIn="addCheckBox, addCheckBoxandButton"/>

    11. <s:TextArea text="Exclude from addTextInput"
    12. excludeFrom="addTextInput"/>
    复制代码


    6.更改一个组件的父元素
       一个组件的父元素也能变，你信吗？不过flex4真的做到了。用的就是这个<fx:Reparent>标签。还是看段代码吧！
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <!-- states\NewStatesReparent.mxml -->
    3. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    4.                xmlns:mx="library://ns.adobe.com/flex/halo"
    5.                xmlns:s="library://ns.adobe.com/flex/spark">
    6.     <s:layout>
    7.         <s:VerticalLayout/>
    8.     </s:layout>
    9.    
    10.     <s:states>
    11.         <s:State name="Parent1"/>
    12.         <s:State name="Parent2"/>
    13.     </s:states>
    14.    
    15.     <s:HGroup>
    16.         <s:Panel id="Panel1"
    17.                  height="100" width="100"
    18.                  title="Panel 1">
    19.             <s:Button id="setCB" includeIn="Parent1"/>
    20.         </s:Panel>
    21.         <s:Panel id="Panel2"
    22.                  height="100" width="100"
    23.                  title="Panel 2">
    24.             <fx:Reparent target="setCB" includeIn="Parent2"/>
    25.         </s:Panel>
    26.     </s:HGroup>
    27.    
    28.     <s:HGroup>
    29.         <s:Button label="Parent 1"
    30.                   click="currentState='Parent1'"
    31.                   enabled.Parent1="false"/>
    32.         <s:Button label="Parent 2"
    33.                   click="currentState='Parent2'"
    34.                   enabled.Parent2="false"/>
    35.     </s:HGroup>
    36. </s:Application>
    复制代码

       这句话：<fx:Reparent target="setCB" includeIn="arent2"/>什么意思呢？target的值setCB，就是我们要换父亲的组件就是setCB，setCB是第一个panel的Button的id吧！当转换到状态Parent2时，这个Button就成了第二个Panle的子元素。因为 includeIn="arent2"告诉我们了，在状态Parent2时，就要换了setCB的父元素，换成fx:Reparent的父元素,即第二个panel。


    7.添加子元素时的控制
       flex4在第一次换到需要这个子元素出现的状态时，它被创建。这是默认的情况。但是，如果这个子元素的创建需要很长时间，那么用户肯定在切换状态时感到延迟，这是不好的。所以，默认的情况，可以改。通过更改itemCreationPolicy，这是组件的一个属性，它有两个值：deferred，默认值，意思是在第一次需要这个组件出现时创建； immediate，它是在程序一被启动就会创建这个子元素。
       一旦子元素被创建了，它就会一直存在了。

       界面的改变不是仅仅只能通过State。通过导航器，如：Accordion，Tab Navigator，ViewStack containers你也能做到。到底用哪个，取决于你的应用需求以及用户界面的设计。

    8.创建状态组
       在flex4里，可以给状态分组，比如第一个状态和第二个状态是一组，第三个状态和第四个状态是一组等等。我们先看怎么分组？
    1. <s:State name="default"/>
    2. <s:State name="addCheckBox" stateGroups="Group1"/>
    3. <s:State name="addTextInput"/>
    4. <s:State name="addCheckBoxandButton" stateGroups="Group1"/>
    复制代码

    只需添加一个stateGrooups这个属性。

    添加分组的好处是什么呢？
       如果一个组件在多个状态中出现，你就可以把这些状态划分到一组。那么，当出现这个族里任何一个状态时，这个组件的设置都会有效。点语法后面的值可以是组的名称，excludeFrom和includeIn的值也可以使组的名称。


    例1：states简单例子
    1. <?xml version="1.0"?>
    2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    3.     xmlns:mx="library://ns.adobe.com/flex/halo"
    4.     xmlns:s="library://ns.adobe.com/flex/spark">
    5.     <s:states>
    6.         <!-- Define the new view states. -->
    7.         <s:State name="default"/>
    8.         <s:State name="NewButton"/>
    9.     </s:states>   

    11.     <s:VGroup id="g1">
    12.         <s:HGroup>
    13.             <!-- Disable Button in the NewButton view state.
    14.                  当前状态是NewButton时，b1按钮失效
    15.               -->
    16.             <s:Button id="b1" label="Click Me"
    17.                 enabled.NewButton="false"/>

    19.             <!-- Add a new child control to the VBox. -->
    20.             <!-- 状态为NewButton时，该按钮才显示 -->
    21.             <s:Button id="b2" label="New Button"
    22.                 includeIn="NewButton"/>
    23.         </s:HGroup>

    25.         <s:Button label="Change to NewButton state"
    26.             click="currentState='NewButton';"/>            

    28.         <!-- Define Button control to switch to default view state. -->
    29.         <s:Button label="Change to default view state"
    30.             click="currentState='default';"/>
    31.     </s:VGroup>   
    32. </s:Application>
    复制代码
    本文来自:http://shazhifeng.iteye.com/blog/531081
    states
    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
    收藏收藏 分享分享 支持支持 反对反对 微信
    守望者AIR技术交流社区（www.airmyth.com）
    回复

    使用道具 举报

    返回列表 发新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号 ) 

    GMT+8, 2024-4-19 18:51 , Processed in 0.048989 second(s), 33 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表