在flex开发过程当中,有的时候需要能自动换行的容器,但是Tile和Grid并不理想,比如说Tile,虽然能自动换行排列组件,但是Tile组件却不好在运行的时候动态改变自己的大小。ToolBar是一个官方不推荐用的组件,所以在他的文档里找不到这个类,用ExcludeCalss标了出来,不知道在为来的版本当中是否会加入,不过即使将来没有了这个组件也没有关系的,它的源代码并不到,可以在FlexSdk中找到它的as文件,是一个扩展自Container的类。由于它被MetaData标签标为了ExcludeClass所以flexBuilder3并不能识别这个标签,在设计视图显示为一个红色叉号,如果要用的话你可以定义一个自定义的 as类型的组件让他继承自ToolBar即可直接在flexBuilder中用了。如果不这样做的话也不影响使用,只是在设计视图里显示为红色的叉号但并不影响它运行。
以下是它的使用例子:
index.mxml:
<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:Repeater>
</mx:ToolBar>
</mx:VBox>
</mx:Application>
ToolBar的原文件在:
[SDK Directory]/frameworks/projects/framework/src/mx/controls/richTextEditorClasses/ToolBar.as
更多的详细信息请看:http://blog.flexexamples.com/2008/01/06/creating-a-resizing-toolbar-in-flex/