FlexBuilder 2.0 速学教程(2):编译应用程序

这个标签插入一个Label控件到Canvas容器中,并设定了Labe控件l在Canvas容器中的位置与事件。
贴士:你能在工具条上点击Design按钮预览这个控件。

4.保存文件。
当你保存时,Flex Builder自动创建应用程序。你能看到在窗口的右下角看到创建的进度。

5.完成创建后,在工具条上点击Run按钮启动应用程序。

浏览器自动打开并运行应用程序

注意: 浏览器必须了安装Flash Player 8.5，Flex 2应用程序才能在浏览器中运行。
6.点击“Welcome to Flex!”文字看看他的效果。

这个速学教程教你该如何在Flex Builder中创建基于约束的布局。
一个基于约束的布局确保当在用户重设置应用程序窗口大小时，应用程序中的组件会聪明地自我调节大小。

开始之前
开始这个速学教程之前，确定你完成下面的任务:
■在Flex Builder中创建QuickStart项目。
■在Flex Builder中打开Project菜单中确认Build Automatically选项已选上,如下:

学习在Flex中基于约束的布局
当用户重设置Flex应用程序窗口大小时,你想组件在你的布局中是聪明地自我调节大小时，基于约束的布局就能发挥它的作用。
你将使用Canvas容器创建基于约束的布局。Canvas容器使组件的大小与位置更有弹性。它附属你当Canvas容器重设置大小时自动伸缩与移动组件的能力。
例如，如果当用户将应用程序窗口拖大，你想TextInput文件本框的宽度跟着伸长，你能固定文件本框与Canvas容器左边与右边的位置，那么文件本框的宽度将被窗口的宽度而设定。
注意：在Flex中，所有的约束是相对于Canvas容器边缘设置的。不能相对于其它的控件而设置。。
现在你明白基本概念后,你能在FlexBuilder中创建一个简单的应用程序与定义约束的布局。

插入与放置组件
创建基于约束的布局的第一个步骤是在Canvas容器中放置组件。在Flex的容器中,只有Canvas容器是支持绝对坐标。
像Macromedia Flash的场景一样,你能拖放与放置组件到Canvas容器的任何位置。对于象素点的准确性来说，你能设置x与y轴。
在这部分里,将插入与放置组件来组成一个简单的反馈表单。
1.打开QuickStart项目,选择File > New > MXML Application,在File Name中输入Layout.mxml。
2.在Navigator视图中右击Layout.mxml文件,选择Application Management > Set As Default Application,将它指定为默认被编译的文件。

3.在设计视图中,从Components面板(Window > Show View > Components)中拖放一个Label与一个TextInput控件到Canvas容器里。

4. 使用鼠标拖动Label与TextInputl控件肩并肩在Canvas容器3 分之1下的位置上(其实只要放到Canvas容器里就可以,下面会进行具体的调整)。
5.在Flex属性面板中,展开General与Layout属性面板。
设置General与Layout属性的选项出现。

如果你看到的视图与上面的不一样,那请点击视图工具条上的View As Form按钮。

6.在Canvas容器上,选择Label控件与在Flex属性面板给Label设置以下属性:
■ text: Email
■ x: 20
■ y: 60
7. 在Canvas容器上,选择TextInput控件与在Flex属性面板给TextInput设置以下属性:
■ x: 90
■ y: 60
■ width: 300
8. 在工具条上点击Code按钮,将视图转为代码视图。
Layout.mxml文件将包含下面的MXML代码:
程序代码：

9.在<mx:TextInput>标签后面输入下面的代码来插入剩下的Flex控件:
程序代码：

你能通过工具条上点击Design按钮来预览已做好的布局。这个布局将如下图:

10.保存文件。
11.点击工具条上的Run按钮。
浏览器自动打开并运行你的Flex应用程序。

注意: 浏览器必须了安装Flash Player 8.5，Flex 2应用程序才能在浏览器中运行。
12.拖动应用程序的窗口的边缘,使应用程序的窗口变大或变小。
组件仍然保持与窗口的左与上边缘的绝对坐标位置,在重设置应用程序窗口大小时,他们不会伸长与缩小。例如:如果你将窗口缩小, Button控件将消失, TextInput与TextArea控件将被留下一部分。
下一个步骤设置对控件有约束性的布局,当用户在重设置应用程序窗口大小时,他们会自动调整大小。
定义约束的布局
给组件在你的布局定位完后, 你将定义约束的布局,它能使组件跟随应用程序窗口自我调整大小。
1.在设计视图,选择TextInput组件。
2.在Flex属性面板,确定Layout类别已被展开。
Layout类别包含设置固定的选项。

3.定义约束的布局,在Layout类别中点击左边与右边的固定选框,并在左边文本框输入90,右边文文本框输入60。这是TextInput控件与Canvas容器的左边与右边保持的距离,如下:

这两个固定选框, 跟随窗口固定TextInput控件的左右两边。在文本框中输入的数字是指定TextInput控件与Canvas容器保持的距离有多远(单位:像素(pixels))。
这些约束在MXML代码里被表示如下：
程序代码：

4.在Canvas容器中选择TextArea控件,在Flex属性面板中,选择所有的四个固定选框并输入与边缘保持的距离,如下:
■ left: 90
■ right: 60
■ top: 90
■ bottom: 190
TextArea的Flex属性面板如下:

