flex4组件_s:states

1.FLEX4状态概述
   在很多富互联网应用，网页外观的改变基于用户的行为。一个状态就定义了组件的一种表现样式。要想使用状态，你应该首先定义一个默认的状态，然后在此基础上重写或者更改，这样就形成了一系列的其他样式。你可以添加、移除某些子元素，更改CSS或者属性的值，更改触发的事件。

下面是一个简单的例子：

    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    width="400" height="300">

  
   
       
       
   

            horizontalCenter="0" >
  
                   
            label.State1="Small"
            click.State1="currentState='State2'"

           
            width.State2="200"
            height.State2="200"
            label.State2="BIG"
            click.State2="currentState='State1'"/>
          
       
                    width="100%"
            text="State 2 Only"
            textAlign="center"/>
          
   


2.定义状态
   flex4里状态的定义与flex3不同，你只需在标签内定义状态就可以了。添加子元素和设置属性之类，不在这里进行了。如下所示：




.
.


3.改变状态
   UIComponent类定义了一个currentState属性，通过改变这个属性的值来更换状态，这个属性的默认值是定义在需在标签内的第一个状态。例如：


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

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

   在flex4里通过点语法来设定一个组件属于某个状态的属性值。例如：
     
   上述的代码的意思是，这个按钮的lable值在State2状态下是New State，在其他状态下是Default State。
上述代码也可以这样写:
  
      Default State
      new State
  
要想在某个状态里清除某个属性的值，可以让属性值等于@clear。如下:
   
对于事件也一样可以用点语法，例如：
         click="ta1.text='hello';"
      click.State1="ta1.text='goodbye'"/>

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


  
  
  
  


includeIn="addCheckBox, addCheckBoxandButton"/>

excludeFrom="addTextInput"/>

注意：
       使用了includeIn和excludeFrom，则只有当前状态下的控件是存在的，其它状态下的控件并不存在，所有无法使用，如果想给非当前状态下的控件赋值，可以使用itemCreationPolicy。
//creationComplete后可用
// creationComplete后可用
//creationComplete后不可用

6.更改一个组件的父元素
   一个组件的父元素也能变，你信吗？不过flex4真的做到了。用的就是这个标签。还是看段代码吧！


               xmlns:mx="library://ns.adobe.com/flex/halo"
               xmlns:s="library://ns.adobe.com/flex/spark">
   
       
   
   
   
       
       
   
   
   
                         height="100" width="100"
                 title="Panel 1">
            setCB" includeIn="Parent1"/>
       
                         height="100" width="100"
                 title="Panel 2">
            setCB" includeIn="Parent2"/>
       
   
   
   
                          click="currentState='Parent1'"
                  enabled.Parent1="false"/>
                          click="currentState='Parent2'"
                  enabled.Parent2="false"/>
   

   这句话：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里，可以给状态分组，比如第一个状态和第二个状态是一组，第三个状态和第四个状态是一组等等。我们先看怎么分组？




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

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


例1：states简单例子

    xmlns:mx="library://ns.adobe.com/flex/halo"
    xmlns:s="library://ns.adobe.com/flex/spark">
   
       
       
       
       

   
       
           
                            enabled.NewButton="false"/>

           
           
                            includeIn="NewButton"/>
       
 
                    click="currentState='NewButton';"/>           

       
                    click="currentState='default';"/>