本文主要是介绍积少成多Flash(9) - Flex 3.0 布局控件, 样式(css), 皮肤(skin)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
[索引页]
[源码下载]
积少成多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
[源码下载]
这篇关于积少成多Flash(9) - Flex 3.0 布局控件, 样式(css), 皮肤(skin)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
