Macromedia Flex 教程: Flex入门 Q?Q?/P>
创徏W一个Flex应用E序
作者:Robert Crooks (Macromedia培训组)
译QMoonFun.qhwa
轉載請註明來自藍色理?/P>
在本教程中,你可以阅dFlex的简单介l,q可以利用MXML创徏一个简单的分类购物车,从而学习到Macromedia Flex应用E序的基本构成。你会学到Q创Z个应用程序、添加一个布局的容器、添加控件、创Z控g兌的简单数据模型,以及利用ActionScript对事件进行处理?/P>
本文是Robert Crooks~写的四步Flex入门pd的第一部分QRobert Crooks现就职于Macromedia客户培训部门
Flex 入门 Q?Q:创徏一个Flex计算?BR>Flex 入门 Q?Q:使用容器
Flex 入门 Q?Q:使用数据模型
点击q里下蝲整个pd教程Q?Flex入门pd(144KB)
如果你需要更加详l的信息Q?A target=_blank>Macromedia客户培训组提供了ؓ期两天的在线培训评Q《利用Flex开发丰富的互联|应用程序》,教你快速学习Flex应用E序开发?让我们开始吧Q?/P>
如果你是一个XML新手Q请C下面的基本规?/P>
如同所有的XML语言一P在MXML中,标签和属性都是区分大写的;
所有的属性值必ȝ双引?")或单引号(包含
所有的标签必须是闭合的。没有子标签的标{֏以以斜杠直接l束Q而无需额外的结束标{:
<mx:Label text="Hello"></mx:Label>
?/SPAN>
<mx:Label text="Hello"/>
如果你是一?/SPAN>ActionScript新手Q你可以发现它的语法和你熟悉的语a的语法很相近Q比?/SPAN>JavaScript或?/SPAN>Java。请Cq些基本的规则:
ActionScript是区分大写?BR>语句必须以分?/SPAN>(;)l尾
本教E包含的内容Q?/STRONG>
1. Flex单介l?BR>2. 如何使用Application (应用E序)标签
3. 如何使用Panel (面板)容器
4. 如何使用Label (标签)控g
5. 如何使用Text (文本)控g
6. 如何使用Button (按钮)控g
7. 如何使用ComboBox (下拉列表)控g
8. 如何创徏一个数l对?BR>9. 如何l定数据到控件对?BR>10. 如何?/SPAN>ActionScript处理用户事g
准备条gQ?/SPAN>
完成本教E必d备的软g和文Ӟ
Macriomedia Flex
Q可以在Flex支持的^台和服务器上安装q行Q试用版?/SPAN>Flex只有光盘供应Q请?/SPAN>Macromedia销售处购买Q售?/SPAN>$8.99. 试用版的相关信息Q请讉K: Flex常见问题
试用
购买
Dreamweaver MX 2004 或其他文本编辑器Q例如记事本Q,用来~辑XML?/SPAN>ActionScript代码
试用
购买
准备知识Q?/STRONG>
阅读Flex?BR>会浏览一?/SPAN>Flex应用E序
Flex ?/STRONG>
Macromedia Flex 是一个用来创Z富信息的互联|应用程序的服务器组件。Flex内置的界面可以由Macromeida Flash播放器显C在客户端系l上。Flex的本质是Q?/P>
- 一个描q应用程序界面的XML语言 (MXML)
- 一个ECMA规范的脚本语a(ActionScript)Q处理用户和pȝ的事Ӟ构徏复杂的数据模?
- 一个类?
- q行时的x服务
- 一个由MXML文g生成SWF文g的编译器
MXML
MXML是一U描qFlex應用E序構造的XML1.0语言。每个MXML文g应该以一个XML声明开始:<?xml version="1.0"?>
和其他XML语言一PMXML包含元素Q标{)和属性,对大写敏感。标{UC大写字母开_大小写合,必须有对应的l束标签Q?BR><ComboBox></ComboBox>
也可以这L束对没有内容的标{:
<ComboBox/>
属性以写字母开_大小写合。属性必d含在引号内?BR><ComboBox id="myCombo"/>
除了click或initialize之类的事件之外,所有的属性都被编译器作ؓ文本字符串处理。如果需要绑定数据或者强q编译器执行表达式,可以变量的部分用花括号包v来:
<ComboBox dataProvider="{myArray}"/>
大部分的属性都可以作ؓ子标{:
<ComboBox dataProvider="{myArray}"/>
{效于:
<ComboBox> <dataProvider>{myArray}</dataProvider> </ComboBox>
描述应用E序的MXML文g必须有一个位于其他元素之外的Application元素Q?BR><?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
[other elements...]
</mx:Application>
注意xmlns属性,它声明了XML的命名空间。命名空间可以让你在单个文档中用多重XML语言而避免淆不同语a中相同的元素名称。这里的":mx"是一个在特定命名I间中用的前缀?/P>
注意Q这里定义的命名I间是标准的MXMLcdQ请它包含在每个MXML文g中?/P>
可以声明放在Q何MXML标签中;声明对该标签嵌套的所有标{有效。本pd教程中都以mx作ؓMXMLcd的前~?/P>
如需更多信息Q?A class="" target=_blank>请参?Flex语言参?/A>
ActionScript
ActionScript是一U类似JavaScript和其他ECMA规范的面向对象的脚本语言。如果你使用qJavaScript或Java/C#{其他面向对象的语言Q你可以发现它们的语法很怼。你可以在MXML文g中嵌入ActionScript代码Q也可以从独立的外部文g导入代码?/P>
完整的ActionScript参考: Action 语言参?/A>
MXMLcd
Flex既包含控制和容器{可见的lgQ也包括了远E服务对象和数据模型{的不可见组件。你可以在后面的介绍中得到详l的信息?/P>
q行时服?/STRONG>
Flex提供了多运行时服务Q如Q历史控制和q程服务q接对象。以开发的角度看,q些服务都是对类库的调用?/P>
~译?/STRONG>
Flex~译器会在收C个浏览器讉KMXML文g的请求后Q自动编译生成相应的SWF文g。该SWF文g被~存Q直C修改了源MXML文g?BR>
创徏应用E序
在这个简单的购物车中Q我们显CZ个咖啡品牌的列表Q类gHTML的selectQ。用数据绑定功能在下面昄当前选择的品牌的说明Q还有一个添加到购物车的按钮Q当按钮被按下后Q该品牌的咖啡便会被d到购物列表中?/P>

?. 教程创徏的Flex应用E序
q个教程的目的是Z学习使用Q?/P>
Application (应用E序)c?BR>Panel (面板)容器
Script (脚本)元素
Array (数组)元素
Object (对象)元素
Label (标签)元素
Text (文本?元素
Button (按钮)控g
ComboBox (下拉列表)控g
List (列表)控g
一个ActionScript函数
创徏ApplicationQ应用程序)对象
M一个FlexE序都是以XML声明开始和Application标记的。Application标签包含一个MXcd命名I间的声明:xmlns:mx="http://www.macromedia.com/2003/mxml" 。引用该cd的所有标{ֿMmx作ؓ前缀?/P>
1. 创徏一个新文g Q然后保存ؓ firstapp.mxmlQ位于flex_tutorials目录?BR>2. 在文件的开始处Q插入XML声明Q?BR><?xml version="1.0"?>
3. 在XML声明后,d带命名空间的Application标签Q?BR><mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
</mx:Application>
应用E序布局Q添加一个面?/STRONG>
通常你可以将Flex应用E序中可见的lg攄于容器中Q容器提供了l定文本、控件、图像和其他媒体cd的元素。在q里Q你可以使用UCؓ“面李?Panel)的容器,它可以提供大部分应用E序需要的全部外壳。你q可以用面板的title(标题)属性,修改面板上方自动包含着的标题榄的文字?/P>
4. 在Application标签内部Q添加一个Panel标签Qtitle属性ؓ"my First Flex App"
<mx:Panel title="My First Flex App">
</mx:Panel>
d一个显C标题的Label元素
Label元素可以用来昄单行文本。它有一些属性,q里用到的是textQ文本)属性,定义Label昄的内宏V?/P>
5. 在Panel标签内,插入一个带有文本属性的Label标签Q如下:<mx:Label text="Coffee Blends"/>
6. 保存文gQ预览一下程?/P>
d一个定义咖啡品牌的数组对象
本程序的数据模型是一个简单的数组Q内Ҏ一pd的对象)Q你可以直接在程序中用Array和Object元素创徏。这里每个数l单元对象都有两个属性:label和dataQ你可以这两个属性写成对象的子标{。用q两个属性名U是Z提供lComboBox和Listq样的控件元素用,E后我们会介l?/P>
q些控g元素可以使用更加复杂的数据对象,但是既然现在是手工创建数据模型,我们׃用简单的形式。通常的语法是Q?/P>
<mx:Array id="identifier">
<mx:Object>
<label>literal string</label>
<data>another literal string</data>
</mx:Object>
</mx:Array>
留意q里的ID属性。ID几乎是所有Flex元素都具备的属性,它将元素“脓”上标志以区分其他元素。如果你要在数据l定或ActionScript中用这个元素,最好给它指定一个ID?/P>
不可见元素可以由你随意摆放,但是把他们放到程序的首部--卛_见元素的前面--是一个好习惯?/P>
<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>
d一个显C咖啡品牌的ComboBox
Flex的ComboBoxcM于HTML的select功能Q而且更加强大。需昄的数l由dataProvider属性指定。你可以在dataProvider标签中直接创建数l,但是更ؓ常用的方法是在别处创建或导入一个数l,然后在dataProvider处指定:
<mx:ComboBox id="myCombo" dataProvider="{myArray}"/>
q里的大括号告诉~译器:里面是一个变量或者代求算的变量,而不是字W串?/P>
如果对象包含label和data属性,他们会自动按昄数据QlabelQ和兌数据QdataQ区分,data可以是简单的|也可以是复杂的类型(如对象)。如果对象既没有label属性也没有data属性,那么整个对象作为data属性,而label属性则为由ComboBox的labelField属性指定的对象属性。例如ComboBox的labelFieldgؓ"name"Q那么label的值就为对象的name属性?/P>
8. 在Label之后d一个ComboBoxQid取ؓcoffeeCombQ用dataProvider属性将CombBoxl定C一步创建的coffeeArray数组Q?/P>
<mx:ComboBox id="coffeeCombo" dataProvider="{coffeeArray}"/>
d一个显C明的Text(文本)控g
Text控g与Label怼Q不同的是它可以昄多行数据。这里我们用它来昄ComboBox中选中的咖啡品牌的说明。这里要用到ComboBox中选择的项目的data属性?/P>
9. 在ComboBox之后Q添加一个带有text属性的文本控gQ将text属性设|ؓ“Description:”然后加上一个到ComboBox选择目的data属性的l定Q?/P>
<mx:Text text="Description: {coffeeCombo.selectedItem.data}"/>
d一个增加咖啡品牌到购物栏的按钮
Button控g很简单。它有一个label的属性来讄昄的文字,q有一个click事gQ用来指定鼠标点M件的处理动作?/P>
在这里,我们d一个按钮,通过调用一个addToCart函数Q把ComboBox中选择的项目添加到购物栏中。我们将在后面创个函数?/P>
10. d一个显C“Add to Cart”的按钮Q被点击后调用addToCart函数Q?/P>
<mx:Button label="Add to Cart" click="addToCart()"/>
l购物Rd一个ListQ列表)控g
List控g和ComboBox唯一的区别是它能同时昄和选择多条目。这里用的List不需要指定dataProvider属性了Q因为它在用h加数据前是空的?/P>
11. 在按钮之后,d一个List控gQid取ؓcart:
<mx:List id="cart"/>
d一D处理按钮点M件的脚本
教程的最后一步是d一DActionScript脚本Q用来处理按钮的点击事g。在q个单的应用E序中,我们在Script标签中添加脚本?/P>
Script标签中的ActionScript代码被包含?<![CDATA[ ]]> 里面Q这个标志里面的内容不被XML解析器解析。这个是标准的XML用法Q在q里是ؓ了保护ActionScript的一些可能会被XML解析器误处理的一些字W(?lt;{)Q实际上q样不仅保护了这些字W,也省MXML解析器解析ActionScript内容?/P>
q里用到的ActionScript语法很简单,函数的通常语法是:
function 函数?参数1:数据cd...):q回数据cd
{
[ActionScript 语句]
}
在addToCart函数中,使用ListcȝaddItemҎd目。该Ҏ需要有label参数和data参数Q这些参数正好是ComboBox中选中的项目的label属性和data属性?/P>
12. 在Array标签之后Q插入一个带有CDATA包装的Script标签Q?/P>
<mx:Script>
<![CDATA[]]>
</mx:Script>
13. 在CDATA里面Q添加一个名为addToCart不返回Q何值的函数Q?/P>
function addToCart():Void
{
}
14. 在函C内部Q用ListcȝaddItemҎComboBox中所选项目label属性和data属性添加到List上?/P>
cart.addItem(coffeeCombo.selectedItem.label,coffeeCombo.selectedItem.data);
15. 保存文gQ在览器中预览应用E序 Q查看浏览MXML文g的方法见W一)
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>
q一步学?/STRONG>
在这个简单的例子中,我们学习了Flex的一些核心元素:容器、控件、数据模型、数据绑定和事g处理。你可以l箋看本pd教程Q?/P>
Flex 入门 Q?Q:创徏一个Flex计算?/A>
Flex 入门 Q?Q:使用容器
Flex 入门 Q?Q:使用数据模型
你也可以下載整个教程Q?A class="" target=_blank>Flex入门(1-4)?BR>

]]>