RIA技術(shù)入門之Macromedia Flex（一）
作者：Mr.一點(diǎn)點(diǎn)
1 說明
本文為Macromedia Flex的入門文檔，簡單介紹基于Flash平臺(tái)的RIA技術(shù)。要求讀者了解html、javascript、jsp等基本概念。
2 RIA是什么
2.1 簡介
RIA是Rich Internet Application的縮寫。Internet服務(wù)從最初簡單的信息發(fā)布，發(fā)展到到今天的Web應(yīng)用程序，到即將來臨的Rich Internet Application時(shí)代，互動(dòng)性、豐富性不斷在增強(qiáng)。RIA將會(huì)給許多領(lǐng)域（金融、游戲、門戶）帶來令人驚異的用戶體驗(yàn)及投資回報(bào)。
2.2 RIA意味著什么
" 不同凡響的Web功能
" 更好的用戶體驗(yàn)
" 更強(qiáng)大的用戶界面
" 更好的交互性
" 更先進(jìn)的開發(fā)模型
" 更強(qiáng)大的多媒體功能
" 更好的數(shù)據(jù)管理
" 更好的程序控制
2.3 RIA解決方案
" Macromedia 基于Flash的Flex
" Windows的Interactive方案
目前的RIA方案除了Macromedia Flex之外，還有微軟的Interactive方案。本文主要介紹Macromedia Flex方案。
2.4 Flex體驗(yàn)
2.4.1 基于瀏覽器的電子相冊(cè)
用戶可以實(shí)現(xiàn)更改頁面布局，旋轉(zhuǎn)、拖動(dòng)、更改圖片大小等等令人驚異的功能
2.4.2 基于瀏覽器的電子儀表盤
3 Macromedia Flex
3.1 Flex簡介
" 客戶端：極大增強(qiáng)了客戶端技術(shù)；客戶端只需要Flash Player，得到廣泛支持；
" 服務(wù)端：開放平臺(tái)，兼容目前主流幾乎所有的服務(wù)端技術(shù)。不管你現(xiàn)在使用的服務(wù)器是什么（JSP/.Net），都可以部署Flex應(yīng)用。
3.2 系統(tǒng)結(jié)構(gòu)
" 服務(wù)器端：
采用Flex Gateway ＋ 任意一種服務(wù)端技術(shù)（例如： J2EE/Servlet容器）；
Flex Gateway 將編寫好的源文件（ mxml /actionscript），編譯成flash的swf格式，輸出到客戶端；
" 客戶端：
只需要Flash平臺(tái)
4 部署Flex服務(wù)端
4.2 安裝Flex Gateway 4.3 建立自定義Flex服務(wù)器配置 MXML，基于XML，用于定義客戶端界面，互動(dòng)性極強(qiáng)的界面UI，強(qiáng)大的數(shù)據(jù)綁定，編寫簡單。 Actionscript，用于編寫客戶端腳本，面向?qū)ο?，?qiáng)類型化，基于ECMAScript標(biāo)準(zhǔn)。 這兩者，mxml相當(dāng)于傳統(tǒng)B/S開發(fā)模式中的html，專門用于表示層；而actionscript相當(dāng)于javascript，用于編寫腳本邏輯。 5.2 MXML與HTML </form> 5.2.2 Mxml與html對(duì)比 <mx:FormItem label="UserId" required="true"> <mx:FormItem label="Password" required="true"> </mx:Form> （注：此處代碼僅供參考，完整例子請(qǐng)見下文。） 5.3 Actionscript與Javascript class VerifyUser{ public var userId:String=""; function verify(){ 5.3.3 Actionscript優(yōu)勢 6 如何部署自己的Flex應(yīng)用 下面，我們利用JSP服務(wù)器Tomcat 5.5 作為服務(wù)端，IE7.0作為客戶端，編寫第一個(gè)應(yīng)用。 6.1 建立自定義服務(wù)器配置 復(fù)制flex文件夾，重命名文件夾為flex_testing（需要停止Tomcat服務(wù)） （未完待續(xù)） 作者：北大青鳥J2EE高級(jí)講師，聯(lián)系方式：mrbit@sina.com，QQ:254563658。本文為Flex教材（PPT）的節(jié)選。
4.1 安裝JSP服務(wù)器Tomcat
" 安裝JSP服務(wù)器Tomcat 5.5，啟動(dòng)服務(wù)。（下文的{Tomcat}指Tomcat安裝目錄）
" 打開瀏覽器輸入地址：
" 安裝Flex ShareConnector；
" 拷貝Flex安裝后文件夾下的samples.war及flex.war到{Tomcat}/webapps目錄下；
" 打開
" 拷貝Flex安裝后文件夾下的flex.war到{Tomcat}/webapps目錄下
" 復(fù)制{Tomcat}/webapps/flex文件夾，修改配置，即成了自己的服務(wù)器配置
" 將編寫好的mxml，as，jsp文件都放在復(fù)制后的目錄下即可
5 Flex開發(fā)模型
5.1 MXML/Actionscript簡介
MXML文件：基于XML，用于定義客戶端界面；
Actionscript：面向?qū)ο?，用于編寫客戶端腳本；
5.2.1 Html頁面
<html>
<body>
<form>
UserId: <input type="text" name="UserId"><br>
Password: <input type="password" name="Password"><br>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<mx:Form>
<mx:TextInput id="userId" width="150"/>
</mx:FormItem>
<mx:TextInput id="password" width="150"/>
</mx:FormItem>
5.2.3 Mxml優(yōu)勢
" 更友好豐富的界面元素
" 強(qiáng)大的數(shù)據(jù)綁定
" XML模式
" 可在任何IDE中編寫
5.3.1 Javascript腳本
<script language="javascript">
function check()
{
if(document.frm.username.value == "")
{
alert("請(qǐng)輸入密碼");
return false;
}
}
</script>
5.3.2 Actionscript與javascript對(duì)比
import mx.controls.Alert;
if(userId == ""){
Alert.show("User is null!", "Alert Box", Alert.OK);
}
}
}
" 完全面向?qū)ο?br>" 強(qiáng)類型
" 基于ECMAScript標(biāo)準(zhǔn)（目前標(biāo)準(zhǔn)由Adobe制訂）
說明：復(fù)制{Tomcat}/webapps/flex文件夾，修改配置，即成了自己的服務(wù)器配置，將編寫好的mxml，as，jsp文件都放在復(fù)制后的目錄下即可。
聯(lián)系客服
