Flex 学习之路之十一 用户接口user interface控制栏

控制栏是可视的，不可滚动的

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\application\AppSparkCB.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   width="600">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:controlBarContent>
		<mx:MenuBar height="100%"
					dataProvider="{menuXML}"
					labelField="@label"
					showRoot="true"/>
		<mx:HBox paddingBottom="5"
				 paddingTop="5">
			<mx:ComboBox dataProvider="{cmbDP}"/>
			<mx:Spacer width="100%"/>
			<mx:TextInput id="myTI" text=""/>
			<mx:Button id="srch1"
					   label="Search"
					   click="Alert.show('Searching');"/>
		</mx:HBox>
	</s:controlBarContent>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
		]]>
	</fx:Script>
	<fx:Declarations>
		<fx:XMLList id="menuXML">
			<fx:menuitem label="File">
				<fx:menuitem label="New" data="New"/>
				<fx:menuitem label="Open" data="Open"/>
				<fx:menuitem label="Save" data="Save"/>
				<fx:menuitem label="Exit" data="Exit"/>
			</fx:menuitem>
			<fx:menuitem label="Edit">
				<fx:menuitem label="Cut" data="Cut"/>
				<fx:menuitem label="Copy" data="Copy"/>
				<fx:menuitem label="Paste" data="Paste"/>
			</fx:menuitem>
			<fx:menuitem label="View"/>
		</fx:XMLList>
		<fx:Array id="cmbDP">
			<fx:String>Item 1</fx:String>
			<fx:String>Item 2</fx:String>
			<fx:String>Item 3</fx:String>
		</fx:Array>
	</fx:Declarations>
	<s:Button label="Button"/>
	<mx:TextArea width="300" height="200"/>
</s:Application>

这个内容有点多：

1 它是一个垂直布局，

2 定义了控制栏的内容

3 导入了相当 于 一个警告类

4 定义了 相当于 一个菜单变量和一个下拉框变量

5 有一个按钮和文本域

实际的效果如下图所示：