代码改变世界

.NET程序员也用JAVA:使用BlazeDS,SpringFramework,MySql,Flex构建RIA应用 part 3 :Flex及As 3代码编写

2009-01-14 18:07  Otis's Technology Space  阅读(647)  评论(0编辑  收藏  举报

Flex这边要有一个实体类和Java的实体类对应,用来存放Java传回的数据和把数据传给Java处理.在这里我们创建了一个Java的User的实体类,所以在Flex这边也要有这样一个User实体类..这个类的代码如下:

package cn.otis.flex.model
{
    [Bindable]
    [RemoteClass(alias="cn.otis.spring.model.User")]    
    public class User
    {
        public var id:int;
        public var userName:String;
        public var password:String;
        //public var note:String;
        public var note:String;
    }
}

[RemoteClass(alias="cn.otis.spring.model.User")]  这句的意思是说这个类对应Java的cn.otis.spring.model.User类.

[Bindable] 这句的意思是说这个as 3类是可以绑定的..

只是用这个类来传送数据,所以public 也可以了.. 不用都写成geter ,seter.

有了这个类之后,就可以写Mxml了..

我们要实现的UI如下图:

image

一开始让他获取所有用户. 然后左边是添加用户.

我贴出所有的mxml代码:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" horizontalAlign="center"
     width="100%" height="100%" initialize="init()">
   
 <mx:Script>
        <![CDATA[
            import mx.controls.*;
            import mx.rpc.events.*;
            import cn.otis.flex.model.*;
            import mx.collections.ArrayCollection;

            [Bindable]
            private var users:ArrayCollection;
            [Bindable]
            private var u:User = new User();
            private function init():void{
                this.getUsers();
            }    
            private function addUser():void{
                u.userName = tb_userName.text;
                u.password = tb_password.text;
                u.note = tb_note.text;
                ro_userService.addUser(u);
                ro_userService.removeEventListener(ResultEvent.RESULT,resultHandler);
                ro_userService.removeEventListener(FaultEvent.FAULT,faultHandler);
                ro_userService.addEventListener(ResultEvent.RESULT,addUserEventOK);
                ro_userService.addEventListener(FaultEvent.FAULT,addUserEventFail);
            }
            private function addUserEventOK(event:ResultEvent):void{
                this.getUsers();
            }
            private function addUserEventFail(event:FaultEvent):void{
                Alert.show("调用失败!" + event.message);
            }
            
            private function getUsers():void{
                
                
                ro_userService.getUsers();
                ro_userService.removeEventListener(ResultEvent.RESULT,addUserEventOK);
                ro_userService.removeEventListener(FaultEvent.FAULT,addUserEventFail);
                ro_userService.addEventListener(ResultEvent.RESULT,resultHandler);
                ro_userService.addEventListener(FaultEvent.FAULT,faultHandler);
            }
            private function resultHandler(event:ResultEvent):void
            {
                users = event.result as ArrayCollection;
            }
            
            private function faultHandler(event:FaultEvent):void
            {
                Alert.show(event.fault.faultString);
            }
            
        ]]>
    </mx:Script>

    <mx:RemoteObject id="ro_userService" showBusyCursor="true" destination="ser_UsersService"/>

    
    <mx:Panel width="1000" height="430" layout="absolute" id="addUserPanel" title="增加用户" cornerRadius="8">
        <mx:Text text="新增加用户" fontWeight="bold" x="191" y="60"/>
        <mx:Label text="用户名:" x="179" y="86"/>
        <mx:Label text="简介:" x="179" y="143"/>
        <mx:Label text="密码:" x="179" y="113"/>
        <mx:TextInput x="224" y="84" id="tb_userName"/>
        <mx:TextInput x="224" y="111" id="tb_password" displayAsPassword="true"/>
        <mx:TextArea height="111" id="tb_note" x="224" y="142"/>
        <mx:Button x="267" y="261" label="增加" click="addUser()" id="btn_add"/>
        <mx:DataGrid id="dg" dataProvider="{users}" width="388" height="243" x="425" y="40"/>
        <mx:Button label="Get Data" click="getUsers()" x="580" y="291"/>
        
    </mx:Panel>
    
</mx:Application>

<mx:RemoteObject id="ro_userService" showBusyCursor="true" destination="ser_UsersService"/>  新建一个remoteObject对象, 设定他的ID.然后要注意思的是destination这个属性,这个是跟另外一个文件相关联的.. 这个文件就是 remoting-config.xml . 这个文件在WebRoot>WEB-INF>flex下.这个文件要加入以下一些配置, 这里我是贴上了该文件的完整内容.

<?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="ser_UsersService">
        <properties>
            <source>cn.otis.spring.service.UsersService</source>
        </properties>
    </destination>
</service>

destination  这里是跟flex的RemotingObject的destination 属性对应的.

所以要: <mx:RemoteObject id="ro_userService" showBusyCursor="true" destination="ser_UsersService"/> 这样设置, 然后,ro_userService就可以调用cn.otis.spring.service.UsersService类的任何public方法了.

 private function getUsers():void{
                
                
                ro_userService.getUsers(); //调用cn.otis.spring.service.UsersService类的getUsers方法
                ro_userService.removeEventListener(ResultEvent.RESULT,addUserEventOK);
                ro_userService.removeEventListener(FaultEvent.FAULT,addUserEventFail);
                ro_userService.addEventListener(ResultEvent.RESULT,resultHandler);
                ro_userService.addEventListener(FaultEvent.FAULT,faultHandler);
            }
            private function resultHandler(event:ResultEvent):void
            {
                users = event.result as ArrayCollection;
            }
            
            private function faultHandler(event:FaultEvent):void
            {
                Alert.show(event.fault.faultString);
            }

这里.

ro_userService.removeEventListener(ResultEvent.RESULT,addUserEventOK); ro_userService.removeEventListener(FaultEvent.FAULT,addUserEventFail); ro_userService.addEventListener(ResultEvent.RESULT,resultHandler); ro_userService.addEventListener(FaultEvent.FAULT,faultHandler);

其实不应该这样写的.只要创建两个RemotingObject对象就可..

一开始以为建一个RemotingObject就好了.所以就写成这样了..

这个小例子算是完成了..之后会做另外的例子.. 使用MS sql server 2005的Northwind数据库来做例子.. 因为我坚信,学习技术的最好方式和最有挑战性的方式是在做项目中学习. 呵.

下面测试一下..

image

添加用户.

^_^.