Flex3学习轨迹：创建视图状态

Flex的视图状态（View State）是一种能够改变组件或者应用程序内容和外观的技术特性。每个应用程序都包括一个基本的视图状态（Base State），也就是初始构建的组件、页面内容、Logo和边栏等。当用户单击页面中的按钮控件时，应用程序将进入一个新的视图状态，即通过一个动画改变自身外观，例如改变某些文字的内容、新增或者移除部分组件等。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12">
    <!-- 定义富态 -->
    <mx:states>
        <mx:State name="details">
            <mx:AddChild relativeTo="{h1}" position="firstChild">
                <mx:VBox>
                    <mx:Label text="品牌：戴尔" />
                    <mx:Label text="尺寸：22寸" />
                    <mx:Label text="价格：2500RMB" />
                </mx:VBox>
            </mx:AddChild>
            <mx:SetProperty target="{label1}" name="label" value="基本参数" />
            <mx:SetStyle target="{label1}" name="color" value="blue" />
        </mx:State>
    </mx:states>
    <!-- 定义基态 -->
    <mx:Panel title="创建视图状态" width="250" height="190" 
        verticalAlign="middle" horizontalAlign="center">
        <mx:VBox id="v1" verticalCenter="true" horizontalAlign="center">
            <mx:HBox id="h1">
                <mx:Image id="image1" source="assets/dellDisplay.jpg" />
            </mx:HBox>
            <mx:LinkButton id="label1" label="我的显示器" fontWeight="bold" click="currentState = currentState=='details' ? '':'details';" />
        </mx:VBox>
    </mx:Panel>
</mx:Application>