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

[索引页]
[源码下载]

[align=center]积少成多Flash(9) - Flex 3.0 布局控件, 样式(css), 皮肤(skin) [/align]

作者：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、样式的控制
样式

Application
引用样式

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

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
[源码下载]