实例解析Flex应用

 本文和大家重点讨论一下Flex应用，以购物车为例向大家解析，使用数据绑定功能在下面显示当前选择的品牌的说明，还有一个添加到购物车的按钮，当按钮被按下后，该品牌的咖啡便会被添加到购物列表中。

创建应用程序

在这个简单的购物车中，我们显示一个咖啡品牌的列表（类似于HTML的select）。使用数据绑定功能在下面显示当前选择的品牌的说明，还有一个添加到购物车的按钮，当按钮被按下后，该品牌的咖啡便会被添加到购物列表中。

图1.教程创建的Flex应用程序

这个教程的目的是为了学习使用：

Application(应用程序)类
Panel(面板)容器
Script(脚本)元素
Array(数组)元素
Object(对象)元素
Label(标签)元素
Text(文本框)元素
Button(按钮)控件
ComboBox(下拉列表)控件
List(列表)控件
一个ActionScript函数

创建Application（应用程序）对象

任何一个Flex程序都是以XML声明开始和Application标记的。Application标签包含一个MX类库命名空间的声明：xmlns:mx="http://www.macromedia.com/2003/mxml"。引用该类库的所有标签必须以mx作为前缀。

1.创建一个新文件，然后保存为firstapp.mxml，位于flex_tutorials目录下
2.在文件的开始处，插入XML声明：

3.在XML声明后，添加带命名空间的Application标签：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

应用程序布局：添加一个面板

通常你可以将Flex应用程序中可见的组件放置于容器中，容器提供了绑定文本、控件、图像和其他媒体类型的元素。在这里，你可以使用称为“面板”(Panel)的容器，它可以提供大部分应用程序需要的全部外壳。你还可以使用面板的title(标题)属性，修改面板上方自动包含着的标题榄的文字。

4.在Application标签内部，添加一个Panel标签，title属性为"myFirstFlexApp"

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

◆添加一个显示标题的Label元素

Label元素可以用来显示单行文本。它有一些属性，这里用到的是text（文本）属性，定义Label显示的内容。

5.在Panel标签内，插入一个带有文本属性的Label标签，如下：

6.保存文件，预览一下程序

◆添加一个定义咖啡品牌的数组对象

本程序的数据模型是一个简单的数组（内容是一系列的对象），你可以直接在程序中用Array和Object元素创建。这里每个数组单元对象都有两个属性：label和data，你可以将这两个属性写成对象的子标签。用这两个属性名称是为了提供给ComboBox和List这样的控件元素使用，稍后我们会介绍。

这些控件元素可以使用更加复杂的数据对象，但是既然现在是手工创建数据模型，我们就使用简单的形式。通常的语法是：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. anotherliteralstring 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.

留意这里的ID属性。ID几乎是所有Flex元素都具备的属性，它将元素“贴”上标志以区分其他元素。如果你要在数据绑定或ActionScript中使用这个元素，***给它指定一个ID。

不可见元素可以由你随意摆放，但是把他们放到程序的首部--即可见元素的前面--是一个好习惯。

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. Smoothandfragrant 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. Richandpungent 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12. Delicateandrefined 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.  
    16.

 ◆Flex应用之添加一个显示咖啡品牌的ComboBox

Flex的ComboBox类似于HTML的select功能，而且更加强大。需显示的数组由dataProvider属性指定。你可以在dataProvider标签中直接创建数组，但是更为常用的方法是在别处创建或导入一个数组，然后在dataProvider处指定：

 
 
 
 
      
  
  
  
  1.  
    2.

这里的大括号告诉编译器：里面是一个变量或者代求算的变量，而不是字符串。

如果对象包含label和data属性，他们会自动按显示数据（label）和关联数据（data）区分，data可以是简单的值，也可以是复杂的类型（如对象）。如果对象既没有label属性也没有data属性，那么整个对象将作为data属性，而label属性则为由ComboBox的labelField属性指定的对象属性。例如ComboBox的labelField值为"name"，那么label的值就为对象的name属性。

8.在Label之后添加一个ComboBox，id取为coffeeComb，使用dataProvider属性将CombBox绑定到上一步创建的coffeeArray数组：

 
 
 
 
      
  
  
  
  1.  
    2.

◆Flex应用之添加一个显示说明的Text(文本)控件

Text控件与Label相似，不同的是它可以显示多行数据。这里我们用它来显示ComboBox中选中的咖啡品牌的说明。这里要用到ComboBox中选择的项目的data属性。

