RIA技术入门之Macromedia Flex & JSP（一）

来源：互联网发布：集体智慧编程下载编辑：程序博客网时间：2024/04/27 23:35

1 说明
本文为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服务）

（未完待续）