[源码下载]
积少成多Flash(9) - Flex 3.0 布局控件, 样式(css), 皮肤(skin)
作者：webabcd
介绍
演示 Flex 3.0 中的布局控件的应用，样式和皮肤的应用
- 布局控件 - Flex 中常用的布局控件一览
- 样式 - 通过 css 控制 Flex 中各个控件的样式
- 皮肤 - 使用 Flash 开发的 swf 做控件的皮肤
在线DEMO
http://www.cnblogs.com/webabcd/archive/2009/11/09/1598980.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
[源码下载]