Flex+LCDS+Java 入门教程

<!-- Feedsky FEED发布代码开始 --> 欢迎点击此处订阅本Blog <!-- FEED自动发现标记开始 --> <link title="RSS 2.0" type="application/rss+xml" href="http://feed.feedsky.com/softwave" rel="alternate"> <!-- FEED自动发现标记结束 --> Blog 订阅

<!--Google 468*60横幅广告开始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_ad_type = "image"; //2007-07-26: CSDN google_ad_channel = "6063905817"; google_color_border = "6699CC"; google_color_bg = "E6E6E6"; google_color_link = "FFFFFF"; google_color_text = "333333"; google_color_url = "AECCEB"; google_ui_features = "rc:6"; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--Google 468*60横幅广告结束-->

Flex + LCDS + Java 入门教程

1. Flex 是什么?

……

2. LCDS是什么?

LCDSLiveCycle Data Service)之前叫做FDSFlex Data Service),他是基于java(也有ColdFusion版的)后端的数据服务工程,功能包括映射Java对象到Flex对象(包括调用Java类的方法)、RTMPReal Time Message Protocol)、代理、服务端生成PDF等等功能,详细请参考LCDS里的说明。官方有下载,需要注册会员(免费)。

LCDS实际是付费的,但是免费也能使用,似乎是少了多CPU的支持。当然还有一些其他的数据服务,比如AMFPHP之类的。

当然,LCDS提供的功能我们都能自己实现,并非Flex脱离了LCDS就不能和后台打交道了,除了RemoteObject还有WebSerivceHTTPService等等。只是说,LCDS提供了更多的方便和特性。

3. Java是什么?

……(此处省略1W字)

三.准备

1. 下载开发环境:

Eclipse 3.3 + FlexBuilder3 beta2 插件版 +MyEclipse 6.0 +Lcds + Tomcat 5和以上(官方都有下载,或者google里搜一搜哈)

MyEclipse:做Java开发都应该知道MyEclipse是比较好的J2EE项目的开发及部署工具的,我们主要用它来部署FlexJava结合的项目。6.0是适合Eclipse3.3版的。他自带了一个Tomcat服务器

FB3:相比FB2,他在LCDS工程上做了很大的改进,特别是beta2,项目向导更加的易懂,而且比FB2更好的是,Flex.war是被打包在你的Flex项目中的,而不需要单独的部署了。性能上也高出FB2

LCDS:安装lcds后,起作用的是里面的flex.war文件,实际上,这就是一个j2ee的工程。在发布到web应用服务器后(比如tomcatj4run等)就会被解压成一个工程。当然,在FB3里,这个发布的过程会更加的简单。

2. 安装:

四.入门教程

1. 新建FlexLCDS工程

File -> new -> Flex Project …

注:以下设置绝大多数都可以在项目属性中可以修改。

1). 向导界面1

<oval id="_x0000_s1039" style="margin-top: 310.2pt; z-index: 14; left: 0px; margin-left: 120.6pt; width: 63pt; position: absolute; height: 39pt; text-align: left;" strokeweight="2.25pt" strokecolor="red" filled="f"></oval><shapetype id="_x0000_t75" filled="f" stroked="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1025" style="width: 462pt; height: 414.75pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image002.png"></imagedata></shape>

说明:Java source folder就是你自己java业务源码存放的根目录,在FB3里,LCDS项目旨在将Java J2ee项目和FlexLcds项目混合。

当然如果你不选择 combined 两个在一起,那么就麻烦些:要么你再单独新建一个Flex项目,而这个项目只写java代码。要么再建一个J2ee工程写java代码,而这个项目只写Flex代码,但最后要把Java编译后的class文件放到这个项目下的webroot/web-inf/classes目录中。即不管怎样,最后发布时,java编译后的class文件必须和lcds部署的项目在一起。(听起来绕昏头了?那就在一个工程里吧)

2). 向导界面2

