淺談基于Flex技術的RIA設計

摘要:RIA(Rich Internet Applications，富互聯網應用)技術結合了桌面應用和互聯網應用的優點，它能夠指導我們開發出更豐富、互動、友好的用戶界面，而Flex(最新版名為Flash Builder)即是優秀的RIA開發技術之一。文中結合Flex的特點基于ActionScript腳本語言和MXML標簽語言，對Flex RIA的軟件框架、設計模式以及數據交互等進行探討。

關鍵詞:RIA;Flex;MXLM;Pure;MVC;數據交互

中圖分類號:TP311 文獻標識碼:A 文章編號:1009-3044(2010)01-124-02

Design of Flex-based RIA Technologies

SONG Zhao-hui1，2， LIU Xiao-fei2

(1.Ocean University of China， Qingdao 255213， China; 2.Shandong Wanjie Medical College， Zibo 266100， China)

Abstract: The RIA technology unified the tabletop application and the Internet application merit， it can instruct us to develop， the interaction， the friendly user interface richly， but Flex (most new edition named Flash Builder) is one of outstanding RIA development technologies. This article unifies Flex the characteristic based on the ActionScript script language and the MXML label language， to the Flex RIA software construction， the design pattern as well as the data hands over the equivalence to carry on the discussion.

Key words: RIA; Flex; MXLM; Pure; MVC; data interactive

基于B/S架構的瘦客戶端的出現，解決了C/S架構下客戶端程序發布與維護的困難和繁瑣問題。但由于HTTP協議的無狀態特性，傳統的WEB頁面已經漸漸不能滿足網絡瀏覽者的更高的、全方位的體驗要求了。用戶面臨著部署問題、升級困難、維護困難、安全性等一系列問題，而豐富互聯網應用程序(RIA)的出現則解決了這一問題。Rich Client是在B/S的框架基礎上，更多的加入C/S中的Client技術，讓B/S的應用客戶端有本地桌面應用系統的體驗。

1 RIA初探

1.1 了解RIA

RIA(Rich Internet Applications或Rich Interactive Applications)，從字面上可譯為“富互聯網應用程序”或“富交互式應用程序”。事實上RIA并不是一種專項的技術，也不是一門開發語言，它是互聯網應用和軟件開發的一種發展趨勢。RIA本身只是一個概念，它的中心是“良好的體驗”。Adobe官方的解釋為:“富互聯網應用程序(RIA)提供豐富的、引人入勝的體驗，該體驗可提高用戶滿意度并提高用戶的生產效率。使用互聯網的廣泛觸及力，可以在各種瀏覽器、桌面和設備上部署RIA”。

1.2 RIA與AIR

RIA和AIR不了解的人乍看很容易將兩者會混淆，其實是完全不同的兩個概念 ，但它們的關系非常密切。AIR是Adobe公司在RIA應用領域的一個重要的解決方案。AIR是一個運行時，它與RIA的關系我們可以聯想到.NET的Framework，AIR為RIA應用提供了一個基礎的支持平臺。AIR是一種概念，也可以這樣通俗的理解:AIR是在本地機加載并運行的RIA。

通過圖1可以看出AIR可作為WEB和桌面應用的橋梁，它結合了兩者各自的優勢，從而能夠制作出更具表現力和更好體驗的桌面程序。

2 RIA應用利器Flex

2.1 初識Flex

Flex是Adobe公司為支持RIA而開發和部署的一系列發展中的技術和產品線的概括，其中包括Flex SDk、Flex Builder、LiveCycle Data Services等。Flex就是使用ActionScript腳本語言和MXML標簽語言制作SWF類型的應用。

2.2 Flash與Flex

Flash與Flex同為Adobe公司的產品，都是制作SWF應用的，但Flash的歷史要比Flex長。Flash最初只是作為對應WEB頁面的GIF動畫，隨著ActionScript的引入，Flash擁有了GIF所望塵的交互性。隨著AS3.0和FlashCS3的到來，使用Flash制作復雜的應用成為可能。在Flash是做動畫的概念深入人心的時候，Macromedia(現屬Adobe公司)欲將程序開發人員拉入陣營，但Flash從一開始就像是為設計者準備的，為了面向程序開發者來進行SWF開發Flex變應運而生了。可以這樣理解:Flash是面向設計人員的開發工具，它比Flex能創作出更加個性化的UI、動畫及過渡效果;Flex是面向開發人員的工具，它比Flash擁有更豐富的組件和更加完善的編碼支持。

正因為Flash和Flex之間這種千絲萬縷的關系，新版的Flex Builder更名為Flash Builder。這種定義更容易讓人理解。

3 Flex的語言

Flex主要采用MXML + ActionScript來編寫程序、界面，然后通過編譯器編譯成Flash Player能夠執行的 SWF文件并發布使用。

3.1 MXML語言標簽

