`
mylxiaoyi
  • 浏览: 328349 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用基于列表的表单控件

阅读更多
 
使用基于列表的表单控件

我们可以在我们的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的表单多种控件接收例子

    表单控件包括文本输入框 (`&lt;input type="text"&gt;`)、密码输入框 (`&lt;input type="password"&gt;`)、单选按钮 (`&lt;input type="radio"&gt;`)、复选框 (`&lt;input type="checkbox"&gt;`)、下拉列表 (`&lt;select&gt;`) 等。 3. **JSP接收...

    基于input表单的时间控件

    本项目标题为“基于input表单的时间控件”,这意味着它提供了一个用jQuery构建的、集成在`&lt;input&gt;`表单内的时间选择器。jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理和动画效果,使得创建这种交互式...

    js表单控件 视觉效果一流,可以用在各个网页中运用

    6. **可访问性**:好的JS表单控件应考虑无障碍性(Accessibility),确保残障人士也能方便地使用。这包括添加合适的ARIA属性、确保键盘导航的流畅等。 7. **性能优化**:大量的表单控件可能导致页面加载速度变慢,...

    Excel中的表单控件——滚动条的使用.pdf

    标题“Excel中的表单控件——滚动条的使用”指的是在Excel中利用表单控件功能,特别是滚动条这一元素,来实现数据交互和动态调整。这篇描述提及的学习资料是关于如何在Excel工作表中有效地运用滚动条进行数据操作的...

    基于Vue + Vue.Draggable实现自定义表单控件

    基于Vue + Vue.Draggable实现自定义表单控件。新项目需要用到工作流设定 + 自定义表单控件,这里列出了自定义表单控件的代码实现,可实现自定义表单控件,可拖拽排序,自定义属性,项目 UI 组件库为 iView, Element UI...

    20170314085701_咏南下拉列表选择控件_永南下拉控件_

    2. `untYNDropdown.dfm`:这是表单文件,存储了界面布局和控件属性,如控件的位置、大小、字体等。 3. `bplynsearch.cfg`、`bplynsearch.dof`、`bplynsearch.dpk`、`bplynsearch.dproj`、`bplynsearch.dproj.local`...

    自定义表单控件,可拖拽排序,自定义属性.zip

    自定义属性基于Vue + Vue.Draggable实现自定义表单控件新项目需要用到工作流设置+自定义表单控件,这里推出了表单自定义控件的代码实现,可实现自定义表单控件,可拖拽排序,自定义属性项目UI组件库为iView、Element...

    练习-基于jquery的表单验证控件

    自己写的一个练习,基于jquery的表单验证控件,主要功能都有,但不很完整. 用法是在需要验证的input标签里加 validate 属性,内容是JSON格式的 比较简单,大家有需要可以拿去免费送,欢迎评论. 这个链接有图片效果和主要...

    计算机表单及其控件的创建与使用PPT学习教案.pptx

    向表单中添加控件有两种方式,一是直接从数据环境拖放,二是使用“表单控件”工具栏。每个控件都有相应的属性和事件,用户可以在属性窗口设置或通过编程方法进行设定。VFP还提供了多种控件生成器,如组合框生成器、...

    基于vue和element-ui实现的表单设计器 通过拖拽方式快速生成一个表单页面

    基于vue和element-ui实现的表单设计器。通过拖拽方式快速生成一个表单页面,表单可以导出json格式,也可以将其他人绘制的表单通过json导入方式进行还原。针对选择性控件(radio,select,checkbox)提供选择后触发...

    基于React动态配置表单

    2. **表单控件**:React社区提供了许多优秀的库,如`formik`、`yup`、`react-hook-form`等,它们简化了表单处理和验证的过程。在动态配置表单中,我们可以利用这些库的API来生成对应的表单控件。例如,`formik`允许...

    基于js日期控件

    "基于js日期控件" 指的是使用JavaScript编程语言实现的日期选择器组件。JavaScript,作为浏览器端的主要脚本语言,提供了丰富的功能来增强网页的交互性。这种日期控件在各种网页应用中十分常见,例如在线表单、预订...

    一个基于ASP.NET+AJAX实现的表单Form元素collapsible 折叠显示控件源码

    在实际应用中,这种可折叠表单控件有诸多好处:它可以帮助减少页面的视觉混乱,使关键信息更突出;在需要大量输入数据时,可以分步骤展示,降低用户的认知负担;还能改善移动设备上的用户体验,因为屏幕空间有限,...

    不错的基于Ajax的日期控件

    日期控件是网页表单中常见的交互元素,用于让用户输入或选择日期。传统的HTML日期输入控件可能功能有限,而基于Ajax的日期控件则可以提供更丰富的功能,如日历视图、日期范围选择、自定义格式化等。这些控件通常使用...

    基于 ElementPlus 的表单只读态控件,完美适配所有表单组件支持 npm 与 cdn 方式的引入

    在给定的资源中,我们关注的是如何实现基于 ElementPlus 的表单只读态控件,这在新建页面与详情页面的动态切换场景中非常有用。下面将详细介绍这个功能及其实施方法。 首先,我们要理解只读态控件在表单中的作用。...

    C#Winform温度计控件

    - 开发者可以在Winform项目中,将`TemperatureControl`控件拖放到表单上,然后通过属性窗口设置`MaxTemperature`、`MinTemperature`和`CurrentTemperature`。 - 实时更新温度值,可以调用`UpdateTemperature`方法...

    iOS 表单控件 FXForms.zip

    iOS 表单控件 FXForms ,FXForms 是个 Objective-C 库,可以很简单的创建基于表格的 iOS 表单。这个控件...

    基于layui的表单设计器

    这些扩展组件可能包括富文本编辑器、上传控件、树形选择器等,进一步丰富了表单的可能性。它们通常经过优化,与layui的其他组件无缝配合,确保了整体性能和稳定性。 为了更好地理解和使用这个表单设计器,我们可以...

    ASP.NET用户控件和自定义控件

    开发者可以将常见的界面元素,如导航栏、表单部分或者搜索框,封装成用户控件,然后在多个页面中使用。 **自定义控件(Custom Control)** 自定义控件比用户控件更高级,因为它们是从基类派生出来的,允许对渲染过程...

Global site tag (gtag.js) - Google Analytics