<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white"
creationComplete="application1_creationCompleteHandler(event)">
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
var toolbar:ToolBarAS= new ToolBarAS();
var checkBox:CheckBox;
toolbar.width=this.canvas.width*0.8;
for(var i:int;i<50;i++){
checkBox=new CheckBox();
checkBox.label=i.toString();
toolbar.addElement(checkBox);
}
this.canvas.addElement(toolbar);
}
]]>
</mx:Script>
<mx:Array id="images">
<mx:Object label="Button" />
<mx:Object label="ButtonBar" />
<mx:Object label="CheckBox" />
<mx:Object label="ColorPicker" />
<mx:Object label="ComboBox" />
<mx:Object label="DataGrid" />
<mx:Object label="DateChooser" />
<mx:Object label="DateField" />
<mx:Object label="HorizontalList" />
<mx:Object label="HRule" />
<mx:Object label="HSlider" />
<mx:Object label="Image" />
<mx:Object label="Label" />
<mx:Object label="LinkBar" />
<mx:Object label="LinkButton" />
<mx:Object label="List" />
<mx:Object label="Menu" />
<mx:Object label="MenuBar" />
<mx:Object label="NumericStepper" />
<mx:Object label="ProgressBar" />
<mx:Object label="RadioButton" />
<mx:Object label="RadioButtonGroup" />
<mx:Object label="RichTextEditor" />
<mx:Object label="Spacer" />
<mx:Object label="SWFLoader" />
<mx:Object label="TabBar" />
<mx:Object label="Text" />
<mx:Object label="TextArea" />
<mx:Object label="TextInput" />
<mx:Object label="TileList" />
<mx:Object label="Tree" />
<mx:Object label="VideoDisplay" />
<mx:Object label="VRule" />
<mx:Object label="VScrollBar" />
<mx:Object label="VSlider" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="percentWidth:">
<mx:HSlider id="slider"
minimum="0"
maximum="100"
value="35"
liveDragging="true"
snapInterval="1"
tickInterval="10"
dataTipPrecision="0" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:VBox id="vBox"
verticalAlign="middle"
horizontalAlign="center"
backgroundColor="black"
backgroundAlpha="0.1"
width="100%"
height="200">
<mx:ToolBar id="toolBar"
percentWidth="{slider.value}"
backgroundColor="haloSilver"
minWidth="18">
<mx:Repeater id="imgRepeater"
dataProvider="{images}">
<!--<mx:Image id="img"
source="assets/{imgRepeater.currentItem.label}.png"
toolTip="{imgRepeater.currentItem.label}" /> -->
<mx:CheckBox id="checkbox" label="{imgRepeater.currentItem.label}"/>
</mx:Repeater>
</mx:ToolBar>
</mx:VBox>
<mx:Canvas id="canvas" x="500" width="450" height="97">
</mx:Canvas>
</mx:Application>
在 flex 开发过程当中,有的时候需要能自动换行的容器,但是Tile和Grid并不理想,比如说Tile,虽然能自动换行排列组件,但是Tile组件却不好在运行的时候动态改变自己的大小。ToolBar是一个官方不推荐用的组件,所以在他的文档里找不到这个类,用ExcludeCalss标了出来,不知道在为来的版本当中是否会加入,不过即使将来没有了这个组件也没有关系的,它的源代码可以在FlexSdk中找到(它的as文件),是一个扩展自 Container的类。由于它被MetaData标签标为了ExcludeClass所以flexBuilder3并不能识别这个标签,在设计视图显示为一个红色叉号,如果要用的话你可以定义一个自定义的 as 类型的组件让他继承自ToolBar即可直接在flexBuilder中用了。如果不这样做的话也不影响使用,只是在设计视图里显示为红色的叉号但并不影响它运行。
上面的例子主要应用了toolbar和repeater两种组件,toolbar是动态给组件布局的,repeater是用来生成多个重复组件的。