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