【叨、校长】基于Blazeds的Flex应用环境搭建

 

本教程基于Blazeds官方示例！通俗易懂、老少皆宜、不论男女！---叨、校长

1、新建一个Java Web Project---MyBlazeds

2、 添加Blazeds支持！

解压Blazeds.war文件，然后右击项目MyBlazeds的WebRoot文件夹—Import…

选择File System、然后找到刚刚解压的Blazeds文件路劲、选中解压后的文件blazeds

然后单击finished，这样就成功的添加了Blazeds的支持！当然也可以手动把blazeds文件复制到项目的webroot目录下！(详情查看图片附件)

 

3、  编写数据服务测试类、这里实现了一个查询、保存的功能！

a)   首现要定义一个持久化对象：本列使用：Person/**

 * 持久化对象Person 注意此类必须序列化、否则Actionscript无法进行转换
 * @author 叨、校长
 *
 */
public class Person implements Serializable{
	private static final long serialVersionUID = 9014182050509201925L;
	private String id;
	private String name;
	private int age;
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
}

 b)         编写一个业务逻辑方法、共Flex客户端调用:

 

/**
 * 业务逻辑类、提供查询、保存对象的方法
 * @author 校长
 *
 */
public class PersonService {
	//查询
	public List<Person> getPerList(String name,int start,int limit) {
		System.out.println("获取数据");
		List<Person> list=new ArrayList<Person>();
		int i=start;
		int total=start+limit;
		System.out.println(i);
		System.out.println(total);
		for(;i<=total;i++){
			int j=(i%10)*111;
			Person bean=new Person();
			bean.setId(i+"");
			bean.setName("@"+name+j);
			bean.setAge(i);
			list.add(bean);
		}
		return list;
	}
	//保存
	public Person savaPerson(Person person) {
		Person p=new Person();
		p.setId(person.getId());
		p.setName(person.getName());
		p.setAge(person.getAge());
		System.out.println("保存数据");
		return p;
	}
}

<!--[if !supportLists]-->c)         <!--[endif]-->然后在remoting-config.xml配置文件里面配置这个类

 

<?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>
    <!-- 配置RemoteObject对象的destination属性 -->
	<destination id="PersonService">
		<properties>
			<source>com.daodao.service.PersonService</source>
			<scope>request</scope>
		</properties>
	</destination>
</service>

 这样，服务器端就配置好了！destination属性可以配置多个！

4、Flex客户端配置：

下面列出主要的配置、as文件，其他的请大家查看附件！

添加一个Person.as类与服务器端的持久化对象绑定、这样AS就能自动把ASObject转换成java对象了

 

package com.daodao.bean
{
	//与远程java bean绑定 属性名、类名一致
	[Bindable]
	[RemoteClass(alias="com.daodao.bean.Person")]
	public class Person
	{
		public function Person()
		{
		}
		public var id:String;
		public var name:String;
		public var age:int;

	}
}

 

在编写一个proxy类、用于与远程服务器的交互

 

package com.daodao.proxy
{
	import com.daodao.bean.Person;
	
	import mx.controls.Alert;
	import mx.rpc.AsyncToken;
	import mx.rpc.remoting.RemoteObject;

	/**
	 * 业务逻辑代理
	 * 		与远程服务进行数据交互
	 * 		使用RemoteObject对象
	 */
	public class PersonProxy
	{
		private var myRemote:RemoteObject;
		
		//构造函数 初始化RemoteObject对象
		public function PersonProxy()
		{
			var destination:String=null;
			destination="PersonService";
			myRemote=new RemoteObject(destination); 
			
		}
		
		//通过RemoteObject调用远程服务的方法，返回一个AsyncToken
		public function getPersonList(name:String,start:int,limit:int):AsyncToken
		{
			return myRemote.getPerList(name,start,limit);
		}
		
		//通过RemoteObject调用远程服务的方法，返回一个AsyncToken
		public function savePerson(p:Person):AsyncToken
		{
			return myRemote.savaPerson(p);
		}
		
	}
}

 这里我给大家提供一个AsyncToken工具类、关于AsyncToken的用发请自行查阅相关资料！

 

package com.daodao.util
{
	import mx.rpc.AsyncToken;
	import mx.rpc.Responder;
	
	//
	public class FlexUtil
	{
		public function FlexUtil()
		{
		}
		
		public static function addRs(token:AsyncToken,result:Function,fault:Function):void
		{
			token.addResponder(new Responder(result,fault));
		}
	}
}

 这样我们就配置好了RemoteObject的逻辑方法！随时可以调用了！

下面我贴出所有的mxml代码

