Flash Builder 4.5 开发 OA - 1

- 测试管理页面的效果,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:\MyEclipse9\OATest1\web，为刚才创建的Java服务端web下面的路径，可以根据需要往web下面再指定，这样可以把分工再细一点。

4)        上下文根目录：/OATest1

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

6)        输出文件夹：D:\MyEclipse9\OATest1\web\

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

这样指定路径意为把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标签。

 

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

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

待续......