使用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> 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> GetAllFriends() { ArrayList> friendArr = new ArrayList>(); Connection conn = null; try { conn = MysqlConnection.GetInstance().GetConnection(); Statement stmt = conn.createStatement(); String sql = "select * from T_FriendInfo"; ResultSet rs = stmt.executeQuery(sql); Map friend; while(rs.next()) { friend = new HashMap(); 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> friendInfo = ds.AddFriend("gaoyuan", "123456"); if(friendInfo!=null) { Map 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

 

名称：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

 

名称：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一致，不清楚看我之前关于环境整合的文章。

 

 

名称：FriendView.mxml。

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

 

 

名称：cairngorm_demo.mxml。

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

 

 

最后，上个效果图：

 

 

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