使用基于列表的表单控件

 

使用基于列表的表单控件

我们可以在我们的Adobe Flex程序中使用基于表单控件，例如ComboBox，List，HorizontalList。在我们插入这种控件以后，我们必须为其提供要显示的项 目以及要提交处理的数据。在Flex中，控件是由数据提供者来处理的，而所谓的数据提供者是类似于数组的对象的集合。
在这一节我们将会演示如何使用要显示的项目以及要处理的数据来组装基于列表的控件。

设置工程
在我们开始这一节之前，我们要先执行下面的任务：
创建Lessons工程
确保打开了自动编译选项

插入并放置控件
在这一节，我们创建了一个包含一个ComboBox控件与一个提交按钮的简单布局。
1 在浏览视图中选择Lessons工程，选择File>New>MXML Application并且创建一个名为ListControl.mxml的程序文件。
2 将ListControl.mxml的文件设置为默认编译的文件。
3 在MXML编辑器的设计模式中，从组件视图的布局类中向布局中拖放一个Panel容器，并且在属性视图中设计如下的Panel属性：
Title: Rate Customer Service
Width: 350
Height: 200
X: 10
Y: 10
4 通过从控件类中拖放向Panel容器中添加下列控件：
ComboBox
Button
5 在布局中ComboBox控件，并且在Flex的属性视图中为其设置如下的属性：
ID: cbxRating
X: 20
Y: 20
ComboBox控件并没有装入任何项目，我们要将在后面进行处理。
6 选择Button按钮并且在Flex属性视图中设置如下的属性：
Label: Send
X: 140
Y: 20
设计模式中的布局如下图所示：

7 切换到编辑器的代码模式下，我们将会看到下面的MXML代码：
<?xml version="1.0" encoding="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="cbxRating" x="20" y="20" width="100"></mx:ComboBox>
        <mx:Button x="140" y="20" label="Send"/>
    </mx:Panel>
</mx:Application>
8 保存文件，待编译完成后运行该程序。程序运行结果如下：

9 在浏览器中点击ComboBox控件，这个控件并没有列出任何内容，因为我们还没有定义数据提供者。

组装列表
我们使用<mx:dataProvider>控件来组装一个基于列表的控件。<mx:dataProvider>标签可以让我们通过几种方法来指定列表项目。最简单的方法就是指定一个字符串数组，如下所示：
1 在编辑器的代码模式下，在<mx:ComboBox>标签内指定一个<mx:dataProvider>标签，如下面的例子所示：
<?xml version="1.0" encoding="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="cbxRating" x="20" y="20" width="100">
            <mx:dataProvider>
                <mx:Array>
                    <mx:String>Satisfied</mx:String>
                    <mx:String>Neutral</mx:String>
                    <mx:String>Dissatisfied</mx:String>
                </mx:Array>
            </mx:dataProvider>        
        </mx:ComboBox>
        <mx:Button x="140" y="20" label="Send"/>
    </mx:Panel>
</mx:Application>
2 保存文件，待文件编译后运行程序。
3 点击ComboBox来查看列表项目。

如果我们要访问ComboBox控件中选定项目的值，我们可以在代码中使用下面的表达式：
cbxRating.value
在这个例子中，ComboBox控件的value属性应包含Satisfied,Neutral,Dissatisfied。
4 要测试这个控件，在ListControl.mxml文件中<mx:Button>之后插入下面的代码：
<mx:Label x="20" y="120" text="{cbxRating.value}" />
最终的程序代码如下所示：
<?xml version="1.0" encoding="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="cbxRating" x="20" y="20" width="100">
            <mx:dataProvider>
                <mx:Array>
                    <mx:String>Satisfied</mx:String>
                    <mx:String>Neutral</mx:String>
                    <mx:String>Dissatisfied</mx:String>
                </mx:Array>
            </mx:dataProvider>        
        </mx:ComboBox>
        <mx:Button x="140" y="20" label="Send"/>
        <mx:Label x="20" y="120" text="{cbxRating.value}"/>
    </mx:Panel>
</mx:Application>

在花括号中的表达式是将ComboBox控件的value属性，cbxRating拷贝到Label控件的text属性的绑定操作。换句话说，Label控件的text属性的值是由ComboBox控件所选定的项目的值来指定的。
5 保存文件，在编译完成后运行程序。
与列表项相关联的值
我们也许希望将一个表单控件中的列表项与一个值相关联，就如在HTML中将Select表单元素与一个值相关联一样。例如，为了生成报告和数据，我们也许希望将Satisfied关联5,Neutral关联3,Dissatisfied关联1。
为了达到这样的目的，我们要使用一个Object组件数据来组装ComboBox控件。<mx:Object>标签让我们可以定义一个包含要在ComboBox显示的字符串的lable属性，以及一个要与label相关联的数值的data属性。
1 在编辑器的代码模式中，将<mx:String>替换为<mx:Object>，如下所示：
<?xml version="1.0" encoding="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="cbxRating" x="20" y="20" width="100">
            <mx:dataProvider>
                <mx:Array>
                    <!-- These Object tags replace the String tags. -->
                    <mx:Object label="Satisfied" data="5"/>
                    <mx:Object label="Neutral" data="3"/>
                    <mx:Object label="Dissatisfied" data="1"/>
                </mx:Array>
            </mx:dataProvider>        
        </mx:ComboBox>
        <mx:Button x="140" y="20" label="Send"/>
        <mx:Label x="20" y="120" text="{cbxRating.value}"/>
    </mx:Panel>
</mx:Application>

如果我们要访问ComboBox控件中选定项目的值，我们可以使用下面的表达式：
cbxRating.value

value属性包含选定项目的值。当指定一个数据域时，value属性引用data域，而不是label域。在这个例子中，cbxRating.value属性包含5,3或是1，这取决于用户的选择。
2 保存文件，编译完成后运行程序。