使用基于列表的表单控件

使用基于列表的表单控件

我们可以在我们的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>
                    
                    <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 保存文件，编译完成后运行程序。

转载于:https://www.cnblogs.com/dyllove98/archive/2007/06/02/2462053.html

使用基于列表的表单控件相关推荐

【HTML5】html5中列表、表格、表单控件、浮动框架及结构化标签知识详解大全
一.列表 1.有序列表 <ol>有序列表 order list <li>列表项</li> <li>列表项</li> </ol> ...
day01【HTML基础】HTML表单【重点】、表单控件、水平线标签、段落和换行标签、超链接标签、图像标签、列表标签、div和span标签、转义（实体）字符、基本表格、合并表格
HTML 一 HTML概述超文本标记语言(Hyper Text Markup Language) 作用:搭建基础网页超文本:具有普通文本的特性,同时还可以加入图片.视频.超链接等等. 标记:即标签 ...
Angular19 自定义表单控件
1 需求当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...
bootstrap -- css -- 表单控件
若干css样式 .form-control { display: block;width: 100%;height: 34px;padding: 6px 12px;font-size: 14px;li ...
Vue基础之表单控件绑定
你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以更新数据, ...
Bootstrap3 表单控件的状态
控件的状态在表单的使用过程中,每个控件可能都会有很多状态,通过表单控件的状态,可以给用户或访问者提供一些有用的反馈. Bootstrap为表单控件提供了 4 种状态,分别是获得焦点状态.禁用状态.只 ...
Bootstrap 表单控件的尺寸
在Bootstrap中,有三种设置控件尺寸的方法,一种是让控件成为块级元素,一种是使用相对尺寸,一种是使用网格尺寸. 1.让控件成为块级元素如果想让控件像块级元素一样占满容器,就可以为它添加 .in ...
html5新增表单控件和表单属性
新的输入性表单控件: email:电子邮箱文本框,跟普通的没什么区别 - 当输入不是邮箱的时候,验证不通过 - 移动端的键盘会发生变化 tel:电话号码 url:网页的URL search:搜索引擎 ...
Angular 4.x 自定义表单控件
当我们打算自定义表单控件前,我们应该先考虑一下以下问题: 是否已经有相同语义的 native (本机) 元素?如:<input type="number"> 如果有,我 ...

使用基于列表的表单控件

使用基于列表的表单控件相关推荐

最新文章

热门文章