5.在Canvas容器中选择TextArea控件,在Flex属性面板中,选上右边与下边的固定选框,并在右边文本框输入60,下边文本框输入150。

6.保存文件,等待Flex Builder直到编译完成应用程序,再点击工具条上的Run按钮。
浏览器自动打开并运行你的Flex应用程序。

7.拖动应用程序的窗口的边缘,使应用程序的窗口变大或变小。
例如, 如果你将应用程序的窗口缩小, Button控件会向内移动, TextInput与TextArea控件将会跟随缩小。

如果你将应用程序的窗口拖长, Button控件会向外移动, TextInput与TextArea控件将会跟随拖长。

这个速学教程中,已教会你该如何在Flex Builder中创建基于约束的布局。

你能使用基于Lists的控件到你的Flex应用程序中,例如: ComboBox, List, HorizontalList。
在插入这种控件之后,你必须将他里面的项显示出来,他的值用于提交处理。
在Flex中,这些控件的值都放置于数据提供者(data providers)中, 这是类似于数组的对象集。
这个速学教程教你该如何在Flex Builder中将基于Lists的控件里面的项显示出来与他的值的处理。
开始之前
开始这个速学教程之前，确定你完成下面的任务:
■在Flex Builder中创建QuickStart项目。
■在Flex Builder中打开Project菜单中确认Build Automatically选项已选上,如下:

插入与放置控件

在这部分里,你将创建一个简单的表单。

1.打开QuickStart项目,选择File > New > MXML Application,在File Name中输入ListControl.mxml。

2.在Navigator视图中右击ListControl.mxml文件,选择Application Management > Set As Default Application,将它指定为默认被编译的文件。

3.在设计视图中,从组件面板(Window > Show View > Components)中拖放下面的控件到Canvas容器中:
■ Label
■ ComboBox
■ Button

4.在Canvas容器中,选择Label控件与设置Label的属性如下:
■ text: Rate customer service
■ x: 20
■ y: 50

5.在Canvas容器中,选择ComboBox控件与设置ComboBox的属性如下:
■ id: cbxRating
■ x: 20
■ y: 80

ComboBox组件中是没有项的,你将在后面放入项

6. 在Canvas容器中,选择Button控件与设置Button的属性如下:
■ label: Send
■ x: 140
■ y: 80

在设计视图中,布局将会如下:

7.在工具条上点击Code按钮,将视图转为代码视图。
ListControl.mxml文件将包括下面的MXML代码:

浏览器自动打开并运行你的Flex应用程序。

9.点击ComboBox。

ComboBox组件中没有任何项,因为你还没有定义它的数据提供者(data provider) 。

在List中放入项

在基于List的控件中放入项将使用<mx:dataProvider>子标签。<mx:dataProvider>标签提供给你几种方法指定List的项。最简单的方法是指定一系列字符串为数组,如下:

1.在代码视图中,输入下面的代码在<mx:ComboBox>与</mx:ComboBox>之间:

注: <mx:Array>中的 <mx:String/>要在同一行.
如:<mx:String>Satisfied</mx:String>
如果是如下书写,将会在Satisfied上与下加上了个回车值了:
 <mx:String>
Satisfied
</mx:String>
编译出来的ComboBox可是有问题的!

ListControl.mxml的代码将如下:

2.保存文件,等待Flex Builder直到编译完成应用程序,再点击工具条上的Run按钮。

浏览器自动打开并运行你的Flex应用程序。

3.点击ComboBox组件来查看一下他的项。

你将使用下面的表达式到代码中来访问已选择的值:

cbxRating.value

在例子中, ComboBox的属性性包含“Satisfied”, “Neutral”与 “Dissatisfied”供用户选择。

4.在ListControl.mxml文件中,插入下面的代码到<mx:Button>后面去测试一下:

大括号({})是动态绑定表达式的, 表达式在大括号中就是相等于复制ComboBox控件中的属性值cbxRating.value,到Label的text属性中。换句话说，Label的text属性值是ComboBox控件中被选择的值。

5.保存文件,等待Flex Builder直到编译完成应用程序,再点击工具条上的Run按钮。

选择ComboBox中的项, Label将显示你选择的字符串,如: “Satisfied”, “Neutral”, 或“Dissatisfied” 。

联合值在List项中

像HTML中的SELECT元素一样,你可以将值联合到List的项中。例如:为了产生报告和统计,你可能想用Satisfied代表5, Neutral代表3, Dissatisfied代表1联繫起来用。

为了做这些,你要将ComboBox的数据提供者(data provider)里的String类型指定为Objcet类型的数组。<mx:Object>标签可以给你定义label属性,它将是在ComboBox中显示出来的项。还可能给你定义data属性,它将联合label属性。

1.在代码视图中,将<mx:String>标签改为<mx:Object>标签,如下:

你能使用下面的表达式到代码中来访问已选择的值:

cbxRating.value

value属性的值包括被选择的项。当一个data被指定, value属性将引用data,不是label。在这个例子中, cbxRating.value属性包括的值有“5”, “3”或“1” 。

2. 保存文件,等待Flex Builder直到编译完成应用程序,再点击工具条上的Run按钮。

选择ComboBox中的项。当你选择不同的项时,Label将显示项相应的值。

在这个速学教程中,你已插入了一个基于List的控件与提供数据给他。