Flex 應用程序

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

• Flex框架庫

• 客戶端代碼

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

• 服務器端代碼

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

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

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

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

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

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

• 復制目標文件夾中的HelloWorld.swf和HelloWorld.html文件，bin-debug。

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

• 以目標文件夾中的名為frameworks_xxx.swf的swf文件的形式復制框架庫，bin-debug

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

應用程序啟動過程

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

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

Flex框架庫

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

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

客戶端代碼

• 使用MXML標記布置用戶界面組件

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

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

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

• 使用< mx:Script>添加腳本塊 標簽。

• 包括外部ActionScript文件。

• 導入ActionScript類。

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

公共資源

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

HelloWorld.mxml

這是實際寫入的MXML / AS(ActionScript)代碼，實現(xiàn)應用程序的業(yè)務邏輯，并且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>

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

服務器端代碼

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

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