积少成多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
[源码下载]
posted @ 2009-11-09 13:58  webabcd  阅读(5610)  评论(4编辑  收藏  举报