使用基于列表的表单控件
我们可以在我们的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 保存文件,编译完成后运行程序。
分享到:
相关推荐
利用jsp接收前端表单多种控件传过来的数据
网页中input表单内嵌的时间控件,里面有详细说明,直接运行就要以看到效果。基于jquery的控件
基于Vue + Vue.Draggable实现自定义表单控件。新项目需要用到工作流设定 + 自定义表单控件,这里列出了自定义表单控件的代码实现,可实现自定义表单控件,可拖拽排序,自定义属性,项目 UI 组件库为 iView, Element UI...
自己写的一个练习,基于jquery的表单验证控件,主要功能都有,但不很完整. 用法是在需要验证的input标签里加 validate 属性,内容是JSON格式的 比较简单,大家有需要可以拿去免费送,欢迎评论. 这个链接有图片效果和主要...
iOS 表单控件 FXForms ,FXForms 是个 Objective-C 库,可以很简单的创建基于表格的 iOS 表单。这个控件...
基于vue和element-ui实现的表单设计器。通过拖拽方式快速生成一个表单页面,表单可以导出json格式,也可以将其他人绘制的表单通过json导入方式进行还原。针对选择性控件(radio,select,checkbox)提供选择后触发...
基于 ElementPlus 的表单只读态控件,完美适配所有表单组件。主要用于新建页与详情页动态切换。支持 npm 与 cdn 方式的引入.zip
一个基于ASP.NET+AJAX实现的表单Form元素collapsible 折叠显示控件源码。
一套基于C#+ASP.NET实现的Web页面控件类库及页面表单设计程序代码。
一套b/s的表单验证控件,简单实用。基于jqury控件开发的,只需要简单的引用、简单设置就OK了
包括天气控件、精美按钮、表单控件、日期选择器、轮播图、数据表格以及适用于后台系统的界面组件,这些组件均采用响应式设计,能够确保在各种设备和分辨率上都能提供一致的用户体验。 这套组件集合基于最新的HTML5...
动态表单插件是单据、基础资料、列表、过滤界面等插件的基类,提供了这些模型插件的统一接口,通过这些接口可以对表单编辑样式、列表样式、操作、model数据等进行控制。 请求加载单据的过程插件一般经历以下几个阶段...
基于Vue,ElementUI快速创建生成表单,进行数据校验,获取表单数据
LigerUI是基于jQuery的UI框架,包括表单、布局、表格等等常用UI控件,以扩展性、使用简单、丰富UI的设计原则进行开发。使用LigerUI可以快速轻松地创建风格统一的界面效果。
实现基于 web 的图形化表单设计器,争取做到可拖拽控件,无需安装任何客户端控件。难点为数据绑定,也就是页面元素与数据表字段的映射,另外动态数据存储结构问题、表间数据校验和计算、建立主从表的问题是难点。 ...
Javascript表单验证控件(Validator v1.05).rar --------------------------------- 内含以下两个文件: Validator.chm(详细的使用帮助文档) validator.js(源代码,当然没有prototype.js强大,但最...
控件中含有隐藏的SELECT表单控件,ID及NAME都可自定义,这样可使COMBO控件放在一个普通的表单内,用户用一般的提交方式, 也可把选中的值准确地传到后台 经测试,兼容IE6--IE8,Firefox,chrome浏览器,在非IE浏览...
11.2.5 捕获DataList控件中引发的事件 11.2.6 选择DataList中的条目 11.2.7 通过DataList控件使用DataKeys集合 11.2.8 用DataList控件创建主/明细表单 11.2.9 编辑DataList控件中的条目 ...
仅使用jQuery提交表单和后台交互,不使用基于jQuery的表单插件 方式1、取到页面控件的值后拼接放在data中,传递到后台 方式2、页面序列化后放在data中,传递到后台 注:此种方式需设置页面控件的name属性
动态表单的简单实现,可以利用拖拽的形式,设计表单,可以拖拽的控件包括input框、select框、复选框、单选框等等