自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

實(shí)例解析Flex應(yīng)用

作者：藍(lán)色
開(kāi)發(fā) 后端
你對(duì)Flex應(yīng)用的概念是否比較熟悉，本文通過(guò)實(shí)例向大家解析一下，在這個(gè)簡(jiǎn)單的購(gòu)物車(chē)中，我們顯示一個(gè)咖啡品牌的列表（類(lèi)似于HTML的select）。

 本文和大家重點(diǎn)討論一下Flex應(yīng)用，以購(gòu)物車(chē)為例向大家解析，使用數(shù)據(jù)綁定功能在下面顯示當(dāng)前選擇的品牌的說(shuō)明，還有一個(gè)添加到購(gòu)物車(chē)的按鈕，當(dāng)按鈕被按下后，該品牌的咖啡便會(huì)被添加到購(gòu)物列表中。

創(chuàng)建應(yīng)用程序

在這個(gè)簡(jiǎn)單的購(gòu)物車(chē)中，我們顯示一個(gè)咖啡品牌的列表（類(lèi)似于HTML的select）。使用數(shù)據(jù)綁定功能在下面顯示當(dāng)前選擇的品牌的說(shuō)明，還有一個(gè)添加到購(gòu)物車(chē)的按鈕，當(dāng)按鈕被按下后，該品牌的咖啡便會(huì)被添加到購(gòu)物列表中。

圖1.教程創(chuàng)建的Flex應(yīng)用程序

 

這個(gè)教程的目的是為了學(xué)習(xí)使用：

Application(應(yīng)用程序)類(lèi)
Panel(面板)容器
Script(腳本)元素
Array(數(shù)組)元素
Object(對(duì)象)元素
Label(標(biāo)簽)元素
Text(文本框)元素
Button(按鈕)控件
ComboBox(下拉列表)控件
List(列表)控件
一個(gè)ActionScript函數(shù)


創(chuàng)建Application（應(yīng)用程序）對(duì)象

任何一個(gè)Flex程序都是以XML聲明開(kāi)始和Application標(biāo)記的。Application標(biāo)簽包含一個(gè)MX類(lèi)庫(kù)命名空間的聲明：xmlns:mx="http://www.macromedia.com/2003/mxml"。引用該類(lèi)庫(kù)的所有標(biāo)簽必須以mx作為前綴。

1.創(chuàng)建一個(gè)新文件，然后保存為firstapp.mxml，位于flex_tutorials目錄下
2.在文件的開(kāi)始處，插入XML聲明：
<?xmlversion="1.0"?>
3.在XML聲明后，添加帶命名空間的Application標(biāo)簽：
 

  1. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.macromedia.com/2003/mxml"> 
  2. </mx:Application> 

應(yīng)用程序布局：添加一個(gè)面板

通常你可以將Flex應(yīng)用程序中可見(jiàn)的組件放置于容器中，容器提供了綁定文本、控件、圖像和其他媒體類(lèi)型的元素。在這里，你可以使用稱(chēng)為“面板”(Panel)的容器，它可以提供大部分應(yīng)用程序需要的全部外殼。你還可以使用面板的title(標(biāo)題)屬性，修改面板上方自動(dòng)包含著的標(biāo)題欖的文字。

4.在Application標(biāo)簽內(nèi)部，添加一個(gè)Panel標(biāo)簽，title屬性為"myFirstFlexApp"

  1. <mx:Paneltitlemx:Paneltitle="MyFirstFlexApp"> 
  2. </mx:Panel> 


◆添加一個(gè)顯示標(biāo)題的Label元素

Label元素可以用來(lái)顯示單行文本。它有一些屬性，這里用到的是text（文本）屬性，定義Label顯示的內(nèi)容。

5.在Panel標(biāo)簽內(nèi)，插入一個(gè)帶有文本屬性的Label標(biāo)簽，如下：<mx:Labeltext="CoffeeBlends"/>

