- 测试管理页面的效果,java整合 flash builder + blazeds-4

技术概要：

Oracle 10g sp2 (可以支持Win7)

Web Logic 10

EJB 3

Flash Builder 4.5

blazeds-turnkey-4

一、???????Flash 写出OA管理页面,管理页面为单页系统,模块采用tab添加，加载内容的方式。

大致要做的几件事：

1.????????写出左右布局的管理页面

?

2.????????左为TreePanel 右为TabPanel,数据为测试用的模拟数据，由java返回。

?

3.????????实现点击树后创建TabPanel,在TabPanel里加载Grid或其它类型的内容;

?

4.????????实现CRUD效果，实现分页效果

?

5.????????PS出管理页面，导入到 Flash Catalyst? --> 再到Flash Builder

?

???????? 我个人做项目喜欢逐步测试，做一点测一点。这里我先测试选项构想的是否可靠可行，例如创建TabPanel的方式、TabPanel再加载内容的方式，是不是可靠，可行，代码量多不多，速度，性能是不是我满意的，如果不满意，将换其它的方式，所以这里先测试一下开发这个管理页面。

?

(一)???????创建测试项目服务端：

我的myeclipse 已经整合了FlashBuilder 4.5，我的blog上也有记载，这里就不重复了.

myeclipse创建一个java web项目，java ee版本6.0，其它无所谓，暂时用不上其它的技术，直接完成,如下图:

java ee6可以支持web3.0，java自己的webservice等，好处多多，东东边用边学吧，这样快。

myeclipse版本为9,不然不能支持java ee 6,电驴上有下载。

(二)???????java 整合 flashbuilder 4.5

1.?????添加blazeds支持

下载blazeds，官方下载，免费，去吧。

俺下的是blazeds-turnkey-4.0.0.14931.zip，解开下载后的压缩文件，再解开blazeds.war文件，把lib、flex两个目录拷到"测试项目服务端"的WEB-INF下面。

version.properties文件一看就知道没用，项目的时候，可能有几个jar也没用，到时再删吧。

blazeds支持基本需要的文件到位，接着就是配置。

2.?????配置web.xml

直接把解压后的blazeds.war里的web.xml文件里的源码拷过来，这里没有直接在前一步拷贝文件，是不想覆盖掉web3.0的头文件声明，刚才创建的是web3.0的java项目，头文件声明不一样，注意！

拷贝的源码如下：

