Flex 應(yīng)用程序

在開始使用Flash Builder創(chuàng)建實(shí)際的 HelloWorld 應(yīng)用程序之前，讓我們看看Flex應(yīng)用程序的實(shí)際部分。 Flex應(yīng)用程序包括以下四個重要部分，其中最后一部分是可選的，但前三個部分是強(qiáng)制性的:

• Flex框架庫

• 客戶端代碼

• 公共資源(HTML / JS / CSS)

• 服務(wù)器端代碼

典型Flex應(yīng)用程序 HelloWord 的不同部分的示例位置如下所示:

應(yīng)用程序構(gòu)建過程

Flex應(yīng)用程序需要Flex框架庫。 Flash Builder自動將庫添加到構(gòu)建路徑。

當(dāng)我們使用Flash Builder構(gòu)建代碼時，F(xiàn)lash Builder將執(zhí)行以下任務(wù)

• 將源代碼編譯為HelloWorld.swf文件。

• 從存儲在html-template文件夾中的文件index.template.html編譯HelloWorld.html(用于swf文件的包裝文件)

• 復(fù)制目標(biāo)文件夾中的HelloWorld.swf和HelloWorld.html文件，bin-debug。

• 復(fù)制swfobject.js，一個javascript代碼負(fù)責(zé)在目標(biāo)文件夾中的HelloWorld.html中動態(tài)加載swf文件，bin-debug

• 以目標(biāo)文件夾中的名為frameworks_xxx.swf的swf文件的形式復(fù)制框架庫，bin-debug

• 在目標(biāo)文件夾中復(fù)制其他flex模塊(.swf文件，如sparkskins_xxx.swf，textLayout_xxx.swf)。

應(yīng)用程序啟動過程

• 在任何Web瀏覽器中打開\\ HelloWorld \\ bin-debug文件夾中的HelloWorld.html文件。

• HelloWorld.swf將自動加載，應(yīng)用程序?qū)㈤_始運(yùn)行。

Flex框架庫

以下是幾個重要框架庫的簡要細(xì)節(jié)。

在flex庫中使用.swc表示法表示

客戶端代碼

• 使用MXML標(biāo)記布置用戶界面組件

• 使用MXML聲明性地定義應(yīng)用程序的非可視化方面，例如訪問服務(wù)器上的數(shù)據(jù)源

• 使用MXML在服務(wù)器上的用戶界面組件和數(shù)據(jù)源之間創(chuàng)建數(shù)據(jù)綁定。

• 使用ActionScript在MXML事件屬性中定義事件偵聽器。

• 使用< mx:Script>添加腳本塊 標(biāo)簽。

• 包括外部ActionScript文件。

• 導(dǎo)入ActionScript類。

• 創(chuàng)建ActionScript組件。

公共資源

這些是Flex應(yīng)用程序引用的輔助文件，例如位于html-template文件夾下的Host HTML頁面，CSS或圖像。它包含以下文件

HelloWorld.mxml

這是實(shí)際寫入的MXML / AS(ActionScript)代碼，實(shí)現(xiàn)應(yīng)用程序的業(yè)務(wù)邏輯，并且Flex編譯器轉(zhuǎn)換為SWF文件，將由瀏覽器中的Flash播放器執(zhí)行。示例HelloWorld Entry類將如下所示:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx"
   width="100%" height="100%"
   minWidth="500" minHeight="500" 
   initialize="application_initializeHandler(event)">

   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void
         {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void
         {
            lblHeader.text = "My Hello World Application";				
         }
      ]]>
   </fx:Script>
   <s:VGroup horizontalAlign="center" width="100%" height="100%" 
   paddingTop="100" gap="50">
      <s:Label id="lblHeader" fontSize="40" color="0x777777"/>
      <s:Button label="Click Me!" id="btnClickMe" 
      click="btnClickMe_clickHandler(event)" />
   </s:VGroup>	
</s:Application>

下表給出了上述代碼腳本中使用的所有標(biāo)簽的描述。

服務(wù)器端代碼

這是應(yīng)用程序的服務(wù)器端部分，非常可選。 如果您不在應(yīng)用程序中執(zhí)行任何后端處理，則您不需要此部分，但如果后端需要一些處理，并且您的客戶端應(yīng)用程序與服務(wù)器交互，那么您將必須開發(fā)這些組件。

下一章將使用所有上述概念，使用Flash Builder創(chuàng)建Hello World應(yīng)用程序。