<oval id="_x0000_s1042" style="margin-top: 156.75pt; z-index: 17; left: 0px; margin-left: 112.8pt; width: 70.8pt; position: absolute; height: 23.4pt; text-align: left;" strokeweight="2.25pt" strokecolor="red" filled="f"></oval><oval id="_x0000_s1029" style="margin-top: 132.6pt; z-index: 4; left: 0px; margin-left: 108pt; width: 63pt; position: absolute; height: 23.4pt; text-align: left;" strokeweight="2.25pt" strokecolor="red" filled="f"></oval><oval id="_x0000_s1026" style="margin-top: 263.4pt; z-index: 1; left: 0px; margin-left: 111.6pt; width: 63pt; position: absolute; height: 39pt; text-align: left;" strokeweight="2.25pt" strokecolor="red" filled="f"></oval><oval id="_x0000_s1027" style="margin-top: 84pt; z-index: 2; left: 0px; margin-left: 426.6pt; width: 63pt; position: absolute; height: 39pt; text-align: left;" strokeweight="2.25pt" strokecolor="red" filled="f"></oval><shape id="_x0000_i1026" style="width: 462.75pt; height: 414.75pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image008.png"></imagedata></shape>

说明:Target runtime实际上没什么用(后来我删除了配置文件里的对应信息,也没问题),但是不指定就不能继续,如果这里显示的是<none>那么就新建一个Tomcatruntime,简单的只需要指定tomcat的安装目录即可。

Content folder实际上就是最终编译后的容器目录,因此,Lcdsflex.war文件将会发布到 该目录 下的web-inf下的flex目录中。同时因为教程采用的是MyEclipse,他默认的就是发布WebRoot里的内容,为了自动化,因此这里改为了WebRoot(这也是java开发的习惯)

Flex WAR file 指的是安装了lcds后的flex.war文件的路径

Compilation options指定了flex文件的编译方式,选择推荐的在FlexBuilder里编译吧,虽然开发时多耗点时间,但是在发布后不会占用服务器的编译处理时间,对用户来说是有好处的。

Output folder 指的是Flex编译后的swfhtml等文件存放的路径,这里改为了WebRoot/bin

3). 向导界面3

<oval id="_x0000_s1028" style="margin-top: 396pt; z-index: 3; left: 0px; margin-left: 111.6pt; width: 180pt; position: absolute; height: 39pt; text-align: left;" strokeweight="2.25pt" strokecolor="red" filled="f"></oval><shape id="_x0000_i1027" style="width: 463.5pt; height: 497.25pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image011.png"></imagedata></shape>

说明:Main source folder flex的源码存放根目录,当然和java源码分开了。

Output folder URL 是在开发过程中运行和调试的请求路径,这个与发布无关,不会影响任何你在程序中使用的路径,但是能使开发方便

注意:FlexBuilder3这里存在bug,新建工程时,部分自定义的属性并没有保存下来,而必须在新建后的项目属性中更改,后面有说明到

放心这些设置都可以在以后修改。

4). 新建完成的项目结构看起来是这样的

<shape id="_x0000_i1028" style="width: 145.5pt; height: 167.25pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image013.png"></imagedata></shape>

2. MyEclipse添加Web容器

之前说到了,MyEclipse是很好用的J2EE的开发插件,其中就包含了部署功能。我们可以抛开烦琐的手动部署,交由MyEclipse完成吧,当然,首先得让你的FlexLCDS工程变成为J2EEWeb工程。

<shape id="_x0000_i1029" style="width: 348.75pt; height: 459pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image015.png"></imagedata></shape>

1). 向导界面1

<oval id="_x0000_s1031" style="margin-top: 114.15pt; z-index: 6; left: 0px; margin-left: 154.05pt; width: 27pt; position: absolute; height: 23.4pt; text-align: left;" strokeweight="2.25pt" strokecolor="red" filled="f"></oval> <shape id="_x0000_i1030" style="width: 344.25pt; height: 303.75pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image018.png"></imagedata></shape>

注意:不要点快了,把这里的Create web.xml取消,这样就不会覆盖LCDS创建的web.xml文件

现在我们的工程的图标变成了J2EE Web 工程了,这意味着,你可以用MyEclipse来发布它或者添加更多容器,比如hibernatespring

<shape id="_x0000_i1031" style="width: 95.25pt; height: 17.25pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image020.png"></imagedata></shape>

3. 部署FlexLCDS工程

有了MyEclipse,那么你就不用手动的部署你的项目了,可以简单的通过

点击工具栏上的这个图标

<oval id="_x0000_s1030" style="margin-top: 0px; z-index: 5; left: 0px; margin-left: 63pt; width: 36pt; position: absolute; height: 31.2pt; text-align: left;" strokeweight="2.25pt" strokecolor="red" filled="f"></oval><shape id="_x0000_i1032" style="width: 138pt; height: 24.75pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image023.png"></imagedata></shape>

1). 部署向导1

