一，概述

?

Flex是Adobe公司的支持RIA(rich internet applications)開發和部署的平臺，它是一系列發展中的技術和產品線的概括詞,包括Flex Framework, Flex Builder 2, Flex Enterprise Services 2等。

?

FLEX試圖通過提供一個程序員們已經熟知的工作流和編程模型，讓程序員比從前更快更簡單地開發動畫及RIA應用。在多層式開發模型中，FLEX應用屬于表現層。FLEX的語言和文件結構也試圖把應用程序的邏輯從設計中分離出來。

?

二，Flex開發環境

?

1，Flex的客戶端: 須安裝Flash Player

?

Flash Player: 8.5版本開始加入AS3虛擬機，作為FLEX2應用的運行時(runtime)

?

2, Flex的web服務器端：

?

1). 純靜態web 服務器，僅返回一個簡單的靜態HTML頁面。此時的Flex 應用程序的SWF 文件嵌入到一個HTML 頁面中。

?

2). web應用服務器，如JRun、ColdFusion ? 或者PHP，它們可以動態地生成頁面。在這種情況下，你將使用到與服務器技術相關的庫，并動態地處理它們的內容。

?

3). J2EE應用服務器或servlet 容器。向一個J2EE 應用服務器或servlet 容器發出請求，如JRun、Tomcat 或WebSphere ? ，通常你需要使用Flex Data Services。

?

?

3，Flex產品系列: Flex產品線包括了進行設計、開發、發布整套RIA 所需的一系列產品。它們是：

?

1). Adobe Flex 2 SDK(Software Development Kit):是技術實現和程序編制的基礎集合，它使你可以使用Flex 系列產品來創建應用程序。Flex 2 SDK 包含了Flex Framework構架（類庫），Flex 編譯器，調試器，MXML 和ActionScript ? 編程語言，以及其它實用程序。Flex SDK 還包括了核心Flex 構架類庫的源代碼，使你可以學習這些類的代碼并擴展它們以備你自己的使用。

?

2). Adobe Flex Builder 2: Flex開發的官方IDE

?

3). Adobe Flex Data Services 2(FLEX服務器):通過使用Flex Data Services，大大地增強了Flex 2 SDK 的功能性。Flex Data Services新增了對企業通信的支持(提供一種發布/訂閱的通信架構)，以及對于Flex 2 SDK 的數據服務支持(使本地處理的數據和服務器端同步)。你可以在J2EE 應用服務器上或者servlet 容器里將Flex Data Services 發布為一個標準的web 應用程序。Flex Data Services 能夠簡化操作服務器上數據的編程模式。支持自動測試。支持創建靜態文件(使用解釋編譯方式并且不需要購買服務器許可證就可以在線部署)。它也是客戶端和XML Web Services及遠程對象(Coldfusion CFCs，或Java類，等支持Action Message Format的其他對象)之間通訊的通路。

?

4). Adobe Flex Charting 2: Flex Charting 圖表組件 2: 提供平滑的數據可視能力，可看作是Flex Framework的擴展。FLEX還有其它多種組件，可實現Web Services，遠程對象，drag and drop，列排序，圖表等功能；

?

?

三，RIA的發展和Flex的版本歷史

?

術語: RIA ? , Macromedia ,XUL ? ,[Thin client] ? 瘦客戶端,XAML ? ,MXML ?

?

IT業的系統架構重要轉變:基于主機模式→C/S模式→B/S模式→RIA模式。系統架構發展的下一步是RIA，它最大程度地提高了廣泛性和豐富性。RIA 是集桌面應用程序的最佳用戶界面功能與Web應用程序的普遍采用和快速、低成本布署以及互動多媒體通信的實時快捷于一體的新一代網絡應用程序。

?

1, 前Flex階段:Flex Server 1.0 and 1.5的目標市場是企業應用開發，價格約 US$15000 每CPU。每個許可證包含五個Flex Builder許可證。使用收費的Flex Framework技術。

?

A，Flex 1.0-2004年3月: FLEX最初是作為一個J2EE應用，或者可以說是JSP標簽庫而發布的。它可以把運行中的MXML (FLEX標記語言)和 ActionScript ? 編譯成FLASH應用程序(即二進制的SWF文件)。

?

B，Flex 1.5-2004年10月:Flex 1.5的重點在于表現層，由于SWF客戶端只需要載入一次，大大改善工作流。

?

C，Flex Builder 1.5 是基于Dreamweaver編碼環境的服務于Flex 1.5的編程環境，實現了設計/代碼視圖，高亮語法顯示，代碼縮進和應用預覽等功能。

