闪无忧
 
首 页 业界新闻 业界杂谈 Flash教程 Flash源码 Flash图书 Flash酷站 Flex & AIR 供求信息
   本栏目通告:   请大家多多关注[Flex应用案例],更希望大家[推荐好的案例]给我们
当前位置 :首页>Flex-AIR>Flex资料>列表

Flex 入门教程

[来源:蓝色理想 | 作者:Robert Crooks | 时间:2008-03-24 | 点击:  | 收藏本文  【 】]
5uflash文章摘要:创建第一个Flex应用程序 作者:Robert Crooks ( Macromedia培训小组 ) 翻译:MoonFun.qhwa 轉載請註明來自藍色理想 在本教程中,你可以阅读到Flex的简单介绍,还可以利用MXML创建一个简单的分类购物车,从而学习到Macromedia Flex应用程序的基本构成。你将会学到:创建

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

<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上。

上一页 1 2 3 45 下一页
文章如果有错误或者缺少文件,请发邮件提交给我们
上一篇:Adobe Flex Builder 2.0 Beta 3 配置方法
下一篇:[蓝色月光]Flex2 学习笔记 Ⅰ
Tags:    教程 入门 一个 Flex 属性 可以 标签 添加 使用 元素
>>> 最新评论:(共有 0 位网友发表了评论)      查看所有评论
  发表评论
用户名: 新注册) 密码: 匿名评论
评论内容:(不能超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规。
·本站发布内容均为客观表达作者观点,不代表闪无忧立场,请勿攻击和漫骂
·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为
  Flex及AIR分类
  Flex资料   Flex动态
  Flex案例   Flex源码
  AIR资讯
  搜索本站资料
Google
  Flex相关
  寻找Flex工作机会
  发布Flex工作机会
  相关文章
·Flex 4 Spark DockBar 浮动工具
·Visual Studio中使用Adobe的Flex
·Flex 4实现分页
·利用flixel和Flash Builder 4创
·Flex辅助产品-扩展工具包 1.X
·Flex控制对主机网页中脚本的访问
·flex应用中如何关闭浏览器
·基于Flex的免费在线的家庭设计装
·Flash Builder 4添加数据可视化
·Flex 4设置Spart Button控件的强
  热门文章
·Flex 3 AdvancedDataGrid的使用(第二
·Flex中文官方帮助教程下载
·如何从零开始编写一个flex组件
·用Adobe Flex 2和Java创建富Internet
·FLEX地图应用教程之一
·Flex 3 发现之旅:AdvancedDataGrid的
·基于Flex的在线图片编辑器
·学习Flex几个值得研究的例程代码
·FlexUnit 的用法
·Flex 3 dvancedDataGrid的使用(第一部
·Flex 入门教程
关于我们 - 免责声明 - 网站地图 - 商务服务 - 联系我们 - RSS地图
©CopyRight 2006-2008, 5UFlash.COM, Inc. All Rights Reserved
鲁ICP备06034971号