开始这个速学教程之前，确定你完成下面的任务:
■在Flex Builder中创建QuickStart项目。
■在Flex Builder中打开Project菜单中确认Build Automatically选项已选上,如下:
学习在Flex Builder中编译
在你用Flex Builder编译之前，先说一些核心概念。
默认地, Flex Builder的standalone版本中当你添加文件到项目中或当你编辑后保存项目文件, Flex Builder会动创建应用程序。
编译后, Flex Builder会将调试与发布的SWF文件放到默认的输出文件夹bin文件夹中。
注意: 浏览器必须了安装Flash Player 8.5，Flex 2应用程序才能在浏览器中运行。
当你创建一个新的项目时, Flex Builder自动地産生项目的配置文件, bin文件夹与主应用程序文件。在一个项目中可以有一个以上的应用程序文件,但只能有一个指定的主应用程序文件。
你随时可以指定其他文件为主应用程序文件。所有的应用程序文件必须保存在Flex项目的根目录下。
现在你明白基本概念后,你能在FlexBuilder中创建一个小的应用程序与编译并运行他。
编译与运行应用程序
当Build Automatically已选上了,你在Flex Builder中添加文件到项目中或当你编辑后保存项目文件, Flex Builder会动编译你的应用程序。
这部分假设你已创建了QuickStart项目与Build Automatically已选上了。
1.打开Flex Builder差双击QuickStart.mxml文件。
2.在工具条上点击Code按钮,将视图转为代码视图。
程序代码：
xmlns="*">
程序代码：
这个标签插入一个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代码:
程序代码：
xmlns="*">
9.在标签后面输入下面的代码来插入剩下的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代码:
程序代码：
http://www.macromedia.com/2005/mxml"
xmlns="*">
8.保存文件,等待Flex Builder直到编译完成应用程序,再点击工具条上的Run按钮。
浏览器自动打开并运行你的Flex应用程序。
9.点击ComboBox。
ComboBox组件中没有任何项,因为你还没有定义它的数据提供者(data provider) 。
在List中放入项
在基于List的控件中放入项将使用子标签。标签提供给你几种方法指定List的项。最简单的方法是指定一系列字符串为数组,如下:
1.在代码视图中,输入下面的代码在与之间:
程序代码：
Satisfied
Netural
Dissatisfied
注: 中的 要在同一行.
如:Satisfied
如果是如下书写,将会在Satisfied上与下加上了个回车值了:
Satisfied
编译出来的ComboBox可是有问题的!
ListControl.mxml的代码将如下:
程序代码：
http://www.macromedia.com/2005/mxml"
xmlns="*">
Satisfied
Netural
Dissatisfied
2.保存文件,等待Flex Builder直到编译完成应用程序,再点击工具条上的Run按钮。
浏览器自动打开并运行你的Flex应用程序。
3.点击ComboBox组件来查看一下他的项。
你将使用下面的表达式到代码中来访问已选择的值:
cbxRating.value
在例子中, ComboBox的属性性包含“Satisfied”, “Neutral”与 “Dissatisfied”供用户选择。
4.在ListControl.mxml文件中,插入下面的代码到后面去测试一下:
程序代码：
大括号({})是动态绑定表达式的, 表达式在大括号中就是相等于复制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类型的数组。标签可以给你定义label属性,它将是在ComboBox中显示出来的项。还可能给你定义data属性,它将联合label属性。
1.在代码视图中,将标签改为标签,如下:
程序代码：
你能使用下面的表达式到代码中来访问已选择的值:
cbxRating.value
value属性的值包括被选择的项。当一个data被指定, value属性将引用data,不是label。在这个例子中, cbxRating.value属性包括的值有“5”, “3”或“1” 。
2. 保存文件,等待Flex Builder直到编译完成应用程序,再点击工具条上的Run按钮。
选择ComboBox中的项。当你选择不同的项时,Label将显示项相应的值。
在这个速学教程中,你已插入了一个基于List的控件与提供数据给他。
13270562_200803052249401.jpg来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/13270562/viewspace-200418/，如需转载，请注明出处，否则将追究法律责任。
转载于:http://blog.itpub.net/13270562/viewspace-200418/
1734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
