|
新的项目对用户体验及用户互动要求较高，决定选用Flex作为前端的展现技术，整体框架仍然是Flex+Spring+Hibernate(考虑采用seam中)。作为入门，先从经典的Hello world开始，暂时不考虑Flex与Spring、Hibernate的集成。 Flex要实现与Java集成，开源项目BlazeDS、GraniteDS、Flamingo都提供了相应的解决方案，考虑到BlazeDS是Adobe官方的开源项目，因此采用BlazeDs作为Flex与Java通信的基础框架。什么是 BlazeDS呢，看看官方的介绍： BlazeDS is the server-based Java remoting and web messaging technology that enables developers to easily connect to back-end distributed data and push data in real-time to Adobe? Flex? and Adobe AIR? applications for more responsive rich Internet application (RIA) experiences. 开发工具采用Eclipse+Flex Builder 3 Plug-in方式，不采用Flex Builder 3。先安装Eclipse，再安装Flex Builder 3 Plug-in，相关的安装配置不再赘述。 1、下载BlazeDS 下载BlazeDS Turnkey ：http://flexorg.wip3.adobe.com/blazeds/3.0.x/milestone/3978/blazeds-turnkey-3.2.0.3978.zip 由于BlazeDS Turnkey中包含BlazeDS的使用例子，对于入门熟悉Flex及BlazeDS都有较好的参考价值，因此建议下载BlazeDS Turnkey。 关于blazeds-turnkey 的目录说明： docs：BlazeDS Javadoc resources：BlazeDS的相关支持包，包括clustering（采用jgroups）、BlazeDS与ColdFusion 集成的配置文件、BlazeDS的配置文件、BlazeDS与AJAX集成的桥、Flex的SDK、Flex的java library、BlazeDS与Tomcat、Jboss、Websphere等security集成的支持包。 sampledb：hsqldb的启动脚本及样例数据库 tomcat：Tomcat 包 blazeds.war：最小化的BlazeDS 文件，可以作为空白项目来建立BlazeDS 应用程序。 sample.war：BlazeDS的demo例子（所谓的testdrive）。 ds-console.war ：BlazeDS的部署管理程序。 2、建立Java Web Project File->New->Web Project 建立Java helloworld项目 
在helloworld/src下，新建com.yeeach.HelloWorldService类，内容如下： package com.yeeach; public class HelloWorldService {
public String hello(String var1) {
return “hello ” + var1;
}
public String world(String var1) {
return “world ” + var1;
}
} 3、建立helloworld的BlazeDS开发环境 3.1、拷贝blazeds.war下的WEB-INF到helloworld的目录下，覆盖原有的WEB-INF 3.2、在helloworld下建立flex-src目录（与src同级），用于存放flex的相关代码
helloworld/src：用于存放项目的java代码 helloworld/flex-src：用于存放项目flex的相关代码 helloworld/WebRoot/WEB-INF/flex：存放flex的相关配置文件 3.3、设置Flex Project Nature
3.4、在helloworld/flex-src下，新建MXML Application ：helloworld.mxml? ，内容如下： <?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”>
<mx:RemoteObject destination=”com.yeeach.HelloWorldService”
id=”helloWorldService”>
<mx:method name=”hello”
result=”sayHelloResult(event)”/>
<mx:method name=”world”
result=”sayWorldResult(event)”/>
</mx:RemoteObject>
<mx:HBox>
<mx:Label text=”输入：”/>
<mx:TextInput id=”inputStr”/>
<mx:Button label=”say hello”
click=”sayHello(event);”/>
<mx:Button label=”say world”
click=”sayWorld(event);”/>
</mx:HBox>
<mx:HBox>
<mx:Label text=”结果：”/>
<mx:TextArea id=”result”/>
</mx:HBox> <mx:Script> <![CDATA[
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent; function sayHello(event:Event):void
{
var inputVar:String=inputStr.text;
helloWorldService.hello(inputVar); } function sayWorld(event:Event):void
{
var inputVar:String=inputStr.text;
helloWorldService.world(inputVar); } private function sayHelloResult(event:ResultEvent):void
{
result.text=event.result.toString();
Alert.show(event.result.toString(),"返回结果");
} private function sayWorldResult(event:ResultEvent):void
{
result.text=event.result.toString();
Alert.show(event.result.toString(),"返回结果");
}
]]>
</mx:Script>
</mx:Application> 3.5、修改remoting-config.xml，增加对destination的说明 <destination id=”com.yeeach.HelloWorldService”>
<properties>
<source>com.yeeach.HelloWorldService</source>
</properties>
</destination> 3.6、设置Flex Build Path等相关属性 1)右键->Properties,设置Flex Build Path属性，将Main source folder修改为flex-src，然后点击“OK” 2)右键->Properties,设置Flex Applications属性，添加flex-src下的其他Application，然后点击“OK” 如果需要添加flex-src子目录下的其他Application（例如helloworld/flex-src/com/yeeach /helloworld1.mxml），目前从UI界面似乎无法正确添加，可以直接修改.actionScriptProperties,在<applications></applications>中间增加相应的Application <applications>
<application path=”helloworld.mxml”/> <application path=”com/yeeach.com/helloworld1.mxml”/>
</applications> 3)右键->Properties,设置Flex Compiler属性，将Flex SDK version 修改为“Use default”或“Use a specific SDK”，指向正确的Flex SDK；确认“Additional compiler arguments”配置参数正确，然后点击“OK”
4)右键->Properties,设置Flex Server属性，配置为正确的参数，然后点击“OK”
3.7、部署helloworld 应用到Tomcat 通过http://127.0.0.1:8080/helloworld/helloworld.swf来访问我们的hello world 3.8、分析helloworld.mxml <?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”>
<mx:RemoteObject destination=”com.yeeach.HelloWorldService”
id=”helloWorldService”> //此处的destination=”com.yeeach.HelloWorldService”与remoting- config.xml中的id=”com.yeeach.HelloWorldService”完全匹配 //id=”helloWorldService”用来在actionscript中标识destination=”com.yeeach.HelloWorldService”，后面的helloWorldService.hello(inputVar)等都使用此id;
<mx:method name=”hello”
result=”sayHelloResult(event)”/> //mx:method 声明java类com.yeeah.com.HelloWorldService中的hello方法及响应结果回调函数sayHelloResult
<mx:method name=”world”
result=”sayWorldResult(event)”/>
</mx:RemoteObject>
<mx:HBox>
<mx:Label text=”输入：”/>
<mx:TextInput id=”inputStr”/>
<mx:Button label=”say hello”
click=”sayHello(event);”/>
<mx:Button label=”say world”
click=”sayWorld(event);”/>
</mx:HBox>
<mx:HBox>
<mx:Label text=”结果：”/>
<mx:TextArea id=”result”/>
</mx:HBox> <mx:Script> <![CDATA[
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent; function sayHello(event:Event):void
{
var inputVar:String=inputStr.text;
helloWorldService.hello(inputVar); } function sayWorld(event:Event):void
{
var inputVar:String=inputStr.text;
helloWorldService.world(inputVar); } private function sayHelloResult(event:ResultEvent):void
{
result.text=event.result.toString();
Alert.show(event.result.toString(),"返回结果");
}
]]>
</mx:Script>
</mx:Application> 代码文件：helloworld.rar ====http://www.jexchen.com/?p=87 Flex+BlazeDS+Java初步：环境配置与“Hello,World”
12月 30th,2008
Posted in BlazeDS, Flex3, LCDS, RIA
好久没更新文章了，问题多多的2008就要过去了，希望来年是个好兆头，大家都平平安安… 其实很早就接触过Flex BlazeDS Java结合使用，最初还用的是FDS(Flex Data Service,早已更名为LiveCycle Data Service)，不过从来没实际在项目中用过，由于现在的做的产品主要就是在这个架构上运行，因此有必要重新学习学习。 Flex+LCDS(BlazeDS)+Java这种方式对大型的企业级相关应用是比较好的选择。 网上关于Flex + BlazeDS + Java的安装配置文章很多，大都是按照官方的方式，使用向导的方式来进行的，而且通常使用的是BlazeDS Turkey（集成了Tomcat的BlazeDS版本），而且使用了WTP(Web Tools Platform的简称，允许开发人员在Eclipse下开J2EE Web应用)，虽然配置比较简单，但由于采用向导的方式，实际上并不灵活，通过实践，推荐下面一种比较灵活的方式 ^_^我会将我在安装配置的过程遇到的常见问题一并指出，我自己做个记录，大家也可少走点弯路 我用的软件环境： JDK 1.6 Eclipse 3.4.1 Flex 3 plugin for Eclipse （升级到Flex 3.0.214193，Flex SDK为3.2） Sysdeo Eclipse Tomcat Launcher plugin (一款Eclipse下的Tocamt插件) Tomcat6.0.13 (我用的是zip包，直接解压就用) BlazeDS (我下载的是 blazeds-bin-3.2.0.3978.zip) 其中Tomcat的插件下载地址为：http://www.eclipsetotale.com/tomcatPlugin.html#A1 其它的相关软件大家应该都知道。 安装： 上面的所有工具安装都很简单，注意安装后请配置好JDK与Tomcat的环境变量，BlazeDS这里不需安装，下面讲 Hello World再说怎么使用。 Tomcat Launcher plugin插件安装好后，在eclipse中配置如下： 
然后一步一步来创建Hello World: 先看一下完成后的项目结构图： 
一、创建Java项目： 选择new->Java Project创建一个普通Java项目，其中注意的是为了与flex源文件目录区分，将java项目的源文件目录自定义为javasrc，并设定java class默认的输出目录，如下图： 
（创建完成后可将本身的src目录删掉） 创建一简单的HelloWorldService类，用来当Flex端通过BlazeDS以RemoteObject的方式直接访问，SimpleService.java内容很简单，如下： ?
1: package com.jexchen.blazeds;
2:
3: public class HelloWorldService {
4: public String sayHello(String str) {
5: return “Hello,“ + str;
6: }
7: }
? 将blazeds-bin-3.2.0.3978.zip解压，得到flex.war,war其实就是一打包文件，使用解压软件将其解压，得到META-INF与WEB-INF两个目录，将WEB-INF目录下的flex、lib目录及web.xml文件复制到当前应用程序的WEB-INF目录下，在HelloBlazeDS项目上点右键，刷新，这时eclipse中HelloBlazeDS项目目录结构如下图所示： 
二、为当前Java项目增添Flex Project支持 在HelloBlazeDS项目上点击右键，选Flex Project Nature –> Add Flex Project Nature如下图： 
不选任何服务器支持，呆会手动配置： 
指定Flex的编译生成目录至WEB-INFflex，其中flex目录为新创建的： 
按提示，切换到Flex视图，这时会报一个错误 
在错误提示信息上点击右键，选择Recreate HTML Templates，为生成的swf重建HTML模板。 三、增添Tomcat服务器支持 在HelloBlazeDS项目上点击右键，选择Properties，打开的配置面板中选择Tomcat，设置参数如下： 
完成设置。 （你会发现在我的d:tomcat6.0.13confCatalinalocalhost目录下生成了名为hello.xml的文件，生成该文件的目的就是为HelloBlazeDS项目在Tomcat下配置了一个独立的Context，这样就不必将文件布署到Tomcat的webapps下去了。 四、完成BlazeDS配置并创建Flex客户端程序 编辑WEB-INFflexremoting-config.xml文件，增添下面的语句： ?
1: <destination id=”helloservice”>
2: <properties>
3: <source>com.jexchen.blazeds.HelloWorldService</source>
4: </properties>
5: </destination>
? 在src下创建Flex应用程序HelloBlazeDS.mxml (MXML Application类型)，代码如下： ?
1: <?xml version=”1.0″ encoding=”utf-8″? >
2: <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical”>
3: <mx:Script>
4: <![CDATA[
5: import mx.controls.Alert;
6: private function onCall():void {
7:
8: myService.sayHello(nameInput.text);
9: }
10: ]]>
11: </mx:Script>
12: <mx:RemoteObject id=”myService” destination=”helloservice” endpoint=”http://localhost:8080/hello/messagebroker/amf” />
13: <mx:TextInput id=”nameInput” />
14: <mx:Button label=”Call” click=”onCall()”/>
15:
16: <mx:TextArea text=”{myService.sayHello.lastResult}” />
17: </mx:Application>
? 需要注意的是Flex compiler的参数设置，我们这种完全手动配置的情况尤其需要注意，下面是我的参数配置，具体含义请查看相关资料：） -context-root “webRoot” -services “e:/workspace/javaeeworkspace/HelloBlazeDS/webRoot/WEB-INF/flex/services-config.xml” -locale en_US ok，现在可以点击工具栏上的小猫图标，启动Tomcat了，在浏览器输入以下地址： http://localhost:8080/hello/flex/HelloBlazeDS.html 运行运行~~~效果如下： 
|