MXML語言是專門用于Flex程序中，描述界面表現的一種XML標記語言。MXML是Flex特有的，是區別于Flash的標志。我們可以通過它來描述程序的整體布局，控制組件的樣式和外觀，也可以構建非可視化的對象，比如XML數據、與服務器端通信的Web Service、組件的數據源等。MXML是XML的擴展，是Adobe的XML。

例1:

1)

2)

3)

4)

5)

以上就是MXML，其中的mx是Adobe默認的Flex框架的命名空間。第1行聲明了XML的編碼為utf-8，使程序支持大部分的語言編碼。第4、5行放置了兩個顯示控件，一個是按鈕Button，id指定為“bt1”，按鈕上顯示“我是按鈕”四個字;另一個是文本輸入框TextInput， id指定為”tx1”，該文本框的指定寬度為“100”。

在以上的代碼中像mx:Button、mx:TextInput即是MXML的語言標簽。眾多的語言標簽有機結合在一起就構成了一個完整的應用界面。

3.2 ActionScript語言

Flex=ActionScript+MXML。如果說MXML是描述界面的語言，那么ActionScript就是描述邏輯的語言。AS(ActionScript)作為Flash/Flex中的編程語言，經歷了1.0到3.0版本的轉變，從最初的腳本語言演變為面向對象的編程語言。

AS是由Flash Player中的AS虛擬機(AVM)來運行的， 通過AS，Flex/Flash中的內容和應用擁有了交互性和數據的處理及其他功能。

4 Pure MVC框架

框架可以提高軟件開發的質量，它的好處在于使得程序的結構更加清晰，降低各模塊之間的耦合，使軟件升級和維護的成本大大降低。Flex可選擇的框架很多，官方給出的是Cairngorm框架，但這種框架對于小項目的開發來說顯得不夠靈活，因此我們選擇PureMVC這一開源框架。

Pure MVC是MVC框架的一種，它把數據處理、程序輸入輸出控制以及數據表示分離開來，將一個應用分成三層:模型層(Model)、視圖層(view)、控制層(Controller)。

在Pure MVC中還有一個管理以上三個模塊的工具Facade，由于它并不是實際意義上的模塊因此沒有列出，但整個系統確是從Facade開始的。

由于Pure MVC的目標并不僅限于Flex，而是開放語言平臺的框架，不能采用帶語言特色的設計，因此在Pure MVC中，所有的處理都通過通知(Notification)來傳遞的。

5 Flex的后臺數據交互

Flex本身并不能訪問服務器端的數據庫，需要其他程序處理這些數據后以特定的類型，如數組型、XML型、Object型傳遞給Flex。

5.1 HTTPService

HTTPService可與所有的后端程序交互(例如，ASP、ASP.Net、JSP、PHP等)。Flex可以通過MXML使用HTTPService，也可以通過ActionScript使用HTTPService。由于MXML的主要功能專注于界面的布局和定義，因此建議使用ActionScript調用HTTPService。利用ActionScript實例化一個HTTPService，通過URL Variables對象將參數傳遞給HTTPService，并通過send()函數完成調用。

5.2 WebService

WebService是一套標準，是一種公開的API接口。使用WebService類可以訪問與SOAP兼容的各種Web服務。正是WebService所具有的這種通用性，不論用何種語言開發的WebService服務，調用的結果都是一致的。用戶可使用幾乎任何語言調用WebService服務。當客戶端獲得WSDL(WebService描述語言)后，就獲得了服務端提供的WebService的所有信息。

5.3 RemoteObject

RemoteObject可以在不同的應用程序之間進行通信，通過這一技術，Flex應用程序可以遠程調用服務器端的服務。Flash Player通過HTTP協議將客戶端的請求以AMF(Action Message Format)格式送到RemoteObject網關，RemoteObject網關接收到請求后將數據數列化后，調用服務器端相應的服務，再將結果反序列化為ActionScript對象，返回到Flex應用程序。

6 結束語

當前Internet應用的方向正向著RIA(Rich Internet Applications，富互聯網應用)發展，實現的技術也很多，但目前并沒有一個統一的標準。Flex作為出色的開發工具之一，在部署上有著跨平臺的先天優勢。ActionScript3.0是一種面向對象的編程語言，在開發過程中容易學習并掌握，而Flex提供了豐富且功能強大的組件使得開發過程更加規范高效。相信今后越來越多的優秀的RIA網站會帶給我們更豐富的、引人入勝的體驗。

參考文獻:

[1] 李慶，沈鈞.我的Flex我精通[M].北京:電子工業出版社，2009.

[2] 郭少瑞，張鑫.ADOBEAIR完整入門與開發[M].北京:清華大學出版社，2009.

[3] 王峰.基于Flex的Rich InternetApplications技術的研究和應用[D].上海:上海交通大學，2008.

[4] 葉建芳.應用FLEX技術構建RIA系統[D].杭州:浙江大學，2006.