开发学院图形图像Flash 积少成多Flash(9) - Flex 3.0 布局控件, 样式(css... 阅读

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

 2009-11-16 00:00:00 来源:WEB开发网   
核心提示:介绍演示 Flex 3.0 中的布局控件的应用,样式和皮肤的应用 * 布局控件 - Flex 中常用的布局控件一览* 样式 - 通过 css 控制 Flex 中各个控件的样式* 皮肤 - 使用 Flash 开发的 swf 做控件的皮肤 在线DEMOhttp://www.cnblogs.com/webabcd/archi

介绍

演示 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>

1 2 3  下一页

Tags:积少成多 Flash Flex

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
更多精彩
    赞助商链接

    热点阅读
      焦点图片
        最新推荐
          精彩阅读