application：

 

<?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" minWidth="955" minHeight="600" xmlns:component="com.daodao.component.*" creationComplete="fillGrid()">
	<fx:Declarations>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import com.daodao.component.person.AddPerson;
			import com.daodao.proxy.PersonProxy;
			import com.daodao.util.FlexUtil;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.managers.PopUpManager;
			import mx.messaging.AbstractConsumer;
			import mx.rpc.AsyncToken;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			[Bindable]
			public var DG_Array:ArrayCollection; 
			public var token:AsyncToken; 
			public var proxy:PersonProxy=new PersonProxy();
			
			//查询数据方法
			public function fillGrid():void{
				var name:String=text_name.text;
				token=proxy.getPersonList(name,0,20);
				FlexUtil.addRs(token,getResult,getFault);
			}
			private function getResult(event:ResultEvent):void{
				DG_Array=ArrayCollection(event.result);
			}
			private function getFault(event:FaultEvent):void{
				Alert.show("没有数据！");
			}
			
			public function newAddWin():void
			{
				var add_per:AddPerson=new AddPerson();
				PopUpManager.addPopUp(add_per,this,true);
				PopUpManager.centerPopUp(add_per);
			}
		]]>
	</fx:Script>
	<mx:TabNavigator width="100%" height="100%">
		<mx:HDividedBox label="员工管理" width="100%" height="100%">
			<s:Panel width="15%" height="100%" title="功能菜单">
				
			</s:Panel>
			<mx:VBox width="85%" height="100%">
				<s:Panel title="查询" height="100" width="100%" top="10" left="10" right="30">
					<s:Label x="20" y="17" fontSize="18" text="姓名："/>
					<s:TextInput id="text_name" x="75" y="14"/>
					<s:Button id="btn_name" x="246" y="13" label="查询" click="fillGrid()"/>
					<s:Button x="369" y="11" label="新增" click="newAddWin()"/>
				</s:Panel>
				<mx:DataGrid id="dg" width="100%" height="100%" right="30" dataProvider="{DG_Array}">
					 <mx:columns>
						 <mx:DataGridColumn dataField="id" headerText="Name"/>
						 <mx:DataGridColumn dataField="name" headerText="Phone"/>
						 <mx:DataGridColumn dataField="age" headerText="Email"/>
					 </mx:columns>
				 </mx:DataGrid>
			</mx:VBox>
		</mx:HDividedBox>
		<mx:Box label="考勤管理" width="100%" height="100%">
			
		</mx:Box>
		<mx:Box label="系统管理" width="100%" height="100%">
			
		</mx:Box>
	</mx:TabNavigator>
</s:Application>

 AddPerson://添加对象时的一个Titlewindow组件

 

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" >
	<fx:Script>
		<![CDATA[
			import com.daodao.bean.Person;
			import com.daodao.proxy.PersonProxy;
			import com.daodao.util.FlexUtil;
			
			import mx.controls.Alert;
			import mx.events.CloseEvent;
			import mx.managers.PopUpManager;
			import mx.rpc.AsyncToken;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			
			private var proxy:PersonProxy=new PersonProxy();
			private var token:AsyncToken=new AsyncToken();
			
			private function savePerson():void
			{
				var per:Person=new Person();
				per.id=(f_text_id.text);
				per.name=(f_text_name.text);
				per.age=(2);
				token=proxy.savePerson(per);
				FlexUtil.addRs(token,getResult,getFault);
			}
			
			private function getResult(event:ResultEvent):void{
				var p_rs:Person=new Person();
				p_rs=event.result as Person;
				Alert.show("编号："+p_rs.id+"\n姓名:"+p_rs.name);
			}
			private function getFault(event:FaultEvent):void{
				Alert.show("没有数据！");
			}
			
			private function closeWin():void
			{
				PopUpManager.removePopUp(this);
			}
		]]>
	</fx:Script>
	<s:Form width="100%">
		<s:FormItem label="编号" width="100%">
			<s:TextInput id="f_text_id"/>
		</s:FormItem>
		<s:FormItem label="姓名" width="100%">
			<s:TextInput id="f_text_name"/>
		</s:FormItem>
		<s:FormItem label="年龄" width="100%">
			<s:TextInput  id="f_text_age"/>
		</s:FormItem>
		<s:Button label="保存" id="btn_save" click="savePerson()"/>
		<s:Button label="关闭" id="btn_close" click="closeWin()"/>
	</s:Form>
</s:TitleWindow>

 

到这里就完成了、效果图在图片附近里面有(Flex客户端源码也上传了！欢迎查阅！)