6.保存文件，預(yù)覽一下程序

◆添加一個(gè)定義咖啡品牌的數(shù)組對(duì)象

本程序的數(shù)據(jù)模型是一個(gè)簡(jiǎn)單的數(shù)組（內(nèi)容是一系列的對(duì)象），你可以直接在程序中用Array和Object元素創(chuàng)建。這里每個(gè)數(shù)組單元對(duì)象都有兩個(gè)屬性：label和data，你可以將這兩個(gè)屬性寫(xiě)成對(duì)象的子標(biāo)簽。用這兩個(gè)屬性名稱(chēng)是為了提供給ComboBox和List這樣的控件元素使用，稍后我們會(huì)介紹。

這些控件元素可以使用更加復(fù)雜的數(shù)據(jù)對(duì)象，但是既然現(xiàn)在是手工創(chuàng)建數(shù)據(jù)模型，我們就使用簡(jiǎn)單的形式。通常的語(yǔ)法是：

  1. <mx:Arrayidmx:Arrayid="identifier"> 
  2. <mx:Object> 
  3. <label>literalstring</label> 
  4. <data>anotherliteralstring</data> 
  5. </mx:Object> 
  6. </mx:Array> 


留意這里的ID屬性。ID幾乎是所有Flex元素都具備的屬性，它將元素“貼”上標(biāo)志以區(qū)分其他元素。如果你要在數(shù)據(jù)綁定或ActionScript中使用這個(gè)元素，***給它指定一個(gè)ID。

不可見(jiàn)元素可以由你隨意擺放，但是把他們放到程序的首部--即可見(jiàn)元素的前面--是一個(gè)好習(xí)慣。

 

  1. <mx:Arrayidmx:Arrayid="coffeeArray"> 
  2. <mx:Object> 
  3. <label>RedSea</label> 
  4. <data>Smoothandfragrant</data> 
  5. </mx:Object> 
  6. <mx:Object> 
  7. <label>Andes</label> 
  8. <data>Richandpungent</data> 
  9. </mx:Object> 
  10. <mx:Object> 
  11. <label>BlueMountain</label> 
  12. <data>Delicateandrefined</data> 
  13. </mx:Object> 
  14. </mx:Array> 
  15.  

 ◆Flex應(yīng)用之添加一個(gè)顯示咖啡品牌的ComboBox

Flex的ComboBox類(lèi)似于HTML的select功能，而且更加強(qiáng)大。需顯示的數(shù)組由dataProvider屬性指定。你可以在dataProvider標(biāo)簽中直接創(chuàng)建數(shù)組，但是更為常用的方法是在別處創(chuàng)建或?qū)胍粋€(gè)數(shù)組，然后在dataProvider處指定：

  1. <mx:ComboBoxidmx:ComboBoxid="myCombo"dataProvider="{myArray}"/> 

這里的大括號(hào)告訴編譯器：里面是一個(gè)變量或者代求算的變量，而不是字符串。

如果對(duì)象包含label和data屬性，他們會(huì)自動(dòng)按顯示數(shù)據(jù)（label）和關(guān)聯(lián)數(shù)據(jù)（data）區(qū)分，data可以是簡(jiǎn)單的值，也可以是復(fù)雜的類(lèi)型（如對(duì)象）。如果對(duì)象既沒(méi)有l(wèi)abel屬性也沒(méi)有data屬性，那么整個(gè)對(duì)象將作為data屬性，而label屬性則為由ComboBox的labelField屬性指定的對(duì)象屬性。例如ComboBox的labelField值為"name"，那么label的值就為對(duì)象的name屬性。

8.在Label之后添加一個(gè)ComboBox，id取為coffeeComb，使用dataProvider屬性將CombBox綁定到上一步創(chuàng)建的coffeeArray數(shù)組：

  1. <mx:ComboBoxidmx:ComboBoxid="coffeeCombo"dataProvider="{coffeeArray}"/> 