?

2, 新Flex階段:Flex是第一個被Adobe冠上Adobe商標而重新命名的原Macromedia 產品。Flex2和AS3的巨大變動在使用者社區引起了巨大的爭議。

?

A，Flex 2.0 Alpha-2005年10月,

?

B，Flex 2.0 Beta 1/2/3 - 2006年2月/3月/5月,

?

C，Flex 2.0 FINAL - 2006年6月28日

?

D，Flex 2.01 - 2007年1月5日

?

Flex 2改變了許可模式，把原Flex Framework技術加入到免費的Adobe Flex 2 SDK，全新于1.5的 Flex Builder 2 基于Eclipse IDE是收費的，但Flex編譯器是免費的。

?

Flex 2并引入了新版本的語言ActionScript3 ? 的使用，這需要 Flash Player 9 以上版本作為運行時(runtime)。ActionScript ? 3是Flex Framework的核心。雖然語法和AS2類似，但它更加面向對象化和類型化。而且因為在新的虛擬機中運行，所以比AS2快得多。

?

當然，對于有特別需要的用戶來說，仍提供收費的企業級服務。Flex2.0中把RemoteObject ? 分離成為一個組件單獨來收費，稱為Flex Data Services 2(FDS,在Beta2之前舊稱Flex Enterprise Services 2)，是Flex 1.5 server的下一代，提供諸如data push和自動測試等高級功能。但同時提供免費的限制授權用于單一CPU主機的Flex Data Services Express。

?

3，Flex開源項目的發展: 如免費的AMFPHP，Yahoo AS2 Library, Google flex code....

?

1), OpenLaszlo ? :一般被認為可能是FLEX替代品的是 OpenLaszlo ? 和 Ajax 技術。還可以參考一下早已是標準的SVG ? 技術。

?

2), NeoSwiff :從C#到SWF的編譯器

?

3), MTASC :免費并開源的 AS 2 編譯工具

?

4)，ColdFusion ? : Macromedia 把一部份Flex 1.5的子集嵌入到了它的Coldfusion MX 7中間件平臺中以供在Flash forms中使用。雖然可以使用這個平臺來開發RIA，但是它原來的目的只是為了開發豐富的forms應用，所以這個功能并不為Macromedia 所支持。

?

5), Ajax , Aflax

?

6), 開源的Granite Data Services graniteds

?

7), 開源JAVA的Red5 : Open Source Flash Server

?

8), AMFPHP , Flash 直接連接MySQL的AS3驅動類

?

?

四，使用FLEX BUILDER 2進行應用開發步驟

?

Flex Builder教程

?

Flex Builder 2是在Eclipse基礎上創建的(可作為標準的獨立應用軟件，也可作為Eclipse的插件使用，可共享Eclipse工作平臺上豐富的開源資源)一個使用Flex SDK、Flex Data Services 和Flash Player 來開發應用程序的集成開發環境（IDE），是生成FLEX應用的最簡單最強大的方式。實現了集成編譯器，代碼縮進，調試，設計視圖，源代碼控制系統集成等許多功能。

?

1，創建一個新工程:

?

2，界面設計: 在一個文本編輯器或集成開發環境（IDE）中，如Adobe Flex Builder、Eclipse 或IntelliJ ? 中插入MXML 根標簽。組織安排一系統預定義組件(窗口，按鈕等)來定義一個開發界面。添加一個或更多容器。在容器中添加控件，如輸入欄、按鈕和輸出欄。可使用風格和主題來定義可見設計。

?

對于用戶界面的設計， Flex Builder 支持可視化的設計視圖，它可以使開發人員或者設計人員去布置Flex 組件，定制它們的外觀，以及如何與用戶進行互動。Flex Builder 設計視圖的界面如下所示：

?

?

3，邏輯編程:Flex Builder 提供了一套針對MXML、ActionScript ? 、層疊樣式表（CSS）的代碼編輯器，幫助你更加容易地管理代碼的源代碼操縱工具，以及幫助排除程序中故障的調試器。Flex Builder 進行程序編制的界面如下圖所示：

?

?

1). 定義一種數據模型，并在需要時連接上一個數據服務。

?

2). 添加一個web 服務器，HTTP 服務器，或向遠程Java 對象發送請求。

?

3)，增加動態動作，如應用程序之間的互動:為數據輸入添加驗證。為組件添加腳本。

?