??? <listener> ??????? <listener-class>flex.messaging.HttpFlexSession</listener-class> ??? </listener> ? ??? <!-- MessageBroker Servlet --> ??? <servlet> ??????? <servlet-name>MessageBrokerServlet</servlet-name> ??????? <display-name>MessageBrokerServlet</display-name> ??????? <servlet-class>flex.messaging.MessageBrokerServlet</servlet-class> ??????? <init-param> ??????????? <param-name>services.configuration.file</param-name> ??????????? <param-value>/WEB-INF/flex/services-config.xml</param-value> ??????? </init-param> ??????? <load-on-startup>1</load-on-startup> ??? </servlet> ? ??? <servlet-mapping> ??????? <servlet-name>MessageBrokerServlet</servlet-name> ??????? <url-pattern>/messagebroker/*</url-pattern> ??? </servlet-mapping>

?

3.?????配置

打开web-inf/flex/remoting-config.xml,把原有的destination全删了， 添加如下代码：

<destination id="TestSimple"> ??????? <properties> ??????????? <source>com.gwtjs.flash.test.Simple</source> ??????? </properties> ??? </destination>

?

创建一个com.gwtjs.flash.test.Simple?

代码如下：

package com.gwtjs.flash.test; ? public class Simple { ??? ??? public String helloWorld(){ ??????? ??????? return "helloWorld"; ??? } }

?

???????? 经典的HelloWorld程序，只为测试flash连接java而已，后续还会再添加Tree和Grid需要用到的类。

?

4.?????创建Java Client ，Flash Builder 项目

这个项目属于刚才的服务端的客户端设计项目,如下：

注意创建前需要先启动服务端的服务，先拿猫顶吧，后面会换成WebLogic

?

1)????????输入项目名称“OATest1Client”，Next;?

2)????????到服务器设置页面,服务器类型为Java 访问服务的对象为BlazeDS(B)

?

3)????????根文件夹: D:MyEclipse9OATest1web，为刚才创建的Java服务端web下面的路径，可以根据需要往web下面再指定，这样可以把分工再细一点。

4)????????上下文根目录：/OATest1

5)????????根URL:相对于服务路径，如: http://localhost:8282/OATest1

6)????????输出文件夹：D:MyEclipse9OATest1web

配置完了，就可以验证一下。

这样指定路径意为把flash builder的swf文件等生成到服务端目录下面去。

(三)???????编写Flash Builder页面,开始测试java和flash builder交互

我在创建Flash client项目时顺便把默认的页面改名叫index.mamx

?

到application，录入creationComplete="creationCompleteHandler(event)"

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"creationComplete="creationCompleteHandler(event)"

??????????? ?? xmlns:s="library://ns.adobe.com/flex/spark"

??????????? ??xmlns:mx="library://ns.adobe.com/flex/mx"minWidth="955" minHeight="600">

快捷提示：

鼠标定位到application按alt+/输入一个c,可以代码提示并生成一个函数，不满意函数名可以马上修改，同时也可以修改生成的函数名，挺智能的。

?

说明：creationComplete为页面载入时执行的事件，相当于js的window.onload,也相当于extjs的Ext.onReady。

这里是直接在页面加载时就执行调用java程序。

?

写远程数据连接，代码如下：

<fx:Declarations>

??????? <!-- 将非可视元素（例如服务、值对象）放在此处 -->

??????? <s:RemoteObject id="helloWorldTest"destination="TestSimple"fault="remoteobject1FaultHandler(event)"result="remoteobject1ResultHandler(event)"/>

??? </fx:Declarations>

?

页面载入时执行的函数添加提交远程请求的语句，如下

protected functioncreationCompleteHandler(event:FlexEvent):void{

??????????????? //helloWorldTest为RemoteObject的ID; helloWorld()为java的方法

??????????????? helloWorldTest.helloWorld();

??????????? }

?

fault为失败时调用的方法;

?

result为正常情况的返回，同样也可以alt+/提示来选择，同样也可以生成方法，同样不满意当场可以修改，并更新了引用。

?

显示远程返回的数据：

切换设计视图，页面丢一个Label组件

切换代码视图，定义一个变量，并绑定。这里就开通接触绑定了，后面会大量用到。

?

完整的代码：

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" creationComplete="creationCompleteHandler(event)" ??????????? ?? xmlns:s="library://ns.adobe.com/flex/spark" ??????????? ?? xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> ??? <fx:Script> ??????? <![CDATA[ ??????????? import mx.controls.Alert; ??????????? import mx.events.FlexEvent; ??????????? import mx.rpc.events.FaultEvent; ??????????? import mx.rpc.events.ResultEvent; ??????????? ??????????? [Bindable] ??????????? private var heResult:String = null; ??????????? ??????????? protected function creationCompleteHandler(event:FlexEvent):void{ ??????????????? //helloWorldTest为RemoteObject的ID; helloWorld()为java的方法 ??????????????? helloWorldTest.helloWorld(); ??????????? } ??????????? ??????????? protected function remoteobject1FaultHandler(event:FaultEvent):void{ ??????????????? trace("请求失败了,错误如下：n",event.fault.faultDetail.toString()); ??????????????? ??????????? } ??????????? ??????????? protected function remoteobject1ResultHandler(event:ResultEvent):void ??????????? { ??????????????? heResult = event.result.toString(); ??????????????? ??????????? } ??????????? ??????? ]]> ??? </fx:Script> ??? <fx:Declarations> ??????? <!-- 将非可视元素（例如服务、值对象）放在此处 --> ??????? <s:RemoteObject id="helloWorldTest" destination="TestSimple" fault="remoteobject1FaultHandler(event)" result="remoteobject1ResultHandler(event)"/> ??? </fx:Declarations> ??? <s:Label x="485" y="195" text="{heResult}"/> ??? <s:TextInput x="501" y="321" text="{heResult}"/> </s:Application> ?

???????? 测试连接成功完成，也希望你完成，下一步就开始完成管理页面：设计页面，并从java取回Tree、Grid的数据，数据为模拟数据，视图为模拟想要的效果。不要小瞧模拟，首先我想看看这样的搞法我打多少分，OA的开发只是在此基本上扩展。

???????? 这种搞法，老板看到头痛死，“你这样搞我工资都要亏死”,呵呵。。。

?

???????? 以上没有用框架，没有用接口，直接用的类，而且连接数据的配置也不是调用的spring自动注入的接口，而是直接引用的类路径。怎么快，怎么搞。如果用到spring + hibernate可以参考我先前的一篇文章，地址是：http://blog.csdn.net/flash8627/article/details/6788422

?

(四)???????设计管理页面

1.?????页面布局、组件设计

新页面也好、index.maml也好，切换到FlashBuilder透视图（图1），并切换到mamx文件的设计视图（图2），点击空白区域，打开flash组件面板,设置如图3,主要是设置了页面垂直布局边距左右3px上下无。这样可以自动适应浏览器。

?

?
图1myeclipse右上角，切换透视图	图2	?
?	?	?
?	?
图3	?	?

?

管理页面大概的布局构思：

退出等按钮区 LOGO,企业名称? 用户名等信息 工作提醒或其它提示信息区
折叠面板，Tree等管理菜单	主内容区域
版权(版本)信息

?

???????? 布局构想是这样，但先前不会做得这么细，后面会用Photoshop、Catalyst配合着细致的设计一下

?

添加布局

连续在组件面板中拖三个BorderContainer组件，分别取ID名为top、myContainer、bottom,也就是头、内容(我的容器)、底部

?

修改参数：

头尾定义高度单位为像素，中间定义为百分比，并将布局调整为： HorizontalLayout(水平布局),想的是自适应效果。宽度统一为100%。

?

添加tree面板、主内容面板

拖动导航器下的Accordion组件到myContainer里面，定义宽度随意吧。单位用px;高度为100%;

可以顺手添加两个内容面板;我顺手添加了一个模块导航和一个权限管理两个

?

拖动导航器下的TabNavigator组件到myContainer里面，定义宽度用100%;高度为100%,铺满视图,也可顺手添加两个tab标签。

?

???????? 运行服务器，呵呵，效果已经出来了，如下图

???????? 调整浏览器窗口大小试一下，可以自动适应大小，但，有最小的值;没有数据，也很单调，不过没事，马上就跟上。边框啊，什么的，自己调整一下。选择要调整的组件，看看属性面板！！！

待续......