◆Flex應(yīng)用之添加一個(gè)顯示說(shuō)明的Text(文本)控件

Text控件與Label相似，不同的是它可以顯示多行數(shù)據(jù)。這里我們用它來(lái)顯示ComboBox中選中的咖啡品牌的說(shuō)明。這里要用到ComboBox中選擇的項(xiàng)目的data屬性。

9.在ComboBox之后，添加一個(gè)帶有text屬性的文本控件，將text屬性設(shè)置為“Description:”然后加上一個(gè)到ComboBox選擇項(xiàng)目的data屬性的綁定：

 

  1. <mx:Texttextmx:Texttext="Description:{coffeeCombo.selectedItem.data}"/> 

◆添加一個(gè)增加咖啡品牌到購(gòu)物欄的按鈕

Button控件很簡(jiǎn)單。它有一個(gè)label的屬性來(lái)設(shè)置顯示的文字，還有一個(gè)click事件，用來(lái)指定鼠標(biāo)點(diǎn)擊事件的處理動(dòng)作。

在這里，我們添加一個(gè)按鈕，通過(guò)調(diào)用一個(gè)addToCart函數(shù)，把ComboBox中選擇的項(xiàng)目添加到購(gòu)物欄中。我們將在后面創(chuàng)建這個(gè)函數(shù)。

10.添加一個(gè)顯示“AddtoCart”的按鈕，被點(diǎn)擊后調(diào)用addToCart函數(shù)：

<mx:Buttonlabel="AddtoCart"click="addToCart()"/>
給購(gòu)物車(chē)添加一個(gè)List（列表）控件

List控件和ComboBox唯一的區(qū)別是它能同時(shí)顯示和選擇多條項(xiàng)目。這里用的List不需要指定dataProvider屬性了，因?yàn)樗谟脩?hù)添加數(shù)據(jù)前是空的。

11.在按鈕之后，添加一個(gè)List控件，id取為cart:

<mx:Listid="cart"/>

◆Flex應(yīng)用之添加一段處理按鈕點(diǎn)擊事件的腳本

教程的***一步是添加一段ActionScript腳本，用來(lái)處理按鈕的點(diǎn)擊事件。在這個(gè)簡(jiǎn)單的應(yīng)用程序中，我們?cè)赟cript標(biāo)簽中添加腳本。

Script標(biāo)簽中的ActionScript代碼將被包含在<![CDATA[]]>里面，這個(gè)標(biāo)志里面的內(nèi)容不被XML解析器解析。這個(gè)是標(biāo)準(zhǔn)的XML用法，在這里是為了保護(hù)ActionScript的一些可能會(huì)被XML解析器誤處理的一些字符（如<等），實(shí)際上這樣不僅保護(hù)了這些字符，也省去了XML解析器解析ActionScript內(nèi)容。

這里用到的ActionScript語(yǔ)法很簡(jiǎn)單，函數(shù)的通常語(yǔ)法是：

function函數(shù)名(參數(shù)1:數(shù)據(jù)類(lèi)型...):返回?cái)?shù)據(jù)類(lèi)型
{
[ActionScript語(yǔ)句]
}
在addToCart函數(shù)中，使用List類(lèi)的addItem方法添加項(xiàng)目。該方法需要有l(wèi)abel參數(shù)和data參數(shù)，這些參數(shù)正好是ComboBox中選中的項(xiàng)目的label屬性和data屬性。

12.在Array標(biāo)簽之后，插入一個(gè)帶有CDATA包裝的Script標(biāo)簽：

  1. <mx:Script> 
  2. <![CDATA[]]> 
  3. </mx:Script> 

13.在CDATA里面，添加一個(gè)名為addToCart不返回任何值的函數(shù)： 

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

 14.在函數(shù)體內(nèi)部，使用List類(lèi)的addItem方法將ComboBox中所選項(xiàng)目label屬性和data屬性添加到List上。