<oval id="_x0000_s1032" style="margin-top: 109.2pt; z-index: 7; left: 0px; margin-left: 342pt; width: 1in; position: absolute; height: 31.2pt; text-align: left;" strokeweight="2.25pt" strokecolor="red" filled="f"></oval><shape id="_x0000_i1033" style="width: 378.75pt; height: 327.75pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image026.png"></imagedata></shape>

注意:(如果你的列表中没有服务器,那么就自己建一个)

2). 新建部署Web应用服务器

<oval id="_x0000_s1033" style="margin-top: 85.8pt; z-index: 8; left: 0px; margin-left: 90pt; width: 351pt; position: absolute; height: 31.2pt; text-align: left;" strokeweight="2.25pt" strokecolor="red" filled="f"></oval><shape id="_x0000_i1034" style="width: 394.5pt; height: 396.75pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image029.png"></imagedata></shape>

注意:如果是MyEclipse6.0,则会自带一个Tomcat服务器。如果不是6.0,那么点Edit server connectors…自己添加一个tomcat

finish后则会开始部署。成功后会在Deployment status里提示success,并且看到列表中你的项目已经成功部署

4. 修改一下项目的访问路径

打开项目的属性,在这里,我们可以重新修改项目编译和发布的配置,包括先前向导里的设置

<shape id="_x0000_i1035" style="width: 189pt; height: 390.75pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image031.png"></imagedata></shape>

修改output folder url

<oval id="_x0000_s1034" style="margin-top: 364.8pt; z-index: 9; left: 0px; margin-left: 255.6pt; width: 162pt; position: absolute; height: 62.4pt; text-align: left;" strokeweight="2.25pt" strokecolor="red" filled="f"></oval><oval id="_x0000_s1035" style="margin-top: 84pt; z-index: 10; left: 0px; margin-left: 30.6pt; width: 99pt; position: absolute; height: 39pt; text-align: left;" strokeweight="2.25pt" strokecolor="red" filled="f"></oval><shape id="_x0000_i1036" style="width: 474pt; height: 455.25pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image035.png"></imagedata></shape>

为什么要这么做?

这样每次发布都会自动将编译的最终swf文件直接发布至WebRoot/bin目录下,而下面的output folder url则会在我们启动和调试项目时,直接请求这个路径(这跟发布无关,只是我们在开发过程中会方便些)

5. 修改Flex Server的项目容器属性(非常重要,多数连接路径错误就是这里配置错误)

改成如下配置

<oval id="_x0000_s1038" style="margin-top: 70.2pt; z-index: 13; left: 0px; margin-left: 198pt; width: 162pt; position: absolute; height: 62.4pt; text-align: left;" strokeweight="2.25pt" strokecolor="red" filled="f"></oval><shape id="_x0000_i1037" style="width: 456.75pt; height: 277.5pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image038.png"></imagedata></shape>

说明:

Root url 当然就是你的web服务器的根路径了,Tomcat默认是8080端口,如果改了就自己修改

Context root 就是LCDS工程的名称(注意:如果你分开为两个工程,则这里指的是你J2ee项目的名称,而不是你Flex项目的名称,因为你在请求Java的数据服务),在Flex请求LCDS时,会采用这个作为参数

http://{server.name}:{server.port}/{context.root}/messagebroker/amf

如果Context root错了,那么永远不可能正确的请求LCDS的服务了

确定后,我们来运行测试一下这个FlexLCDS项目是否能正常访问

6. 启动服务器

<oval id="_x0000_s1041" style="margin-top: 0px; z-index: 16; left: 0px; margin-left: 90pt; width: 36pt; position: absolute; height: 31.2pt; text-align: left;" strokeweight="2.25pt" strokecolor="red" filled="f"></oval><shape id="_x0000_i1038" style="width: 138pt; height: 24.75pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image023.png"></imagedata></shape>

稍等片刻,等到服务器完全启动后继续下面的操作

7. 运行访问

<shape id="_x0000_i1039" style="width: 294.75pt; height: 356.25pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image040.png"></imagedata></shape>

注:如果之前的Output folder url配置正确,那么会自动的弹出访问页面,DEBUG时也是一样。

<oval id="_x0000_s1040" style="margin-top: 6pt; z-index: 15; left: 0px; margin-left: 129.6pt; width: 315pt; position: absolute; height: 54.6pt; text-align: left;" strokeweight="2.25pt" strokecolor="red" filled="f"></oval><shape id="_x0000_i1040" style="width: 413.25pt; height: 120pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image043.png"></imagedata></shape>

