使用Cairngorm开发Flex（二）：一个好友管理例子

这里我们继续Cairngorm的介绍，认识了什么是Cairngorm以后，我们来实现一个demo。跟着一步步做先来的话，相信会对这个框架的使用有更深的理解。

需要准备：

在看这个例子之前，确保具备以下条件：

1. 读懂了使用Cairngorm开发Flex（一），理解Cairngorm的构架是怎样的。
2. 具有一定的java知识。
3. 知道flex sdk4。

例子的环境和工具：

1. Flex builder 4。下载很容易找到。这个例子也是我用flex4写的第一个例子，发现跟flex3很多不同，要重新学习，痛苦的转型啊，泪奔~。
2. Mysql数据库。
3. tomcat。
4. blazeds。

不知道怎么配置的可以看我的文章：http://blog.csdn.net/duran1986/archive/2010/03/29/5430329.aspx

例子功能描述：

功能很简单，在前端添加好友（名字，电话），将好友信息发送到java编写的后台，存储到数据库，成功的话返回所有好友到客户端显示。

数据库sql：

新建一个mysql数据库，名字叫：CairngormDemo。在数据库下执行下面sql建表：

CREATE TABLE `cairngormdemo`.`T_FriendInfo` ( `fid` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, `fname` VARCHAR(45) NOT NULL, `ftel` VARCHAR(45) NOT NULL, PRIMARY KEY (`fid`))ENGINE = InnoDB; 

后台java：

项目结构：

 

 

 

MysqlConnection.java:

 package com.gy.demo;//导入sql类import java.sql.Connection;import java.sql.DriverManager;public class MysqlConnection {//定义静态的实例，该实例是程序运行时的唯一实例private static MysqlConnection instance;private MysqlConnection() {//调用数据库驱动try {Class.forName("com.mysql.jdbc.Driver");}catch(ClassNotFoundException e) {e.printStackTrace();}}//对外接口，获得唯一实例public static MysqlConnection GetInstance() {if(instance == null) {instance = new MysqlConnection();}return instance;}//获得数据库连接public Connection GetConnection() throws java.sql.SQLException {//定义数据库信息String dbServer = "localhost";String dbName = "CairngormDemo";String dbUser = "root";String dbPass = "860116";//构造连接字符串，设置编码String connStr = "jdbc:mysql://"+dbServer+"/"+dbName+"?user="+dbUser+"&password="+dbPass+"&useUnicode=true&characterEncoding=utf8";//返回连接return DriverManager.getConnection(connStr);}}

 

DemoService.java

package com.gy.demo;import java.sql.Connection;import java.sql.ResultSet;import java.sql.SQLException;import java.sql.Statement;import java.util.ArrayList;import java.util.HashMap;import java.util.Map;import com.gy.demo.MysqlConnection;public class DemoService {public ArrayList<Map<String,Object>> AddFriend(String name , String tel){String sql = "insert into T_FriendInfo(fname,ftel) values(/'"+name+"/',/'"+tel+"/')";System.out.println(sql);int result = 0;Connection conn = null;try{conn = MysqlConnection.GetInstance().GetConnection();Statement stmt = conn.createStatement();result = stmt.executeUpdate(sql);}catch(SQLException e){e.printStackTrace();}finally{try{conn.close();}catch(Exception e){e.printStackTrace();}}if(result==0) return null;return this.GetAllFriends();}public ArrayList<Map<String,Object>> GetAllFriends(){ArrayList<Map<String,Object>> friendArr = new ArrayList<Map<String,Object>>();Connection conn = null;try{conn = MysqlConnection.GetInstance().GetConnection();Statement stmt = conn.createStatement();String sql = "select * from T_FriendInfo";ResultSet rs = stmt.executeQuery(sql);Map<String,Object> friend;while(rs.next()){friend = new HashMap<String,Object>();friend.put("fname", rs.getString("fname"));friend.put("ftel", rs.getString("ftel"));friendArr.add(friend);}}catch(SQLException e){friendArr = null;e.printStackTrace();}finally{try{conn.close();}catch(Exception e){e.printStackTrace();}}return friendArr;}}

 