4，編譯與發布: 可以使用 Adobe Flex Builder 2 把 Flex 應用程序編譯成SWF 文件。或者直接在命令行中調用編譯器。Flex 編譯器是處于 Flex 2 安裝文件夾下的 Flex SDK 2.0\bin 文件夾中的一個很小的可執行文件 mxmlc 。最好確保這個文件夾是系統路徑中。這樣可以直接用如下命令行單獨調用它。

    //編譯器選項--strict強制編譯器進入嚴格的 Strict 模式,--file-specs 指定被編譯的 MXML 文件
mxmlc --strict=true --file-specs MyFirst.mxml

  

?

Flex 平臺的發布模式共有三種：

?

1). 純客戶端運行模式和簡單的RPC(HTTPService和WebService ? )訪問服務器模式:如上可以將應用程序發布成一個編譯好的SWF文件。客戶端進行訪問的格式是： http://hostname/path/filename.swf

?

2). RemoteObjects ? 模式(Flex Data Services等模式)訪問服務器:可以將應用程序發布為一組MXML 和ActionScript ? 文件。客戶端進行訪問的格式是： http://hostname/path/filename.mxml

?

5，設置斷點，調試:你可以在代碼編輯器中查看和編輯出錯或被警告的代碼。同時，你還可以設置斷點、或單步執行來幫助你進行程序的調試。

?

?

五，Flex編程語言

?

Flex編程語言(編程模型)包括MXML、ActionScript ? 編程語言和 Flex 類庫，Flex應用程序會被實施為 ActionScript ? 類庫。 Flex通過將 MXML 和 ActionScript ? 語言與該類庫一起使用來開發應用程序。常用MXML來設置用戶界面，并用ActionScript ? 來編寫響應用戶交互的邏輯。

?

1，MXML 標簽與 ActionScript ? 類或類的屬性相對應。 當您編譯 Flex 應用程序時, Flex 會解析 MXML 標簽并生成相應的 ActionScript ? 類。 接著它將這些 ActionScript ? 類編譯成存儲在 SWF 文件中的 SWF 字節碼。

?

提示: 若要查看 Flex 生成的中間 ActionScript ? 文件, 請將 --keep-generated-actionscript 選項添加到 mxmlc 命令中。

?

?

2，AS 3 是完全面向對象編程語言。AS3全面兼容ECMAScrip標準( Java Script 2.0的基礎標準)。每個類都繼承父類的方法屬性等。如以下繼承關系:Alert->Panel->Container->UIComponent->FlexSprite ? ->Sprite->InteractiveObject ? ->DisplayObject ? ->EventDispatcher ? ->Object

?

3，Flex 類庫包括了Flex 組件類(可視組件,容器和控件)、管理器類、數據服務類(RPC即Remote Procedure Control,Messaging和Data Service類)，以及其他功能的類。在Flex Builder 2中，可以充分利用幫助功能查看類對象，可先在源碼中選定某類名，然后按F1即可。該類庫包含組件 (容器和控件)、管理器類、數據服務類和所有其他功能的類。

?

4，MXML 和ActionScript ? 的結合: 雖然MXML 和ActionScript ? 編程語言都提供了訪問Flex 類庫的能力。但通常的做法是：使用MXML 去定義用戶界面的組件布局(如果用AS來做也可，但代碼更長更復雜)，使用ActionScript ? 去定義客戶端的邏輯并進行控制。

?

1) 可以在MXML中使用Script 標簽來包含ActionScript ?

?

2) 還可將腳本塊分隔到外部 ActionScript ? 文件中

?

3) 使用外部ActionScript ? 類。

?

5，Flex 類庫調用方法:

?

1), 使用該組件的全名(全路徑):

    mx.controls.Alert.show("Do you want to save your changes?");

  

?

2)，導入一次，多次使用:

    import mx.controls.Alert;
Alert.show("Do you want to save your changes?");

  

?

六，MXML標記語言

?

MXML教程

?

MXML 是用于為Flex應用程序進行用戶界面組件布局的 XML 語言。 您還使用 MXML 來顯式定義應用程序的非可視方面, 例如訪問服務器端數據源和用戶界面組件與數據源之間的數據綁定。

?

七，ActionScript編程語言

?

Action Script教程

?

在基于組件的開發模型下，開發人員可以運用預先做好的組件。將ActionScript ? 添加到Flex 應用程序中。ActionScript ? 可以出色地完成如下任務：

?

1. 處理事件

?

2. 處理錯誤

?

3. 在MXML 語句中將數據對象綁定到Flex 控件上

?

4. 定制組件

?

八，Flex面向對象編程

?

