Flex 4.1 + BlazeDs + parsley框架(Demo实例)

这个项目使用的开发环境为MyEclipse10.7 + flashbuilder插件 + flex SDK 4.1 。如果flex SDK为4.5,程序好像并不能正确运行。

首先来看一下项目的目录组织结构,如下图:

Flex 4.1 + BlazeDs + parsley框架(Demo实例)_第1张图片

先来看一下Java代码的实现:

package com.model;

public class User {
	public String username;
	public String password;

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

}
package com.service;

import java.util.HashMap;

import com.model.User;

public class UserServiceImpl {
	
	public HashMap<String, String> login(User u) {
		System.out.println("调用我......");
		HashMap<String, String> hm = new HashMap<String, String>();
		hm.put("Result", "fail");
		return hm;
	}
}
很简单,不多说。需要在remote-config.xml文件中添加如下配置:

 <destination id="loginService">
       <properties>
          <source>
             com.service.UserServiceImpl
          </source>
       </properties>
    </destination>

接下来看一下Flex前台的代码实现:

首先用MXML实现一个登录页面,如下:(Main.mxml)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:events="events.*"
			   xmlns:win="windows.*"
			   xmlns:parsley="http://www.spicefactory.org/parsley"
			   >
	<fx:Declarations>
		<parsley:Configure/>
		<parsley:ContextBuilder>
			<parsley:FlexConfig type="{MainConfig}" />
		</parsley:ContextBuilder>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import events.LoginEvent;
			import model.LoginModel;
			import mx.controls.Alert;
			import mx.managers.PopUpManager;
			
			[Inject]
			[Bindable]
			public var lgModel:LoginModel=new LoginModel; //根据类型进行注入
			
			
			public function closeMe():void{
				PopUpManager.removePopUp(this);  // 移除窗口
			}
			
			protected function sendLogin():void{ // 进行登录操作
				lgModel.login(usernameField.text,passwordField.text);
			}
		]]>
	</fx:Script>
	
	<mx:Form>
		<mx:FormItem label="Username">
			<s:TextInput id="usernameField"  />
		</mx:FormItem>
		<mx:FormItem label="Password">
			<s:TextInput id="passwordField" displayAsPassword="true" />
		</mx:FormItem>
		<mx:FormItem>
			<s:Button label="Log In" click="sendLogin()" />
		</mx:FormItem>
	</mx:Form>
	
</s:Application>
在如上中LoginModel实例使用了parsley框架的属性注入。如下代码对此做了一些配置:(MainConfig.mxml)
<?xml version="1.0" encoding="utf-8"?>
<fx:Object xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   xmlns:model="model.*" 
			   xmlns:vo="vo.*"
			   xmlns:parsley="http://www.spicefactory.org/parsley">
	<fx:Script>
		<![CDATA[
			import service.LoginService;
			import utils.AmfUtil;
			
			[Bindable]
			public var amfUtil:AmfUtil = AmfUtil.getInstance();		
		]]>
	</fx:Script>
	
	<fx:Declarations>
	
	<s:RemoteObject id="loginServiceRO"
					showBusyCursor="true"
					destination="loginService"
					endpoint="{amfUtil.endpoint}"/>
	<parsley:Object type="{LoginService}" id="loginService" lazy="true"/>	
	<model:LoginModel/>
	<vo:User/>
		
	</fx:Declarations>
</fx:Object>
基中的<s:RemoteObject>标签中的配置表示调用后台的Java代码,而<parsley>标签配置了指出了MVC中的Service为LoginService,<model>指出模型层为LoginModel。
			   xmlns:model="model.*" 
			   xmlns:parsley="http://www.spicefactory.org/parsley">

AmfUtil.as文件源码如下:

package utils
{
	[Bindable]	
	public class AmfUtil
	{
		static private var instance:AmfUtil = null;
		
		public var endpoint:String;
		public var endpoint2:String;
		
		static public function getInstance():AmfUtil{
			if(instance == null){
				instance = new AmfUtil;
			}
			return instance;
		}
		
	}
}

User.as文件源码如下:

package vo
{

	[Bindable]
	[RemoteClass(alias="com.model.User")]
	public class User {               // RemoteClass指代的是后台中Java所对应的User
		public static const CHECK:String="check";
		
		[Selector]
		public var action:String; // Selector一定要写,否则不管用的
		
		public var username:String;
		public var password:String;
	}
}
LoginService.as文件源码如下:

package service
{
	import flash.events.EventDispatcher;
	import flash.events.IEventDispatcher;
	
	import mx.controls.Alert;
	import mx.rpc.*;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.remoting.RemoteObject;
	
	import vo.User;
	
	[Event(name="suc",type="events.LoginEvent")]
	[Event(name="fail",type="events.LoginEvent")]
	[ManagedEvents("suc,fail")]
	// 如下要继承EventDispatcher进行事件的接收
	public class LoginService extends EventDispatcher
	{
		[Inject(id="loginServiceRO")]
		public var ser:RemoteObject;
		
		// 构造函数
		public function LoginService(target:IEventDispatcher=null){
		  super(target);
		}
		
		[MessageHandler(selector="check")]  // 事件中的消息
		public function login(u:User):void{
		   Alert.show("dlkdjl");
		   var s:AsyncToken=ser.login(u);
		   s.addResponder(new AsyncResponder(suc,fail,s));
		}
		
		private function suc(event:ResultEvent,token:AsyncToken):void{
			Alert.show("成功");
		}
		
		private function fail(event:ResultEvent,token:AsyncToken):void{
			Alert.show("失败");
		}
	}
}
LoginEvent.as文件源码如下:

package events{
	import flash.events.Event;
	
	public class LoginEvent extends Event{
	public static const SUC:String = "suc";
	public static const FAIL:String = "fail";
		
    public var username:String;
    public var password:String;
    
		public function LoginEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false){
		  super(type, bubbles, cancelable);
		}
	}
}
LoginModel文件源码如下:

package model
{
	import mx.controls.Alert;
	
	import vo.User;

	[Bindable]
	public class LoginModel
	{
		[MessageDispatcher]
		public var sendMessage:Function;
		
		public function LoginModel()
		{
		}
		
		public function login(user:String,pwd:String):void{
		    var ur:User=new User;
			ur.username=user;
			ur.password=pwd;
			ur.action=User.CHECK;
			sendMessage(ur);
		}
		public function toString():String{
		    return "nmb";
		}
	}
}


















你可能感兴趣的:(Flex 4.1 + BlazeDs + parsley框架(Demo实例))