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

[索引页]
[源码下载]

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

作者：webabcd

介绍
演示 Flex 3.0 中的布局控件的应用，样式和皮肤的应用

布局控件 - Flex 中常用的布局控件一览

样式 - 通过 css 控制 Flex 中各个控件的样式

皮肤 - 使用 Flash 开发的 swf 做控件的皮肤

在线DEMO
/article/4589642.html

1、布局控件一览
Layout.mxml


<?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>



2、样式的控制
样式




/**//*


* Flex 也支持 CSS 中的类型选择符


* 此种类型选择符必须设置在外部，然后由具体的 mxml 引用，直接将其写在 <mx:Style /> 中无效


*/


Application




{

}{


font-size: 12px;


}



引用样式


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

css.mxml（Flex 中样式相关的演示）


<?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>



3、皮肤的使用
customButton.css


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");


}

Skin.mxml


<?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>



4、ToolTip 的样式的控制
style.css


ToolTip




{

}{


fontSize: 12;


fontStyle: "italic";


color: #000000;


backgroundColor: #FCEA1E;


}



ToolTipDemo.mxml


<?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>



OK
[源码下载]