Flex面向對象編程

?

為了增強系統的復用性和可維護性，采用具有良好體系架構的Model-View-Controller（MVC）開發模型。

?

1). 模型(Model) 組件封裝了數據和與數據相關的行為。

?

2). 視圖(View) 組件定義了應用程序的用戶界面和其他數據的顯示。Flex 創建一個應用程序時，你使用組件（容器containers 和控件controls）來描述用戶的操作界面。例如，容器可以是一個用來進行數據輸入的表格容器，如一個盒框Box 或一個柵格Grid；而控件就是該表格中的元素，如一個按鈕/Button ? 或文本輸入欄Text Input field。

?

3). 控制器(Controller) 組件則負責處理程序中的數據連接。

?

九，Flex的安全機制

?

出于安全方面的考慮，在客戶端的Flash Player 中運行的應用程序，只有在滿足如下條件之一的情況時才能訪問遠程的數據源

?

1). 應用程序所編譯的SWF 文件與遠程數據源位于同一個域中。

?

2). 使用代理（proxy），并且你的SWF文件位于和代理相同的服務器上。Adobe Flex Data Services 為Flex 應用程序提供了一個完整的代理管理系統。同時，你還可以通過使用一種web 腳本語言，如ColdFusion ? 、JSP、PHP 或者ASP 來創建一個簡單的代理服務。

?

3). 安裝crossdomain.xml （跨域策略/cross-domain policy）文件在數據源的宿主Web 服務器上。crossdomain.xml 文件允許位于其它域中的SWF 文件對數據源的訪問。

?

十，Flex程序性能的優化

?

Flex優化

?

十一，Flex與Flash

?

從Flash 到Flex:開發一個Flex 應用程序與開發一個Macromedia Flash Professional 8 程序有所不同，即使兩者都會最終被編譯成SWF 文件。Flash Professional 使用了一些概念，如時間軸/Timeline ? ，動畫幀/，圖層/layers 來組織和控制程序中的內容。而在Flex 中則拋棄了這些內容，轉而使用MXML 標簽來設計用戶界面組件和連接數據源。盡管Flash 和Flex 的開發模型各不相同，但是Flash 仍然是一個非常強大的工具，用來創建定制的組件和視覺方面的資源，然后以外部SWC 文件的形式導入到Flex 中。

?

十二，Flex社區的開源的組件庫項目

?

[www.51it.org/zz/flash/flash2/200702/76762.html Flash互動電子地圖制作手冊]

?

發個電子地圖的源代碼

?

基于創用CC的開源媒體庫

?

Flex SQL Admin開源 Flex SQL Admin 是一個用Flex做的針對 Microsoft SQL Server 的在線查詢分析器。提供了圖形操作界面，關鍵字高亮等功能

?

JAM

?

Flex cookbook

?

RIAForge

?

CFFLEX

?

Flex 2類庫資源 :該項目的目的是匯集Flex社區的努力為大家提供一個高質量的Flex UI組件庫。

?

flexBox Flex 2組件資源

?

Flex資源站

?

flex免費風格下載

?

飛揚定制的Flex專項搜索

?

中文Adobe Flex開發中心

?

Adobe Flex官方站點

?

IFBIN開源

?

Flash平臺,AS2的開放源碼 RIA 框架: Arp

?

參考

?

如何架設一個類似 YouTube 的小型視頻分享站點,Creating a video sharing web application using Flex 2 and Flash Media Server 2

?

Flex 學習站點匯總

?

ActionScript歷史簡單回顧

?

本文最新版出處

?

迎接RIA時代的來臨

?

RIA技術概覽

?

Flex2:使用BitmapData抓圖

?

Flex2基礎教程系列

?

Flex Quick Starts中文翻譯

?

新版 Flex Style Explorer 推出了

?

打造屬于自己的Apollo

?

用Flex2開發2D游戲（先試試2D性能）

?

http://www.klstudio.com/

?

http://coenraets.com/index.jsp

?

Flexcoders - Flex 技術郵件列表

?

ColdFusion Flex郵件列表 at House of Fusion.

?

CFlex - Flex開發者交流社區

?

Flex Authority - Adobe Flex 開發者站點

?

CFFLEX - Coldfusion/Flex 開發者站點

?

在Tomcat上設置Flex

?

Jesse Warden - Adobe Flex開發者Blog站點

?

Renaun Erickson - Adobe Flex開發者Blog站點 ??

?

本文轉自: http://sjweb.hhit.edu.cn/article/show.aspx?id=2568

Flex技術簡介