ProgramEnter.java（测试用）：

package com.gy.demo;import java.util.ArrayList;import java.util.Map;public class ProgramEnter {public static void main(String[] args) {DemoService ds = new DemoService();ArrayList<Map<String,Object>> friendInfo = ds.AddFriend("gaoyuan", "123456");if(friendInfo!=null){Map<String,Object> f = friendInfo.get(0);System.out.println("fname:"+f.get("fname")+";ftel:"+f.get("ftel"));}}}

 

可以运行测试程序来测试是否正确。

 

 重头戏Flex：

启动flex builder4，新建个项目，这个项目依然使用到blazeds，相关环境的配置看http://blog.csdn.net/duran1986/archive/2010/03/29/5430329.aspx。项目设置如下：

 

第一步:新建项目，注意选择服务器类型为j2ee。

 

 

第二步：配置服务器，这里不清楚的看我之前关于环境配置那片文章就行了。

 

 

第三步：这里点添加swc，把我们的cairngorm包加进来。

 

第四步：工程建好以后，建立以下的文件结构：

 

 

现在贴上每部分的代码：

 

名称：FriendVO.as。

说明：对象建模，对应数据库里的对象。

package com.gy.demo.vo{public class FriendVO{public var name:String;public var tel:String;}} 

 

名称：AppModelLocator.as。

说明：对应cairngorm框架里的model locator模块，保存运行时数据，必须可绑定。

package com.gy.demo.model{import com.adobe.cairngorm.model.ModelLocator;import mx.collections.ArrayCollection;public class AppModelLocator implements ModelLocator{private static var _instance:AppModelLocator;[Bindable]public var friendsArr:ArrayCollection = new ArrayCollection();public static function GetInstance():AppModelLocator{if(_instance==null){_instance = new AppModelLocator();}return _instance;}}} 

 

名称：AddFriendController.as

说明：对应control模块，只负责将command与对应的时间绑定，这里把AddFriendsEvent事件和AddFriendCommand绑定。

package com.gy.demo.control{import com.adobe.cairngorm.control.FrontController;import com.gy.demo.event.AddFriendEvent;import com.gy.demo.command.AddFriendCommand;public class AddFriendController extends FrontController{public function AddFriendController(){addCommand(AddFriendEvent.EVENT_ADD_FRIEND,AddFriendCommand);}}} 

 

名称：GetFriendsController.as。

说明：对应control模块，只负责将command与对应的时间绑定，这里把GetFriendsEvent事件和GetFriendsCommand绑定。

package com.gy.demo.control{import com.adobe.cairngorm.control.FrontController;import com.gy.demo.event.GetFriendsEvent;import com.gy.demo.command.GetFriendsCommand;public class GetFriendsController extends FrontController{public function GetFriendsController(){addCommand(GetFriendsEvent.EVENT_GET_FRIEND,GetFriendsCommand);}}} 

 

名称：AddFriendCommand.as。

说明：捕获添加事件后的响应模块，这里负责调用delegate模块，还有得到返回结果的相应处理也在这里完成。这里添加成功后返回所有朋友的信息，我们要更新modellocator。

