表单中有哪些表单控件,表单常用的控件有哪些
使用基于列表的表单控件
我们可以在Adobe Flex程序中使用基于表单的控件,如ComboBox、List和HorizontalList。在我们插入这个控件之后,我们必须为它提供要显示的项目和要提交处理的数据。在Flex中,控件由数据提供者处理,数据提供者是类似于数组的对象集合。
在本节中,我们将演示如何使用要显示的项目和要处理的数据来组装基于列表的控件。
设置项目
在开始本节之前,我们必须执行以下任务:
创建课程项目
确保自动编译选项已打开。
插入并放置控件。
在本节中,我们创建了一个带有ComboBox控件和submit按钮的简单布局。
1在浏览视图中,选择课程项目,选择文件新MXML应用程序,并创建一个名为ListControl.mxml的程序文件
将ListControl.mxml文件设置为默认编译文件。
在3 MXML编辑器的设计模式下,将面板容器从组件视图的布局类拖放到布局中,并在属性视图中设计以下面板属性:
标题:评级客户服务
宽度:350
身高:200
十点十分
Y: 10
4通过从control类中拖放,将以下控件添加到面板容器中:
组合框
纽扣
5 ComboBox控件,并在Flex的properties视图中为其设置以下属性:
ID: cbxRating
X: 20
Y: 20
ComboBox控件没有加载任何项目,所以我们将稍后处理它。
6选择按钮按钮,并在Flex属性视图中设置以下属性:
标签:发送
X: 140
Y: 20
设计模式中的布局如下图所示:
7切换到编辑器的代码模式,我们会看到下面的MXML代码:
?xml版本=1.0 编码=utf-8 ?
MX:Application xmlns:MX= http://www . adobe . com/2006/mxml layout= absolute
MX:Panel x= 10 y= 10 width= 350 height= 200 title= Rate Customer Service
MX:ComboBox id= cbx rating x= 20 y= 20 width= 100 /MX:ComboBox
MX:Button x= 140 y= 20 label= Send /
/mx:面板
/mx:应用程序
8保存文件,编译完成后运行程序。程序运行结果如下:
9单击浏览器中的ComboBox控件。这个控件没有列出任何内容,因为我们还没有定义数据提供者。
汇编表
我们使用mx:dataProvider控件来组装一个基于列表的控件。Mx:dataProvider标签允许我们以几种方式指定列表项。最简单的方法是指定字符串数组,如下所示:
1在编辑器的代码模式下,在mx:ComboBox标记内指定一个mx:dataProvider标记,如下例所示:
?xml版本=1.0 编码=utf-8 ?
MX:Application xmlns:MX= http://www . adobe . com/2006/mxml layout= absolute
MX:Panel x= 10 y= 10 width= 350 height= 200 title= Rate Customer Service
MX:ComboBox id= cbx rating x= 20 y= 20 width= 100
mx:数据提供者
mx:数组
mx:String满意/mx:String
mx:字符串中性/mx:字符串
mx:String不满意/mx:String
/mx:Array
/mx:dataProvider
/mx:ComboBox
MX:Button x= 140 y= 20 label= Send /
/mx:面板
/mx:应用程序
2保存文件并在文件编译后运行程序。
3单击组合框查看列表项。
如果我们想访问ComboBox控件中选定项的值,我们可以在代码中使用下面的表达式:
cbxRating.value
在本例中,ComboBox控件的value属性应该包含满意、中立和不满意。
4若要测试此控件,请在ListControl.mxml文件中的mx:Button之后插入以下代码:
MX:Label x= 20 y= 120 text= { cbx rating . value } /
最终的程序代码如下:
?xml版本=1.0 编码=utf-8 ?
MX:Application xmlns:MX= http://www . adobe . com/2006/mxml layout= absolute
MX:Panel x= 10 y= 10 width= 350 height= 200 title= Rate Customer Service
MX:ComboBox id= cbx rating x= 20 y= 20 width= 100
mx:数据提供者
mx:数组
mx:String满意/mx:String
mx:字符串中性/mx:字符串
mx:String不满意/mx:String
/mx:Array
/mx:dataProvider
/mx:ComboBox
MX:Button x= 140 y= 20 label= Send /
MX:Label x= 20 y= 120 text= { cbx rating . value } /
/mx:面板
/mx:应用程序
花括号中的表达式是一个绑定操作,将ComboBox控件的value属性cbxRating复制到Label控件的text属性。换句话说,Label控件的text属性的值是由ComboBox控件选择的项的值指定的。
5保存文件,编译后运行程序。
与列表项关联的值。
也许我们希望将表单控件中的列表项与值相关联,就像在HTML中将选择表单元素与值相关联一样。例如,为了生成报告和数据,我们可能希望将满意与5、中立与3、不满意与1相关联。
为了实现这个目标,我们需要使用一个对象组件数据来组装ComboBox控件。Mx:Object tag允许我们定义一个包含要在ComboBox中显示的字符串的label属性,以及一个包含要与label关联的数值的data属性。
1在编辑器的代码模式下,用mx:Object替换mx:String,如下图:
?xml版本=1.0 编码=utf-8 ?
MX:Application xmlns:MX= http://www . adobe . com/2006/mxml layout= absolute
MX:Panel x= 10 y= 10 width= 350 height= 200 title= Rate Customer Service
MX:ComboBox id= cbx rating x= 20 y= 20 width= 100
mx:数据提供者
mx:数组
!-这些对象标签取代了字符串标签。-
mx:对象标签=满意数据=5/
mx:对象标签=中性数据=3/
mx:对象标签=不满意数据=1/
/mx:Array
/mx:dataProvider
/mx:ComboBox
MX:Button x= 140 y= 20 label= Send /
MX:Label x= 20 y= 120 text= { cbx rating . value } /
/mx:面板
/mx:应用程序
如果我们想访问ComboBox控件中选定项的值,我们可以使用下面的表达式:
cbxRating.value
value属性包含选定项的值。当指定数据字段时,value属性引用数据字段而不是标签字段。在此示例中,cbxRating.value属性包含5、3或1,具体取决于用户的选择。
2保存文件,编译后运行程序。