本文为Macromedia Flex的入门文档,简单介绍基于Flash平台的RIA技术。要求读者了解html、javascript、jsp等基本概念。
2 RIA是什么
2.1 简介
RIA是Rich Internet Application的缩写。Internet服务从最初简单的信息发布,发展到到今天的Web应用程序,到即将来临的Rich Internet Application时代,互动性、丰富性不断在增强。RIA将会给许多领域(金融、游戏、门户)带来令人惊异的用户体验及投资回报。
2.2 RIA意味着什么
" 不同凡响的Web功能
" 更好的用户体验
" 更强大的用户界面
" 更好的交互性
" 更先进的开发模型
" 更强大的多媒体功能
" 更好的数据管理
" 更好的程序控制
2.3 RIA解决方案
" Macromedia 基于Flash的Flex
" Windows的Interactive方案
目前的RIA方案除了Macromedia Flex之外,还有微软的Interactive方案。本文主要介绍Macromedia Flex方案。
2.4 Flex体验
2.4.1 基于浏览器的电子相册
用户可以实现更改页面布局,旋转、拖动、更改图片大小等等令人惊异的功能
2.4.2 基于浏览器的电子仪表盘
3 Macromedia Flex
3.1 Flex简介
" 客户端:极大增强了客户端技术;客户端只需要Flash Player,得到广泛支持;
" 服务端:开放平台,兼容目前主流几乎所有的服务端技术。不管你现在使用的服务器是什么(JSP/.Net),都可以部署Flex应用。
3.2 系统结构
" 服务器端:
采用Flex Gateway + 任意一种服务端技术(例如: 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开发模型
5.1 MXML/Actionscript简介
MXML文件:基于XML,用于定义客户端界面;
Actionscript:面向对象,用于编写客户端脚本;
MXML,基于XML,用于定义客户端界面,互动性极强的界面UI,强大的数据绑定,编写简单。
Actionscript,用于编写客户端脚本,面向对象,强类型化,基于ECMAScript标准。
这两者,mxml相当于传统B/S开发模式中的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优势
" 更友好丰富的界面元素
" 强大的数据绑定
" 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优势
" 完全面向对象
" 强类型
" 基于ECMAScript标准(目前标准由Adobe制订)
6 如何部署自己的Flex应用
下面,我们利用JSP服务器Tomcat 5.5 作为服务端,IE7.0作为客户端,编写第一个应用。
6.1 建立自定义服务器配置
说明:复制{Tomcat}/webapps/flex文件夹,修改配置,即成了自己的服务器配置,将编写好的mxml,as,jsp文件都放在复制后的目录下即可。
复制flex文件夹,重命名文件夹为flex_testing(需要停止Tomcat服务)
(未完待续)