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