Flex Gumbo中如何通过layout属性设置ButtonBar布局的例子
By Minidxer | July 31, 2009
接下来的Flex Gumbo中如何通过layout属性，设置ButtonBar布局。
下面是main.mxml：
- <?xml version="1.0" encoding="utf-8"?>
- <s:Application name="Spark_ButtonBar_TileLayout_test"
- xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/halo" viewSourceURL="srcview/index.html">
- <s:ButtonBar id="btnBar"
- horizontalCenter="0"
- verticalCenter="0"
- skinClass="skins.CustomButtonBarSkin">
- <s:dataProvider>
- <s:ArrayList source="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]" />
- </s:dataProvider>
- </s:ButtonBar>
- </s:Application>
下面是skins/CustomButtonBarSkin.mxml的代码：
- <?xml version="1.0" encoding="utf-8"?>
- <s:Skin name="CustomButtonBarSkin"
- xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark"
- alpha.disabled="0.5">
- <s:states>
- <s:State name="normal" />
- <s:State name="disabled" />
- </s:states>
- <fx:Metadata>
- <![CDATA[
- [HostComponent("spark.components.ButtonBar")]
- ]]>
- </fx:Metadata>
- <fx:Declarations>
- <fx:Component id="middleButton">
- <s:ButtonBarButton skinClass="spark.skins.default.ButtonBarMiddleButtonSkin" />
- </fx:Component>
- </fx:Declarations>
- <s:DataGroup id="dataGroup" width="100%" height="100%">
- <s:layout>
- <s:TileLayout requestedColumnCount="3"
- columnWidth="200"
- horizontalGap="-1"
- verticalGap="-1" />
- </s:layout>
- </s:DataGroup>
- </s:Skin>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子
Topics:
ButtonBar, Gumbo |
No Comments » |
Tags: Gumbo, layout