OK,一切顺利,至此,你已经做到了第一步,即,将Flex项目、LCDS服务成功的整合至J2EE web 项目,这样的好处就是今后发布省的麻烦了。

五.简单的RemoteObject

1. 什么是RemoteObject

顾名思义,即远程对象。这里指的就是在Flex中获取Java里的对象。有什么用呢?这样Flex可以更加简单的获取服务端的数据,比如你在Java中有个方法进行了数据查询,取出的结果是Array类型,那么你可以很容易通过Flex里的RemoteObject访问到该类,并调用该方法,最后返回的数据是Flex也兼容的Array对象。

2. 新建Java

File -> new ->other(如果你没在列表中看到java class的话)

1). 新建向导1

<shape id="_x0000_i1041" style="width: 369pt; height: 371.25pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image045.png"></imagedata></shape>

2). 向导2

<oval id="_x0000_s1036" style="margin-top: 70.2pt; z-index: 11; left: 0px; margin-left: 108pt; width: 108pt; position: absolute; height: 31.2pt; text-align: left;" strokeweight="2.25pt" strokecolor="red" filled="f"></oval><shape id="_x0000_i1042" style="width: 372pt; height: 442.5pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image048.png"></imagedata></shape>

注意:别忘记了你设定的java源码根目录路径,如果对java不熟悉的话,这里我就不解释了,照着做吧。

3). 编写如下代码

package com.test;

public class FirstJavaClass {

public String sayHello(String str){

return "你说的是:"+str;

}

}

3. 配置Flex LCDSRemoting-config.xml

1). 他是remoteobject和相关远程访问的配置文件,路径位于

<oval id="_x0000_s1037" style="margin-top: 296.4pt; z-index: 12; left: 0px; margin-left: 99pt; width: 108pt; position: absolute; height: 23.4pt; text-align: left;" strokeweight="2.25pt" strokecolor="red" filled="f"></oval><shape id="_x0000_i1043" style="width: 189pt; height: 331.5pt;" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME%7E1%5CADMINI%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_image051.png"></imagedata></shape>

注意:现在LCDS是你的项目的一部分了,因此不用来回的在服务器中修改配置然后再发布了。

2). 改写其代码如下

<?xml version="1.0" encoding="UTF-8"?>

<service id="remoting-service"

class="flex.messaging.services.RemotingService">

<adapters>

<adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>

</adapters>

<default-channels>

<channel ref="my-amf"/>

</default-channels>

<destination id="FirstJavaClassRemoteObject">

<properties>

<source>com.test.FirstJavaClass</source>

<scope>application</scope>

</properties>

</destination>

</service>

说明:一个destination 指定的就是一个RO对象,他的id就是在FlexRO请求的destinationsource 指的是这个Java类的路径

注意:在修改了配置文件后可能需要重启web服务器(Tomcat

4. 编写mxml来请求RO

1). 打开MyFirstLCDS.mxml编写代码如下

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>

<![CDATA[

import mx.rpc.events.ResultEvent;

import mx.controls.Alert;

private function callRO(str:String):void{

firstRO.sayHello(str);

firstRO.addEventListener(ResultEvent.RESULT,getROResult);

}

private function getROResult(e:ResultEvent) :void {

Alert.show(e.result.toString());

}

]]>

</mx:Script>

<mx:RemoteObject id="firstRO" destination="FirstJavaClassRemoteObject"/>

<mx:Button click="callRO('hi~你好')" label="请求" />

</mx:Application>

2)OK






<!--新Google 468*60横幅广告开始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x60, 创建于 08-8-6 */ google_ad_slot = "7368701459"; google_ad_width = 468; google_ad_height = 60; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--新Google 468*60横幅广告结束-->

<!--新Google 468x15 横链接单元开始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x15 横链接单元 */ google_ad_slot = "5785741422"; google_ad_width = 468; google_ad_height = 15; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--新Google 468x15 横链接单元结束-->

<!-- Google Reader shared发布代码开始 --><script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script><script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&amp;callback=GRC_p(%7Bc%3A%22green%22%2Ct%3A%22%5Cu8FD9%5Cu4E9B%5Cu6587%5Cu7AE0%5Cu4E5F%5Cu503C%5Cu5F97%5Cu4E00%5Cu770B%22%2Cs%3A%22false%22%7D)%3Bnew%20GRC"></script><!-- Google Reader shared发布代码结束 -->

你可能感兴趣的:(java)