cart.addItem(coffeeCombo.selectedItem.label,coffeeCombo.selectedItem.data);
15.保存文件，在瀏覽器中預(yù)覽應(yīng)用程序（查看瀏覽MXML文件的方法見(jiàn)***頁(yè)）

firstapp.mxml完整的代碼： 

  1. <?xmlversionxmlversion="1.0"?> 
  2. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.macromedia.com/2003/mxml"> 
  3. <!--datamodel--> 
  4. <mx:Arrayidmx:Arrayid="coffeeArray"> 
  5. <mx:Object> 
  6. <label>RedSea</label> 
  7. <data>Smoothandfragrant</data> 
  8. </mx:Object> 
  9. <mx:Object> 
  10. <label>Andes</label> 
  11. <data>Richandpungent</data> 
  12. </mx:Object> 
  13. <mx:Object> 
  14. <label>BlueMountain</label> 
  15. <data>Delicateandrefined</data> 
  16. </mx:Object> 
  17. </mx:Array> 
  18. <mx:Script> 
  19. <![CDATA[  
  20. functionaddToCart():Void  
  21. {  
  22. cart.addItem(coffeeCombo.selectedItem.label,coffeeCombo.selectedItem.data);  
  23. }  
  24. ]]> 
  25. </mx:Script> 
  26. <!--view--> 
  27. <mx:Paneltitlemx:Paneltitle="MyFirstFlexApp"> 
  28. <mx:Labeltextmx:Labeltext="CoffeeBlends"/> 
  29. <mx:ComboBoxidmx:ComboBoxid="coffeeCombo"dataProvider="{coffeeArray}"/> 
  30. <mx:Texttextmx:Texttext="Description:{coffeeCombo.selectedItem.data}"/> 
  31. <mx:Buttonlabelmx:Buttonlabel="AddtoCart"click="addToCart()"/> 
  32. <mx:Listidmx:Listid="cart"/> 
  33. </mx:Panel> 
  34. </mx:Application> 
  35.  

 進(jìn)一步學(xué)習(xí)

在這個(gè)簡(jiǎn)單的例子中，我們學(xué)習(xí)了Flex的一些核心元素：容器、控件、數(shù)據(jù)模型、數(shù)據(jù)綁定和事件處理。
 

【編輯推薦】

  1. 解析***個(gè)Flex應(yīng)用——HelloFlex!
  2. 構(gòu)建Flex應(yīng)用時(shí)常見(jiàn)幾大誤區(qū)解析
  3. 解析Flex應(yīng)用開(kāi)發(fā)步驟和技術(shù)框架
  4. 解析Flex全屏模式設(shè)置方法
  5. Flex內(nèi)存泄露解決方法和內(nèi)存釋放優(yōu)化原則

 

 

責(zé)任編輯：佚名 來(lái)源： blueidea.com
Flex應(yīng)用
相關(guān)推薦

2010-07-29 10:40:12

2010-08-09 15:52:28

2010-08-04 15:12:54

Flex開(kāi)發(fā)

2010-07-30 14:32:50

Flex應(yīng)用

2010-07-27 10:58:46

Flex

2010-07-02 09:45:19

UML部署圖

2010-07-26 14:06:43

Perl substr

2010-07-30 14:43:55

Flex應(yīng)用

2010-07-30 14:58:06

Flex應(yīng)用

2010-08-12 15:44:25

Flex應(yīng)用程序

2010-07-02 09:06:29

UML用例建模

2010-08-13 13:18:20

Flex應(yīng)用程序

2010-08-06 09:18:14

Flex

2009-09-03 09:16:35

C#遞歸函數(shù)

2009-09-03 15:43:21

C#時(shí)間計(jì)算

2010-08-09 11:14:36

Flex事件處理

2010-08-12 09:11:09

Flex彈出窗口

2010-08-06 14:52:35

FlexCSS層疊樣式表

2010-08-04 14:34:35

Flex編程模型

2010-08-11 13:28:46

Flex行為
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)