flex基础(3)

原创 2007年10月04日 16:40:00

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

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

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

<mx:Array id="identifier">
  <mx:Object>
      <label>literal string</label>
      <data>another literal string</data>
  </mx:Object>
</mx:Array>

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

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

<mx:Array id="coffeeArray">
 <mx:Object>
  <label>Red Sea</label>
  <data>Smooth and fragrant</data>
 </mx:Object>
 <mx:Object>
  <label>Andes</label>
  <data>Rich and pungent</data>
 </mx:Object>
 <mx:Object>
 <label>Blue Mountain</label>
 <data>Delicate and refined</data>
 </mx:Object>
</mx:Array>


添加一个显示咖啡品牌的ComboBox

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

<mx:ComboBox id="myCombo" dataProvider="{myArray}"/>

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

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

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

<mx:ComboBox id="coffeeCombo" dataProvider="{coffeeArray}"/>

添加一个显示说明的Text(文本)控件

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

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

<mx:Text text="Description: {coffeeCombo.selectedItem.data}"/>


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

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

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

10. 添加一个显示“Add to Cart”的按钮,被点击后调用addToCart函数:

<mx:Button label="Add to Cart" click="addToCart()"/>

给购物车添加一个List(列表)控件

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

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

<mx:List id="cart"/>

添加一段处理按钮点击事件的脚本

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

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

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

function 函数名(参数1:数据类型...):返回数据类型
{
 [ActionScript 语句]
}

在addToCart函数中,使用List类的addItem方法添加项目。该方法需要有label参数和data参数,这些参数正好是ComboBox中选中的项目的label属性和data属性。

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

<mx:Script>
  <![CDATA[]]>
</mx:Script>

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

function addToCart():Void
{
}


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

cart.addItem(coffeeCombo.selectedItem.label,coffeeCombo.selectedItem.data);

15. 保存文件,在浏览器中预览应用程序 (查看浏览MXML文件的方法见第一页)

 

firstapp.mxml完整的代码:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" >
 <!-- data model -->
 <mx:Array id="coffeeArray">
  <mx:Object>
   <label>Red Sea</label>
   <data>Smooth and fragrant</data>
  </mx:Object>
  <mx:Object>
   <label>Andes</label>
   <data>Rich and pungent</data>
  </mx:Object>
  <mx:Object>
   <label>Blue Mountain</label>
   <data>Delicate and refined</data>
  </mx:Object>
 </mx:Array>
 <mx:Script>
  <![CDATA[
   function addToCart():Void
   {
    cart.addItem(coffeeCombo.selectedItem.label,coffeeCombo.selectedItem.data);
   }
  ]]>
 </mx:Script>
 <!-- view -->
 <mx:Panel title="My First Flex App">
  <mx:Label text="Coffee Blends"/>
  <mx:ComboBox id="coffeeCombo" dataProvider="{coffeeArray}"/>
  <mx:Text text="Description: {coffeeCombo.selectedItem.data}"/>
  <mx:Button label="Add to Cart" click="addToCart()"/>
  <mx:List id="cart"/>
 </mx:Panel>
</mx:Application>

Adobe Flex Builder 3 序列号

FlexBuilder3:1377-4168-2018-0771-2432-14951377-4760-3354-0772-2773-89961377-4165-2080-7265-7813-8901...
  • kunshan_shenbin
  • kunshan_shenbin
  • 2009年08月19日 16:44
  • 9062

FlexBuilder3安装集成eclipse

这里记录一下安装FB3_WWEJ_Plugin.exe(Flex的插件)的步骤,用来阐述eclipse中安装插件的两种方式(当然安装的方式不止两种):links方式和直接copy features与p...
  • orange2211
  • orange2211
  • 2016年03月23日 17:00
  • 1434

Flex Builder 3 正版注册码及破解版方法

 http://download.csdn.net/source/362621 [集成开发环境].Adobe.Flex.Builder.Professional.v3.0.194161.Incl.Ke...
  • softwave
  • softwave
  • 2008年07月22日 16:46
  • 13749

flex布局完全入门教程

提纲 CSS介绍 盒子模型 什么是flexbox flex-direction flex-wrap flex-flow justify-content align-items align-conten...
  • liyuechun520
  • liyuechun520
  • 2017年07月15日 16:50
  • 835

Flex之旅:第一部分:flex必备基础知识积累(9)---DateField, DateChooser显示汉字的星期和月份

  • miqi770
  • miqi770
  • 2015年02月24日 17:24
  • 751

Flex入门基础——项目item的属性(order、flex-grow、flex-shrink、flex-basis、flex、align-self)

1、order 取值:数值 功能:(1)容器中有多个项目,       (2)项目的默认摆放时沿主轴(纵向)方向,即按文档中dom元素的书写顺序进行排列的; 应用:order属性用于更改在主轴方向上排...
  • zxy9602
  • zxy9602
  • 2016年11月12日 12:39
  • 1511

flex弹性盒子布局基础

先抄一张图,表示了弹性盒子元素的组成,分为main轴和cross轴,start和end代表轴的两端。 弹性盒子的子元素的float、clear和vertical-align属性将失效。 ...
  • u011409514
  • u011409514
  • 2017年08月23日 14:52
  • 96

Flex基础控件示例

  • asuyunlong
  • asuyunlong
  • 2017年02月11日 15:35
  • 233

Flex编程学习基础

Flex是Adobe公司推出的一项RIA(Rich Internet Application富互联网应用程序)开发技术,和Ajax一样都是Web2.0非常流行的前台开发技术,Flex比Ajax的优势是...
  • chjttony
  • chjttony
  • 2010年11月08日 09:57
  • 4116

Flex开发工具Flex Builder 3 下载及注册码

Flex是通过java或者.net等非Flash途径,解释.mxml文件组织components,并生成相应得.swf文件。Flex的component和flash的component很相似,但是有所...
  • wlxtaking
  • wlxtaking
  • 2010年08月01日 01:31
  • 3221
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:flex基础(3)
举报原因:
原因补充:

(最多只允许输入30个字)