Flex第三记

周六狠睡了一觉，洗了衣服。周日去植物园转了一圈，万花齐放，特漂亮，就是有点热。那两天过的太奢侈了。

结论就是这两天没看Flex，今天继续。

继上一记的例子，今天看的有基于约束的布局，先上概念：

在基于约束的布局中，所有的控件都是在基于一个父容器的边界进行定位的。这个父容器被定义成BasicLayout，以支持绝对定位。在Flex中基于约束的布局是通过锚定点实现的。布局中的锚定点用来指定某控件要以何中方式停靠于容器边缘。

 

视图状态，每一个MXML页面都有一个currentState属性，即当前状态，使用该状态可以控制应用程序在在指定的时间内将指定的某一状态展示给用户。可以在按钮上加事件来切换状态。

混合容器，主要涉及两类容器：VGroup和HGroup。没什么好说的，就是混合有布局的容器。

示例：

<?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/mx">

    <s:states>　　　　　　　　　　　　　　　　　　------实例化两个视图状态
        
        <s:State name="State1"/>
        
        <s:State name="cartView"/>
        
    </s:states>
    
    <s:controlBarLayout>                                   -------父容器的布局
        
        <s:BasicLayout/>
        
    </s:controlBarLayout>
    
    <s:controlBarContent>
        
        <s:Button y="10" label="CheckOut" id="btnCheckOut" right="10"/>
        
        <s:Button y="10" label="View Cart" id="btnCartView" right="90" click.State1="this.currentState='cartView'"/>-------状态切换按钮
        
        <s:Button label="Flex Grocer"  x="5" y="5"/>
        
    </s:controlBarContent>
    
    
    
    <fx:Declarations>
        
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
        
    </fx:Declarations>
    
    <s:Label text="(c)2013,FlexGrocer" right="10" bottom="10"/>-------版权被约束在父容器中距右边缘10px距下边缘10px的位置。
    
    <s:HGroup width="100%" height="100%" id="bodyGroup" x="0" y="0">-------使用复合容器，省去定义布局。
        
        <s:VGroup id="products" width.State1="100%" height.State1="150" visible.cartView="false"><!--width.cartView="0" height.cartView="0"-->

　　　　-------此处出现了状态，width.State1表示这个容器的宽度在State1状态下为100%，高度同。但书中说这里还会出现在其他状态时容器的宽高，可是我这里没有生成。　　　　　　    不过目前为止还没有影响。
            
            <s:Label text="Milk" id="prodName" width="63" height="14"/>
            
            <s:Label text="$1.99" id="price"/>
            
            <s:Button label="AddtoCart" id="add"/>
            
        </s:VGroup>
        
        <s:VGroup height="100%" id="cartGroup" width.cartView="100%" visible.State1="false">-------在State1状态时被隐藏
            
            <s:Label text="Your Cart Total :$"/>
            
            <s:Button label="View Cart" click="this.currentState='cartView'" includeIn="State1"/>-------这个按钮只存在于State1状态。
            
            <mx:DataGrid includeIn="cartView" width="100%" id="dgCart">
                
                <mx:columns>
                    
                    <mx:DataGridColumn headerText="列 1" dataField="col1"/>
                    
                    <mx:DataGridColumn headerText="列 2" dataField="col2"/>
                    
                    <mx:DataGridColumn headerText="列 3" dataField="col3"/>
                    
                </mx:columns>
                
            </mx:DataGrid>
            
            <s:Button includeIn="cartView" label="Continue Shopping" click="this.currentState=''"/>-------点击按钮返回原始状态，当currentState为空时，就返回初　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  始状态。这个按钮只存在于cartView状态。
            
        </s:VGroup>
        
    </s:HGroup>
    
</s:Application>