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

本文链接：https://blog.youkuaiyun.com/webabcd/article/details/4792102

[源码下载]

积少成多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
[源码下载]