package com.gy.demo.command{import com.adobe.cairngorm.commands.ICommand;import com.adobe.cairngorm.control.CairngormEvent;import com.gy.demo.delegate.AddFriendDelegate;import com.gy.demo.event.AddFriendEvent;import com.gy.demo.model.AppModelLocator;import com.gy.demo.vo.FriendVO;import mx.collections.ArrayCollection;import mx.rpc.IResponder;import mx.controls.Alert;public class AddFriendCommand implements ICommand, IResponder{private var model:AppModelLocator = AppModelLocator.GetInstance();public function execute(event:CairngormEvent):void{var addFriendDelegate:AddFriendDelegate = new AddFriendDelegate(this);var addFriendEvent:AddFriendEvent = AddFriendEvent(event);addFriendDelegate.AddFriend(addFriendEvent.friendVO);}public function result(data:Object):void{var resultArr:ArrayCollection = data.result;if(resultArr != null){model.friendsArr.removeAll();for(var i:int=0 ; i<resultArr.length ; i++){var friend:FriendVO = new FriendVO();friend.name = resultArr.getItemAt(i).fname;friend.tel = resultArr.getItemAt(i).ftel;model.friendsArr.addItem(friend);}return;}Alert.show("添加失败");}public function fault(info:Object):void{Alert.show(info.toString());}}} 

 

名称：GetFriendsCommand.as。

说明：捕获到GetFriendsEvent事件以后的响应模块。负责获取所有朋友信息，返回结果后更新modellocator。

package com.gy.demo.command{import com.adobe.cairngorm.commands.ICommand;import com.adobe.cairngorm.control.CairngormEvent;import com.gy.demo.delegate.GetFriendsDelegate;import com.gy.demo.event.GetFriendsEvent;import com.gy.demo.model.AppModelLocator;import com.gy.demo.vo.FriendVO;import mx.collections.ArrayCollection;import mx.rpc.IResponder;import mx.controls.Alert;public class GetFriendsCommand implements ICommand, IResponder{private var model:AppModelLocator = AppModelLocator.GetInstance();public function execute(event:CairngormEvent):void{var getFriendsDelegate:GetFriendsDelegate = new GetFriendsDelegate(this);var getFriendsEvent:GetFriendsEvent = GetFriendsEvent(event);getFriendsDelegate.GetFriends();}public function result(data:Object):void{var resultArr:ArrayCollection = data.result;if(resultArr != null){model.friendsArr.removeAll();for(var i:int=0 ; i<resultArr.length ; i++){var friend:FriendVO = new FriendVO();friend.name = resultArr.getItemAt(i).fname;friend.tel = resultArr.getItemAt(i).ftel;model.friendsArr.addItem(friend);}}}public function fault(info:Object):void{Alert.show("error！");}}} 

 

名称：AddFriendDelegate.as。

说明：被command模块调用，通过获得service模块里的对象来进行前后台通讯。

package com.gy.demo.delegate{import com.adobe.cairngorm.business.ServiceLocator;import com.gy.demo.vo.FriendVO;import mx.rpc.AsyncToken;import mx.rpc.IResponder;public class AddFriendDelegate{private var responder:IResponder;private var service:Object;public function AddFriendDelegate(res:IResponder){this.service = ServiceLocator.getInstance().getRemoteObject("CairngormDemoService");this.responder = res;}public function AddFriend(friend:FriendVO):void{var call:AsyncToken = service.AddFriend(friend.name,friend.tel);call.addResponder(this.responder);}}} 

 

名称：GetFriendsDelegate.as。

说明：被command模块调用，通过获得service模块里的对象来进行前后台通讯。

package com.gy.demo.delegate{import com.adobe.cairngorm.business.ServiceLocator;import mx.rpc.IResponder;import mx.rpc.AsyncToken;public class GetFriendsDelegate{private var responder:IResponder;private var service:Object;public function GetFriendsDelegate(res:IResponder){this.service = ServiceLocator.getInstance().getRemoteObject("CairngormDemoService");this.responder = res;}public function GetFriends():void{var call:AsyncToken = service.GetAllFriends();call.addResponder(this.responder);}}} 

 

名称：AddFriendEvent.as。

说明：自定义事件，不多解释。

package com.gy.demo.event{import com.adobe.cairngorm.control.CairngormEvent;import com.gy.demo.vo.FriendVO;public class AddFriendEvent extends CairngormEvent{public var friendVO:FriendVO;public static const EVENT_ADD_FRIEND:String = "addFriend";public function AddFriendEvent(friendVO:FriendVO){super(AddFriendEvent.EVENT_ADD_FRIEND);this.friendVO = friendVO;}}} 

 

