积少成多Flash(9) - Flex 3.0 布局控件, 样式(css), 皮肤(skin)

<?xml version="1.0" encoding="utf-8"?> 
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"    
        title="Layout 常用布局控件一览" width="476" height="427"> 
         
        <mx:Script> 
                <![CDATA[ 
                 
                        import mx.controls.Alert; 
                         
                        private function submitForm(e:MouseEvent):void 
                        { 
                                Alert.show("Item1: " + item1.text, "Alert框"); 
                        } 
                         
                ]]> 
        </mx:Script> 
         
        <!-- 
                HBox - 水平线性布局 
                VBox - 垂直线性布局 
        --> 
        <mx:HBox x="10" y="10" width="438" horizontalGap="50" borderThickness="1" borderStyle="solid"> 
                <mx:Label text="HBox - Label1"/> 
                <mx:Label text="HBox - Label2"/> 
        </mx:HBox> 
         
        <!-- 
                HDividedBox - 在 HBox 的基础上，以垂直方向显示分隔条 
                VDividedBox - 在 VBox 的基础上，以水平方向显示分隔条 
        --> 
        <mx:HDividedBox x="10" y="36" width="438" borderThickness="1" borderStyle="solid"> 
                <mx:Label text="HDividedBox - Label1"/> 
                <mx:Label text="HDividedBox - Label2"/> 
        </mx:HDividedBox> 
         
        <!-- 
                Panel - 面板。可设置其标题，内容等 
        --> 
        <mx:Panel width="171" height="97" layout="absolute" title="Panel - Title" x="10" y="64" borderThickness="1" borderStyle="solid"> 
                <mx:Label text="Panel - Label1"/> 
        </mx:Panel> 
         
        <!-- 
                Grid - 网格型布局控件 
        --> 
        <mx:Grid x="10" y="169" borderThickness="1" borderStyle="solid"> 
                <mx:GridRow width="100%" height="100%"> 
                        <mx:GridItem width="100%" height="100%"> 
                                <mx:Label text="Grid - Label1"/> 
                        </mx:GridItem> 
                        <mx:GridItem width="100%" height="100%"> 
                                <mx:Label text="Grid - Label2"/> 
                        </mx:GridItem> 
                </mx:GridRow> 
                <mx:GridRow width="100%" height="100%"> 
                        <mx:GridItem width="100%" height="100%" colSpan="2" horizontalAlign="center"> 
                                <mx:Label text="Grid - Label3"/> 
                        </mx:GridItem> 
                </mx:GridRow> 
        </mx:Grid> 
         
        <!-- 
                Form - 用于构建表单型布局 
        --> 
        <mx:Form x="189" y="64" width="259" height="149" borderThickness="1" borderStyle="solid"> 
                <mx:FormHeading label="Form - Head"/> 
                <mx:FormItem label="Item1: "> 
                        <mx:TextInput id="item1" />         
                </mx:FormItem> 
                <mx:FormItem> 
                        <mx:HRule height="1" width="100%" /> 
                        <mx:Button label="Form - Submit" click="submitForm(event)" /> 
                </mx:FormItem> 
        </mx:Form> 
         
        <!-- 
                Canvas - 绝对定位布局控件 
        --> 
        <mx:Canvas width="438" height="84" x="10" y="221" borderThickness="1" borderStyle="solid"> 
                <mx:Label text="Canvas - Label1"/> 
                <mx:Label text="Canvas - Label2" x="104" y="10"/> 
                <mx:Label text="Canvas - Label3" x="208" y="20"/> 
        </mx:Canvas> 
         
        <!-- 
                ApplicationControlBar - 显示为一个条形控件 
        --> 
        <mx:ApplicationControlBar x="10" y="313" width="436"> 
                <mx:Label text="ApplicationControlBar - Label1"/> 
        </mx:ApplicationControlBar> 
                 
        <!-- 
                ControlBar - Panel 底部的条形控件 
                Spacer - 不用于显示，纯粹占位用 
        --> 
        <mx:ControlBar> 
                <mx:Label text="Panel - ControlBar - Label1"/> 
                <mx:Spacer width="100%" x="154" y="350"/> 
                <mx:Label text="Panel - ControlBar - Label2"/> 
        </mx:ControlBar> 
