flex 学习 web工程搭建

BlazeDS 集成 Flex+Tomcat 开发 J2EE 模块整合实例

一、              准备工作

l          安装配置系统软件和工具

JDK1.5 或者以上版本

Eclipse3.2 或者以上版本

Flex3 for eclipse plug-in

Tomcat5.0 或者以上版本

BlazeDS.war (blazeds 是一个用于集成 flex 客户端和 j2ee server 的组件，在本人的下载资源webapps中包含了 )  

二、              环境搭建 ( 集成 BlazeDS)

l          新建一个 JAVA WEB 工程

新建一个 JAVA WEB 工程，名为 Demo

l          BlazeDS 集成 FLEX 和 TOMCAT

1 ）解压 BlazeDS.war 到 %TOMCAT_HOME%/webapps 目录下文件名为 blazeds 内包涵了 WEB-INF 和 META － INF 文件夹

2 ）为 web app 添加 blazeds 支持：

%TOMCAT_HOME%/webapps /WEB-INF/lib 目录下面所有 jar 文件拷贝到 Demo 的 webRoot/WEB-INF/lib 目录下 .

将 %TOMCAT_HOME%/webapps /WEB-INF/flex 目录拷贝到 Demo 的 webContent/WEB-INF 下 .

将 %TOMCAT_HOME%/webapps /WEB-INF 下的 web.xml 中的 <listener/> <servlet/> <servlet-mapping/> 三个节点的内容 拷贝到 Demo 的 web.xml 中

至此 , 我们的 Demo 已经具备了 blazeds 的功能 .

 

三、              在 Eclipse 下开发 FLEX

l          新建一测试类

在 j2ee 视图中创建一个 package “com.wingo.samuel.ro”, 在包 com.wingo.samuel.ro 下面创建一个类 HelloWorld. 这个类有一个简单的方法 :sayHelloTo(String name)

package com.wingo.samuel.ro;   public class HelloWorld {     public String sayHelloTo(String name){        return "Hello World" +name;     } }

打开 Demo 的 WebRoot/WEB-INF/flex/remoting-config.xml, 添加一个供 flex 客户端调用的 destination.

< destination id = "Hello" >     < properties >     < source > com.wingo.samuel.ro.HelloWorld </ source >     </ properties >     </ destination >

 

l          添加 FLEX 支持

在添加时先将 Demo 工程 Deploy 到 TOMCAT, 后面会用到其路径

在工程 Demo 上右键 flex project nature->add flex project nature. 这时会弹出对话框

 

在 Application server type 选择 J2EE,[ 点击 NEXT]

 

Root folder ：选择刚才 Deploy 的工程 Demo 路径

Root URL ： TOMCAT 服务器的启动路径加上 Demo ，说明我们要启动到 Demo 工程

Context root ：编译后的 FLEX 文件保存路径

Output folder ：工程 重构后 FLEX 文件的输出路径

[ 点击 Finish 完成 ]

l          配置 Flex 项目属性

在 Flex 视图下 , 右键 properties 打开项目属性设置对话框 . 选择 “Flex Build Path”, 出现以下对话框：

 

Output folder ：工程 FLEX 文件的输出路径

Output folder URL ：工程在 TOMCAT 服务器的启动路径

――――――――――――――――――――――――――

选择 “Flex Compiler”, 出现以下对话框：

 

选择你当前用的 FLEX SDK （如何你前面步骤配置好的话就不会出错了！）

[ 点击 Apply 应用 ]

―――――――――――――――――――――――――――――――――――

选择 “Flex Server”, 出现以下对话框：

 

Context root ：是你的工程的根目录

[ 点击 OK 完成设置 ]

4 、编辑 FLEX 应用程序

在 Flex 应用程序 , 例如 Demo.mxml 中添加以下代码：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout=" absolute " >     <mx:RemoteObject id=" say " destination=" Hello " >            </mx:RemoteObject>     <mx:Button x=" 335 " y=" 80 " label=" Click " click="remotingSayHello(event);" />     <mx:TextInput x=" 159 " y=" 80 " id=" tiName " />     <mx:Label x=" 109 " y=" 82 " text=" name: " />     <mx:Label text=" { say.sayHelloTo.lastResult } " x=" 44 " y=" 162 " width=" 448 " height=" 71 " id=" lblView " color=" #FCEE09 " fontSize=" 20 " fontWeight=" bold " textDecoration=" underline " fontStyle=" normal " />     <mx:Script>        <![CDATA[            function remotingSayHello(event:Event):void{               var iname:String=tiName.text;               say.sayHelloTo(iname);            }        ]]>     </mx:Script> </mx:Application>

 

在 Flex Development 视图下 ,project->Build Project, 可以看到 Flex 应用程序被正确编译 , 产生输出到 bin 目录下面

如果在问题窗口 Problems 中出现 can not create html-template````` 则按照提示右键创建；然后再重新编译工程就不会出现问题了！

[ 启动 TOMCAT 输入 http://localhost:8080/Demo/bin/Demo.html 你可以进行 FLEX 测试了！ ]