9.在ComboBox之后，添加一个带有text属性的文本控件，将text属性设置为“Description:”然后加上一个到ComboBox选择项目的data属性的绑定：

 
 
 
 
      
  
  
  
  1.  
    2.

◆添加一个增加咖啡品牌到购物栏的按钮

Button控件很简单。它有一个label的属性来设置显示的文字，还有一个click事件，用来指定鼠标点击事件的处理动作。

在这里，我们添加一个按钮，通过调用一个addToCart函数，把ComboBox中选择的项目添加到购物栏中。我们将在后面创建这个函数。

10.添加一个显示“AddtoCart”的按钮，被点击后调用addToCart函数：


给购物车添加一个List（列表）控件

List控件和ComboBox唯一的区别是它能同时显示和选择多条项目。这里用的List不需要指定dataProvider属性了，因为它在用户添加数据前是空的。

11.在按钮之后，添加一个List控件，id取为cart:

◆Flex应用之添加一段处理按钮点击事件的脚本

教程的***一步是添加一段ActionScript脚本，用来处理按钮的点击事件。在这个简单的应用程序中，我们在Script标签中添加脚本。

Script标签中的ActionScript代码将被包含在里面，这个标志里面的内容不被XML解析器解析。这个是标准的XML用法，在这里是为了保护ActionScript的一些可能会被XML解析器误处理的一些字符（如<等），实际上这样不仅保护了这些字符，也省去了XML解析器解析ActionScript内容。

这里用到的ActionScript语法很简单，函数的通常语法是：

function函数名(参数1:数据类型...):返回数据类型
{
[ActionScript语句]
}
在addToCart函数中，使用List类的addItem方法添加项目。该方法需要有label参数和data参数，这些参数正好是ComboBox中选中的项目的label属性和data属性。

12.在Array标签之后，插入一个带有CDATA包装的Script标签：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.

13.在CDATA里面，添加一个名为addToCart不返回任何值的函数：

 
 
 
 
      
  
  
  
  1. functionaddToCart():Void  
    2.   
  
  
  
  2. {  
    3.   
  
  
  
  3. }  
    4.   
  
  
  
  4.  
    5.

 14.在函数体内部，使用List类的addItem方法将ComboBox中所选项目label属性和data属性添加到List上。

cart.addItem(coffeeCombo.selectedItem.label,coffeeCombo.selectedItem.data);
15.保存文件，在浏览器中预览应用程序（查看浏览MXML文件的方法见***页）

firstapp.mxml完整的代码：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. Smoothandfragrant 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. Richandpungent 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. Delicateandrefined 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17.  
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19.   
  
  
  
  20. functionaddToCart():Void  
    21.   
  
  
  
  21. {  
    22.   
  
  
  
  22. cart.addItem(coffeeCombo.selectedItem.label,coffeeCombo.selectedItem.data);  
    23.   
  
  
  
  23. }  
    24.   
  
  
  
  24. ]]> 
    25.   
  
  
  
  25.  
    26.   
  
  
  
  26.  
    27.   
  
  
  
  27.  
    28.   
  
  
  
  28.  
    29.   
  
  
  
  29.  
    30.   
  
  
  
  30.  
    31.   
  
  
  
  31.  
    32.   
  
  
  
  32.  
    33.   
  
  
  
  33.  
    34.   
  
  
  
  34.  
    35.   
  
  
  
  35.  
    36.

进一步学习

在这个简单的例子中，我们学习了Flex的一些核心元素：容器、控件、数据模型、数据绑定和事件处理。

【编辑推荐】

  1. 解析***个Flex应用——HelloFlex!
  2. 构建Flex应用时常见几大误区解析
  3. 解析Flex应用开发步骤和技术框架
  4. 解析Flex全屏模式设置方法
  5. Flex内存泄露解决方法和内存释放优化原则

新闻标题：实例解析Flex应用
分享链接：http://www.shufengxianlan.com/qtweb/news13/418363.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站制作知识

分类信息网站

内江智速网站建设　　 　成都网站托管　　 　成都展柜设计公司　　 　广汉网站建设　　 　成都添翼二手车　　 　专业网站设计　　 　成都企业网站改版　　 　南充护栏钻孔机　　 　丹棱网站建设　　 　重庆服务器托管　　 　网站方案　　 　界面设计　　 　成都网站建设　　 　子晨包装　　 　腾讯免备案空间　　 　品牌网站定制　　 　软文推广　　 　成都网络营销　　 　艾瑞格衣柜　　 　成都企业网站建设