测试管理方法之Flash Builder 4.5 开发 OA

测试管理方法之Flash Builder 4.5 开发 OA - 1

凌雪 2018-08-22 来源：网络阅读 790 评论 0

摘要：本文将带你了解测试管理方法之Flash Builder 4.5 开发 OA - 1，希望对大家学测试管理有所帮助

本文将带你了解测试管理方法之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>

    
    <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:相对于服务路径，如: //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="//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="//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可以参考我先前的一篇文章，地址是：//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标签。

         运行服务器，呵呵，效果已经出来了，如下图
         调整浏览器窗口大小试一下，可以自动适应大小，但，有最小的值;没有数据，也很单调，不过没事，马上就跟上。边框啊，什么的，自己调整一下。选择要调整的组件，看看属性面板！！！
待续......