《?Adobe AIR ?Dojo 开发基?Ajax ?Mashup 应用?/font>?Application server type 我们?J2EE ZQƈ且不要钩?Use remote object access service, 关于q些高内容Q我们将在后l的文章中陆l讨论。最后我们?Eclipse Ganymede J2EE 版本内置?WTP(Web Tools Platform) 来创Z个后端?Java 前端使用 Flex ?RIA 目。在默认讄下,src ?Java 代码的源代码文g夏V?/p>
?5Q设|?Flex 目
在后l的讄面中,我们配置目q行时的 J2EE server 为我们在安装配置开发环境部分中配置?Tomcat6 如图 6 所C:(x)
?6Q配|运行时 J2EE Server
点击 NextQ在下一个页面中一切都按照默认讄卛_。如?7 所C,Main source folder 是设|默认的 flex 代码 ( 包括 mxml ?Action script) 的源文g夹,Main application file 是项目默认的d用?Out folder URL 是项目运行在我们配置?Tomcat 上时?URL.
?7Q其他属性设|?/b>
一切完成之后,我们来看看项目的l成l构Q如?8 所C:(x)flex_src 中是默认?flex 源码位置Qflex_libs 则是存放 flex 其他W三方包的默认\径。类g web 应用?lib 文g夏V?src ?java 代码位置?WebContent 文g夹的l构和普通由 WTP 建立?Web Project 的结构完全相同。在默认的输\?bin-debug 文g夹中Q我们可以看?Flex builder 自动生成?FlexSample.mxml 文g已经被自动编译成 FlexSample.swf 文g?/p>
?8QFlex 目l构
接下来,我们在新创徏的项目上增加一点内容ƈ让它q行hQ双?FlexSample.mxml, 在其中添加一个最基本?Flex lg :Label, q且在该应用初始化的时候调?init() Ҏ(gu)。我们在 init() Ҏ(gu)中用 trace() 语句输出调试信息。代码如下清?1 所C:(x)
清单 1QFlexSample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
initialize="init()">
<mx:Script>
<![CDATA[
private function init():void
{
var i:int = 0;
i++;
trace("i="+i);
}
]]>
</mx:Script>
<mx:Label text="Hello World!" />
</mx:Application>
|
q行、调试以?qing)部|?/font>
现在Q终于到了让我们的项目运行的时候了 ! 右键点击目 ->Run As->Run On Server 如图 9 所C:(x)接下来的几个面选择默认卛_Q这时大家我们可以看到项目会(x)被部|到我们配置?Tomcat6 上去。ƈ?Flex Builder ?x)自动打开一个我们刚才配|的外部 FireFox H口?/p>
?9Q运行项?/b>
但可能o(h)(zhn)遗憄?Flex Builder 自动打开?FireFox H口打开?URL: http://localhost:8080/FlexSample/ 却什么也没有。别着急,q剩下最后一步:(x)
如图 10 所C:(x)右键点击我们要运行的 FlexSample.mxml > Run As > Flex Application
?10Q运?mxml
如果不出意外的话Q?zhn)应该会(x)看C面的界面QFlash Tracer 插g输出了我们用 trace() 语句输出?debug 信息Q标{ Hello World Q也被显C到了界面上。同P打开 FireFox ?HttpFox 插gQ我们也可以看到在运行时 FlexSample.swf 被蝲入?/p>
?11Q运行后的界?/b>
如果我们希望像调?Java 代码那样Q在q行时观察变量的值怎么办呢Q首先我们像?Java 代码中设|断点一L(fng)我们?Action Script 代码增加断点。如?12 所C:(x)
?12Q在 Action Script 代码中设|断?/b>
然后选择我们?FlexSample.mxml 右键选择调试q行。如?13 所C:(x)
?13Q调试方式运?flex
然后我们随提C切换到 Flex 的调试视图,׃(x)看到我们可以?Java 调试模式那样L的调?Flex 代码。如?14 所C:(x)
?14QFlex Builder 调试视图
利用 WTPQ我们可以将目 export 成一个标准的 war file. 导出的 war 文g攑ֈ Tomcat ?webapps 目录或者其?web 服务器的相应目录下就可以当作一个标准的 web 应用来部|运行?/p>
到此为止Q我们应该庆一下我们已l迈入了 Flex 的大门了Q我们已l编译出了我们自q swf 文gQƈ且运行在服务器上了。熟(zhn)了q个开发过E之后,让我们乘胜前q,l合一个小例子学习(fn)一?Flex 的编E基知识吧!
Flex ~程基础
面向对象的编E?/font>
在上?Hello World 的例子中我们可以看出Q就像在 HTML 中嵌?JavaScript 那样Q我们可以在 mxml 里面嵌入 Action Script 代码来实C务逻辑。没错!如果(zhn)把 Flex ?mxml ?Action Script 的关pȝ解ؓ(f) Html ?JavaScript 的关p,(zhn)会(x)忽然发现(zhn)对 Flex 变的如此熟?zhn)Q?/p>
Action Script 语言是面向对象的脚本语言Q它q编写方式都?JavaScript 非常的相伹{除了可以嵌套在 mxml 里面之外Q它q可以像 JavaScript 写在单独?.js 文g里面那样写在单独?.as 文g里面Q然后在 mxml 里面引入它?/p>
下面我们新徏一?Action Script 的类 J2eeServer.as 如清?2 所C:(x)
清单 2QJ2eeServer.as
package com.ibm.flex
{
import flash.events.EventDispatcher;
import mx.rpc.AsyncToken;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.http.HTTPService;
public class J2eeServer extends EventDispatcher
{
public function J2eeServer()
{
}
public function sendRequest(locale:String):void
{
var httpObject:HTTPService = new HTTPService();
httpObject.resultFormat = "text";
httpObject.url =
"http://localhost:8080/FlexSample/SampleServlet?locale="+locale;
var responder:mx.rpc.Responder = new mx.rpc.Responder(onSuccess, onFault);
var call:AsyncToken = httpObject.send();
call.addResponder(responder);
}
private function onSuccess(event:ResultEvent):void
{
this.dispatchEvent(event);
}
private function onFault(event:FaultEvent):void
{
trace("communication failed!");
this.dispatchEvent(event);
}
}
}
|
在这个类定义里面Q熟(zhn)?Java 的开发h员可以看出其~码规范?Java 非常cM。在其中我们定义了一?sendRequest() Ҏ(gu)Q?使用 HTTPService 对象发v一?http ?get h , q且对于不同的返回结果我们定义了 onSuccess() ?onFault() 两个Ҏ(gu)d理。在q两个结果处理方法中Q我们将事g dispatch 出去?/p>
?Servlet 集成
?J2eeServer.as 中,我们通过 Action Script 发出 http hQ现在我们定义一个服务器端的 servlet 来处理该h。如清单 3 所C:(x)
清单 3QSampleServlet.java
package com.ibm.sample;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class SampleServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public SampleServlet() {
super();
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String locale = request.getParameter("locale");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("The locale you selected is " + locale);
}
}
|
和普?web 应用一样配|?web.xml, 如清?4
清单 4Qweb.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>FlexSample</display-name>
<servlet>
<display-name>SampleServlet</display-name>
<servlet-name>SampleServlet</servlet-name>
<servlet-class>com.ibm.sample.SampleServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SampleServlet</servlet-name>
<url-pattern>/SampleServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>FlexSample.html</welcome-file>
</welcome-file-list>
</web-app>
|
事g驱动与数据绑?/font>
?J2eeServer.as 中我们依E可以看出 Flex 事g驱动的媄子。的,Flex 的业务流E大多是靠事件来驱动的。某一个方法结束后Qdispatch 出去一个事件。事件的监听者监听到q个事g后就?x)采取相应的动作来处理事件。如清单 5 所C:(x)我们?init() Ҏ(gu)中进行了事gl定Q绑定了两个监听Ҏ(gu) successHandler () ?errorHandler () ?J2eeServer 上。当 J2eeServer 完成和服务器?servlet 通信 dispatch 出相应的事g后,两个监听Ҏ(gu)便会(x)监听到相应的事gq进行处理?/p>
Flex 的另外一个重要的特点是支持数据l定Q在另一文?a >《?Eclipse ?JavaFX 开?Mashup 应用?/font>中我们曾介绍?JavaFx 的数据绑定特性,同样 Flex 也支持数据绑定。当数据源被l定到另外一个对象的某属性上Ӟ数据源的数据如果发生变化Q开发h员不需要写额外的代码该对象的属性值就可以相应的变化。如清单 5 中所C:(x)如果要进行数据绑定,则要先定义一个可l定的数据源Q例如我们在变量private
var
serverResponse:String =
""
;
的上面设|?[Bindable] 属性,表示其ؓ(f)可绑定变量。然后我们在 resultLable 中用花括号 {serverResponse
} 变?code>serverResponsel定?resultLable ?text 属性上?/p>
清单 5QFlexSample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import com.ibm.flex.J2eeServer;
import mx.collections.ArrayCollection;
private var jserver:J2eeServer = new J2eeServer();
//可绑定变?
[Bindable]
private var serverResponse:String = "";
//可绑定变?
[Bindable]
private var locales:ArrayCollection = new ArrayCollection(
[ {label:"en_us", data:"en_us"},
{label:"zh_cn", data:"zh_cn"}]);
private function init():void
{
//事gl定
jserver.addEventListener(ResultEvent.RESULT, successHandler);
jserver.addEventListener(FaultEvent.FAULT, errorHandler);
}
private function localeComboxChangeHandler(event:Event):void
{
jserver.sendRequest(localeCombox.selectedItem.data);
}
private function successHandler(event:ResultEvent):void
{
serverResponse = event.result.toString();
trace(event.result);
}
private function errorHandler(event:FaultEvent):void
{
serverResponse = event.message.toString();
trace(event.message);
}
]]>
</mx:Script>
<mx:VBox>
<mx:Label text="Select your locale:" />
<mx:ComboBox
id="localeCombox"
width="160"
dataProvider="{locales}"
change="localeComboxChangeHandler(event)"/>
<mx:Label
id="resultLabel"
text="The response from server is: {serverResponse}" />
</mx:VBox>
</mx:Application>
|
最l项目的文gl构如图 15 所C:(x)
?15Q项目文件结构图
q行目Q我们可以看到当我们改变下拉框的值的时候,?x)触?localeComboxChangeHandler() 函数调用 J2eeServer ?sendRequest() Ҏ(gu)选择?locale 值发送给服务器端?servletQƈ且在l果q回后,从服务器端得到?response 昄?resultLable 上。如?16 所C:(x)
?16Q项目运行结?/b>
l束?/span>
Flex 作ؓ(f) RIA 的新技术,对传l?web 开发技术有l承也有发展。这文作ؓ(f)入门文,主要作用是帮助大家掌?Flex 的开发环境、开发方式、开发调试部|的程以及(qing) Flex 的基本编E知识。但 Flex 除了国际化、Unit 试、Ant ~译{传l问题之外,作ؓ(f)新技?Flex q有很多不同以往的地方,比如模块开发,RSL(Runtime Shared Libraries), Shared object、和 JavaScript 交互以及(qing)它的 MVC 框架 cairngormQ远E调用和消息传递框?BlazeDS {。所有这些问题都是值得我们q行后箋讨论的?/p>
致谢
在本文完成之际,特别感谢 IBM 中国软g开发中?IM 开发团队我的同事们在工作和学习(fn)中给我的巨大帮助Q?/p>
参考资?
学习(fn)
- ?a >Flex 3 Developer's Guide”:(x)很好?Flex 基础知识入门材料?
- ?a >Flex Developer Center”:(x)针对具体开发场景的大量CZ代码和文章?
- ?a >Flex Ant Tasks”:(x)介绍了如何结?Ant 工具来编?Flex?
- ?a >Flex RSL”:(x)对Flex RSL开发的各方面进行详l介l的官方文档?
- ?a >集成 Flex ?Ajax 应用E序”(developerWorksQ?008 q?7 月)Q阅d本文后,(zhn)将能够利用通过 Flash 资源获得的丰富功能?br />
- ?a >使用 Flex SDK 实现一?Facebook 相册”(developerWorksQ?008 q?12 月)Q在本篇教程中,在 Adobe Flex 中开发一?Facebook 应用E序Q它可以以灯片的Ş式显C用L(fng) Facebook 相册?br />
- ?a >Fluint 的官方站?/font>”:(x)Fluint ?Flex Unit Test 的框?Flex Unit 的升U版本?
- ?a >Cairngorm 框架?Adobe 官方站点”:(x)Cairngorm ?Flex 开发最著名和最成熟的一?MVC 框架?
- ?a >BlazeDS 框架的开源站?/font>”:(x)BlazeDS ?Adobe 的一个开源项目。基于服务器?Java q程调用QremotingQ和 Web 消息传递(messagingQ技术,它能够得后台的 Java 应用E序和运行在览器上?Flex 应用E序?AIR 应用E序怺通信?
获得产品和技?/b>
-
下蝲
JRE ?JDK?
-
下蝲
Eclipss Ganymede?
-
下蝲
Flex Builder Eclipse 插g版?
-
下蝲
Tomcat 6?
-
下蝲
FireFox 2.0?
-
下蝲
BDebug 版本?FireFox Flash Player 插g?
关于作?/span>
|
|
|
刘庆Q目前在 IBM 软g开发中心(IBM CSDLQIM 开发团队担d发工E师Q拥?IBM DB2 DBA 专业认证Q他?J2EE ?Web 开发领域有着多年开发经验,喜欢x新技术。他毕业于中国科技大学Qƈ拥有士学位?/p>
|