接下来的一步是为控件设置布局约束,以便它们可以在程序窗体大小改变时进行调节。
定义布局约束
在布局中放置好组件后,你就可以进行布局约束的定义了。在MXML编辑器的设计模式中,选择TextInput控件(用来输入电子邮件地址的)。
在Flex属性视图中,确保Layout category of properties是展开的。Layout category中包含了设置锚定的选项。
3. 为TextInput 控件定义布局约束,在视图中选择左/右锚定框,并指定距离窗体左边
缘90,距离窗体右边缘60,就象这样:
这些约束也可以通过MXML代码来实现: 4. 在编辑器的设计模式下,选择TextArea控件,为它设置四个角与容器的距离: Left: 90 Right: 60 Top: 90 Bottom: 190 在Flex属性视图中的布局分类里,TextArea控件看起来就象这样: 5. 在布局中选择Button控件,选择右/底锚定框,分别设置数值60和150,就象这样: 6. 保存文件,编译后运行。 7. 拖拉浏览器窗体的边缘使其更大或更小。举个例子,如果你使窗体更狭窄,Send按钮会向左边移动,同时TextInput和TextArea文本框会变得更加狭窄。 如果你使浏览器窗体更加宽大,Send按钮会向右边移动,TextInput和TextArea文本框会变得更宽。 在本节中,你学习了如何使用Flex Builder创建受约束的布局。 第四节 使用列表控件 你可以在程序中使用列表控件,如ComboBox,List或HorizontalList。在插入这些类型的控件后,你必须装入内容并进行显示。在Flex中,控件是由数据提供器来进行组装的,它就象一个类似于数组的对象收集器。 在本节中,你将学习如何装入列表控件并进行显示。 插入并放置控件 首先,创建一个简单的布局,在其中包含一个ComboBox控件和一个submit按钮。 1. 在导航视图中选定Lessons项目,选择File > New > MXML Application并创建一个名叫ListControl.mxml的文件。 2. 将ListControl.mxml文件设计为被编译的默认文件,并在关联菜单中选择Set As Default Application from the context menu。 3. 在MXML编辑器的设计模式下,从组件视图中拖拉一个面板容器到布局上,并在属性视图中设置相应的属性: Title: Rate Customer Service Width: 350 Height: 200 X: 10 Y: 10 4. 从组件视图中拖拉出其它所需的控件到面板容器中: ComboBox Button 5. 在布局中选择ComboBox控件,并在属性视图中对它的相应属性进行设置: ID: cbxRating X: 20 Y: 20 ComboBox控件现在并没有显示任何项,你需要稍后装入它们。 6. 选择Button控件并进行相应在的属性设置: Label: Send X: 140 Y: 20 本例的布局在设计模式下看起来就象这样: 7. 切换到编辑器的源代码模式下,在ListControl.mxml文件中输入随后的MXML代码: 8. 保存文件,编译后运行。如下图所示: 9. 点击浏览器中的ComboBox控件。 这时并没有显示任何项,因为你还没有定义它的数据提供者。