名称：GetFriendsEvent.as。

说明：自定义事件，不多解释。

package com.gy.demo.event{import com.adobe.cairngorm.control.CairngormEvent;public class GetFriendsEvent extends CairngormEvent{public static const EVENT_GET_FRIEND:String = "getFriend";public function GetFriendsEvent(){super(EVENT_GET_FRIEND);}}} 

 

名称：ServiceLocator.mxml。

说明：在这里定义远程访问对象，这里的destination要和blazeds里面remote-config.xml里面的destination一致，不清楚看我之前关于环境整合的文章。

<?xml version="1.0" encoding="utf-8"?><cairngorm:ServiceLocator 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:cairngorm="http://www.adobe.com/2006/cairngorm"><fx:Declarations><s:RemoteObject id="CairngormDemoService" destination="CairngormDemoService" /></fx:Declarations></cairngorm:ServiceLocator> 

 

名称：FriendView.mxml。

说明：UI模块，在这里显示用户接口，没什么特别。

<?xml version="1.0" encoding="utf-8"?><mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()" layout="absolute" width="404" height="304"><fx:Script><![CDATA[import com.adobe.cairngorm.control.CairngormEventDispatcher;import com.gy.demo.event.AddFriendEvent;import com.gy.demo.event.GetFriendsEvent;import com.gy.demo.model.AppModelLocator;import com.gy.demo.vo.FriendVO;import mx.collections.ArrayCollection;[Bindable]public var friendsArr:ArrayCollection = new ArrayCollection();public function AddFriend():void{var friendVO:FriendVO = new FriendVO();friendVO.name = txt_name.text;friendVO.tel = txt_tel.text;var addEvent:AddFriendEvent = new AddFriendEvent(friendVO);CairngormEventDispatcher.getInstance().dispatchEvent(addEvent);this.Reset();}private function Reset():void{txt_name.text = "";txt_tel.text = "";}private function init():void{var getEvent:GetFriendsEvent = new GetFriendsEvent();CairngormEventDispatcher.getInstance().dispatchEvent(getEvent);}]]></fx:Script><fx:Declarations><!-- 将非可视元素（例如服务、值对象）放在此处 --></fx:Declarations><mx:Form x="0" y="0" width="398" height="114"><mx:FormItem label="name:"><s:TextInput id="txt_name" /></mx:FormItem><mx:FormItem label="tel:"><s:TextInput id="txt_tel" /></mx:FormItem><mx:FormItem><s:Button label="添加" click="AddFriend()" /></mx:FormItem></mx:Form><mx:DataGrid x="0" y="117" width="398" height="152" dataProvider="{friendsArr}"><mx:columns><mx:DataGridColumn headerText="名字" dataField="name" /><mx:DataGridColumn headerText="电话" dataField="tel" /></mx:columns></mx:DataGrid></mx:Panel> 

 

名称：cairngorm_demo.mxml。

说明：程序入口，是整个框架整合的关键，注意这里面定义的三个命名空间，把control和service都实例化。

<?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:control="com.gy.demo.control.*" xmlns:view="com.gy.demo.view.*" xmlns:service="com.gy.demo.service.*" minWidth="955" minHeight="600"><s:layout><s:VerticalLayout horizontalAlign="center"/></s:layout><fx:Declarations><service:ServiceLocator /><control:AddFriendController /><control:GetFriendsController /></fx:Declarations><fx:Script><![CDATA[import com.gy.demo.model.AppModelLocator;[Bindable]public var model:AppModelLocator = AppModelLocator.GetInstance();]]></fx:Script><view:FriendView id="friendView" friendsArr="{model.friendsArr}" /></s:Application> 

 

最后，上个效果图：

 

 

例子就到这里，觉得麻烦想要源码的，留下邮箱吧，见到必发^^