</mx:Panel>

/*    
* Flex 也支持 CSS 中的类型选择符 
* 此种类型选择符必须设置在外部，然后由具体的 mxml 引用，直接将其写在 <mx:Style /> 中无效 
*/ 
Application 
{ 
        font-size: 12px; 
}

<mx:Style source="style.css" />

<?xml version="1.0" encoding="utf-8"?> 
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" 
        initialize="init();" 
        title="CSS 的应用"> 
         
        <mx:Script> 
                <![CDATA[ 
         
                        // 重写已声明的样式 
                        // 其中样式 “italic” 已在 <mx:Style /> 中做了声明 
                        private function init():void 
                        { 
                                var css:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".italic"); 
                                css.setStyle("fontStyle", "italic"); 
                        } 
                         
                        // 以编程方式指定样式 
                        private function setTextInputStyle():void 
                        { 
                                txt.setStyle("color", "Red"); 
                        } 
                         
                ]]> 
        </mx:Script> 
         
        <mx:Style> 
                /* 在 Flex 中的做样式设置，基本与 CSS 相同 */ 
                 
                .red    
                {    
                        color: red; 
                } 
                .bold 
                { 
                        font-weight: bold; 
                } 
                .italic 
                { 
                         
                } 
                 
                .myClass 
                { 
                        /* 使用内嵌图片做背景 */ 
                        background-image:Embed("images/logo.png"); 
                } 
        </mx:Style>                
         
        <!--以声明方式指定样式（可以一次指定多个样式）--> 
        <mx:Label text="Label" x="10" y="10" styleName="red bold italic" /> 
         
        <!--以编程方式指定样式--> 
            <mx:TextInput id="txt" text="TextInput" x="10" y="36" initialize="setTextInputStyle();" /> 

        <mx:VBox styleName="myClass" x="10" y="85"> 
                <mx:Label text="Label" color="yellow" fontSize="30" /> 
        </mx:VBox>        
     
</mx:Panel>

Button.customButton 
{  
        /* 
         * 如果要在运行时加载 skin 需要将其编译为 swf（在 .css 文件中单击右键，选择 Compile CSS to SWF） 
         * 自定义皮肤：在 Flash 中要选择为 ActionScript 导出，在 Flash 中编辑皮肤时，要启用9切片(放大/缩小时边缘不会变形，也就是说边缘不随放大/缩小而变化) 
         * 此处指定的 style/skin.swf 为在 Flash 中编辑的皮肤 
         */ 
        upSkin:  Embed(source="style/skin.swf", symbol="Button_upSkin"); 
}

<?xml version="1.0" encoding="utf-8"?> 
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" 
        title="Skin 的应用"> 
         
        <mx:Script>    
                <![CDATA[ 
                 
                        // 应用自定义皮肤 
                        private function changeSkin():void 
                        { 
                                StyleManager.loadStyleDeclarations("style/customButton.swf"); 
                                 
                                btn.styleName = "customButton" 
                        } 
                         
                ]]> 
        </mx:Script> 
         
        <mx:Style source="style/customButton.css" /> 
         
        <mx:Button id="btn" label="换皮" click="changeSkin();" /> 
         
</mx:Panel>

ToolTip    
{  
        fontSize:  12;  
        fontStyle:  "italic";  
        color:  #000000;  
        backgroundColor:  #FCEA1E; 
}

<?xml version="1.0" encoding="utf-8"?> 
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" 
        title="ToolTip 的 Demo"> 
                        
        <mx:Style source="style.css" /> 
            
        <mx:TextInput toolTip="我是 TookTip" x="10" y="10"/> 
         
</mx:Panel>