菜鸟学编程第六式——Flex编程环境搭建及实例图解2

1.1     Flex编程实例

2.2.1设计

1、我们的目标是建立几个简单的网页来显示、添加、修改、删除用户；

2、客户端建立以下几个网页：

页面ShowUser. mxml显示数据库中的所有用户

页面AddUser. mxml添加用户

页面EditUser. mxml修改用户信息

2.2.2服务器端编程

1、说明

服务器端编程主要是利用FluorineFx实现数据库的操作。

2、UserDAO.cs内容如下：

using System; using FluorineFx.AMF3; using System.Data; using Robin.BDU; using System.Data.SqlClient; namespace Robin.DAL { public class UserDAO { #region GetInstance() private static UserDAO Instance; public static UserDAO GetInstance() { if (Instance == null) { lock (typeof(UserDAO)) { if (Instance == null) { Instance = new UserDAO(); } } } return Instance; } #endregion #region GetAllUser() public ArrayCollection GetAllUser() { ArrayCollection array = new ArrayCollection(); string sql = "select UserId,UserName,UserPsd,UserDetail from DUser "; IDataReader rdr = DataAccess.ExcuteReader(sql,null); while (rdr.Read()) { UserUnit unit = new UserUnit(); unit.UserId = (rdr[0] != DBNull.Value) ? rdr.GetInt32(0) : 0; unit.UserName = (rdr[1] != DBNull.Value) ? rdr.GetString(1) : null; unit.UserPsd = (rdr[2] != DBNull.Value) ? rdr.GetString(2) : null; unit.UserDetail = (rdr[3] != DBNull.Value) ? rdr.GetString(3) : null; array.Add(unit); } return array; } #endregion #region GetUser(string userId) public UserUnit GetUser(string userId) { string sql = "select UserId,UserName,UserPsd,UserDetail from DUser where UserId=@UserId"; SqlParameter[] parms = new SqlParameter[] { new SqlParameter("@UserId", userId) }; using (IDataReader rdr = DataAccess.ExcuteReader(sql, parms)) { if (rdr.Read()) { UserUnit unit = new UserUnit(); unit.UserId = (rdr[0] != DBNull.Value) ? rdr.GetInt32(0) : 0; unit.UserName = (rdr[1] != DBNull.Value) ? rdr.GetString(1) : null; unit.UserPsd = (rdr[2] != DBNull.Value) ? rdr.GetString(2) : null; unit.UserDetail = (rdr[3] != DBNull.Value) ? rdr.GetString(3) : null; rdr.Close(); return unit; } rdr.Close(); } return null; } #endregion #region AddUser(UserUnit unit) public int AddUser(UserUnit unit) { string sql = "INSERT INTO DUser(UserId,UserName,UserPsd,UserDetail) VALUES(@UserId,@UserName,@UserPsd,@UserDetail);"; SqlParameter[] parms = new SqlParameter[] { new SqlParameter("@UserId", unit.UserId), new SqlParameter("@UserName", unit.UserName), new SqlParameter("@UserPsd", unit.UserPsd), new SqlParameter("@UserDetail", unit.UserDetail) }; return DataAccess.ExcuteNonQuery(sql, parms); } #endregion #region UpdateUser(UserUnit unit) public int UpdateUser(UserUnit unit) { string sql = "UPDATE DUser SET UserName=@UserName,UserPsd=@UserPsd,UserDetail=@UserDetail WHERE UserId=@UserId;"; SqlParameter[] parms = new SqlParameter[] { new SqlParameter("@UserId", unit.UserId), new SqlParameter("@UserName", unit.UserName), new SqlParameter("@UserPsd", unit.UserPsd), new SqlParameter("@UserDetail", unit.UserDetail) }; return DataAccess.ExcuteNonQuery(sql, parms); } #endregion #region DeleteUser(string UserId) public int DeleteUser(string UserId) { string sql = "DELETE FROM DUser WHERE UserId=@UserId;"; SqlParameter[] parms = new SqlParameter[] { new SqlParameter("@UserId", UserId) }; return DataAccess.ExcuteNonQuery(sql, parms); } #endregion } }

3、UserBLD.cs内容如下：

using System; using FluorineFx; using FluorineFx.AMF3; using Robin.DAL; using Robin.BDU; namespace Robin.BLL { [RemotingService] public class UserBLD { public static UserDAO userDAO = UserDAO.GetInstance(); public UserBLD() { } #region GetAllUser() public ArrayCollection GetAllUser() { try { return userDAO.GetAllUser(); } catch (Exception ex) { return null; } } #endregion #region GetUser(string userId) public UserUnit GetUser(string userId) { try { return userDAO.GetUser(userId); } catch (Exception ex) { return null; } } #endregion #region AddUser(string[] obj) public int AddUser(string[] obj) { UserUnit unit = new UserUnit(); unit.UserId = Convert.ToInt32(obj[0]); unit.UserName = obj[1]; unit.UserPsd = obj[2]; unit.UserDetail = obj[3]; try { return userDAO.AddUser(unit); } catch (Exception ex) { return -1; } } #endregion #region UpdateUser(string[] obj) public int UpdateUser(string[] obj) { UserUnit unit = new UserUnit(); unit.UserId = Convert.ToInt32(obj[0]); unit.UserName = obj[1]; unit.UserPsd = obj[2]; unit.UserDetail = obj[3]; try { return userDAO.UpdateUser(unit); } catch (Exception ex) { return -1; } } #endregion #region DeleteUser(string UserId) public int DeleteUser(string UserId) { if (String.IsNullOrEmpty(UserId)) return -1; try { return userDAO.DeleteUser(UserId); } catch (Exception ex) { return -1; } } #endregion } }

4、UserUnit.cs内容如下：

namespace Robin.BDU { [FluorineFx.TransferObject] public class UserUnit { public int UserId { get; set; } public string UserName { get; set; } public string UserPsd { get; set; } public string UserDetail { get; set; } } }

2.2.3客户端编程

1、显示用户

ShowUser.mxml内容如下：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12" width="800" height="500" creationComplete="init()"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; import mx.controls.List; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.managers.PopUpManager; import mx.collections.ArrayCollection; import mx.utils.URLUtil; import mx.events.CloseEvent; import mx.controls.Alert; private var nc:NetConnection; private var rs:Responder; private var rsSave:Responder; private var PnlAddUser:AddUser; private function init():void { nc = new NetConnection(); rs = new Responder(onResult,onFault); nc.objectEncoding = ObjectEncoding.AMF3; nc.connect("http://localhost:5108/Web/Gateway.aspx"); nc.client = this; nc.call("Robin.BLL.UserBLD.GetAllUser",rs); } private function getUser(event:MouseEvent):void { nc.call("Robin.BLL.UserBLD.GetAllUser",rs); } private function onResult(result:ArrayCollection):void { this.gridUser.dataProvider = result; } private function onFault(event:Object):void { trace("Error"); } private function addUser(event:MouseEvent):void { PnlAddUser = new AddUser(); PnlAddUser.x=(this.width - PnlAddUser.width) / 2; PnlAddUser.y=(this.height - PnlAddUser.height) / 2; PopUpManager.addPopUp(PnlAddUser, this, true); } public function editUser():void { var item:Object=gridUser.selectedItem; var userId:String =item.UserId; var urlStr:String="http://"+URLUtil.getServerNameWithPort(Application.application.url) +"/Web/bin-debug/EditUser.html?UserId="+userId; var request:URLRequest = new URLRequest(urlStr); navigateToURL(request,"_top"); } public function delUser():void { var item:Object=gridUser.selectedItem; var userId:String =item.UserId; rsSave = new Responder(onResultSave,onFaultSave); nc.call("Robin.BLL.UserBLD.DeleteUser",rsSave,userId); } private function onResultSave(retValue:int):void { if(retValue == 1) { Alert.show("删除用户成功","提示",Alert.OK); nc.call("Robin.BLL.UserBLD.GetAllUser",rs); } else Alert.show("删除用户失败，请稍候重试","提示",Alert.OK); } private function onFaultSave(event:Object):void { trace("Error"); } public function closePnlHandler(evt:CloseEvent):void { PopUpManager.removePopUp(this.PnlAddUser); nc.call("Robin.BLL.UserBLD.GetAllUser",rs); } ]]--> </mx:Script> <mx:Button x="94" y="68" label="刷新列表" click="getUser(event)"/> <mx:Button x="193" y="68" label="添加用户" click="addUser(event)"/> <mx:DataGrid x="94" y="100" id="gridUser" width="612" height="223"> <mx:columns> <mx:DataGridColumn headerText="UserId" dataField="UserId"/> <mx:DataGridColumn headerText="UserName" dataField="UserName"/> <mx:DataGridColumn headerText="UserPsd" dataField="UserPsd"/> <mx:DataGridColumn headerText="UserDetail" dataField="UserDetail"/> <mx:DataGridColumn headerText="操作" width="150" textAlign="center" > <mx:itemRenderer> <mx:Component> <mx:HBox> <mx:Button label="修改" fontSize="12" click="outerDocument.editUser()"/> <mx:Button label="删除" fontSize="12" click="outerDocument.delUser()"/> </mx:HBox> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </mx:Application>

运行之后，界面如下所示：

 

2、添加用户

AddUser.mxml内容如下：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12" width="411" height="340" creationComplete="init()"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.utils.URLUtil; import mx.controls.Alert; private var nc:NetConnection; private var rs:Responder; private var rsSave:Responder; private var params:Object; private var userId:String; private function getParams():Object { params = {}; var query:String = ExternalInterface.call("window.location.search.substring", 1); if(query) { var pairs:Array = query.split("&"); for(var i:uint=0; i < pairs.length; i++) { var pos:int = pairs[i].indexOf("="); if(pos != -1) { var argname:String = pairs[i].substring(0, pos); var value:String = pairs[i].substring(pos+1); params[argname] = value; } } } return params; } private function init():void { nc = new NetConnection(); rs = new Responder(onResult,onFault); nc.objectEncoding = ObjectEncoding.AMF3; nc.connect("http://localhost:5108/Web/Gateway.aspx"); nc.client = this; getUserInfo(); } private function getUserInfo():void{ var args:Object = getParams(); if(args.UserId != null) { userId = args.UserId; } nc.call("Robin.BLL.UserBLD.GetUser",rs,userId); } private function onResult(event:Object):void { lblUserId.text = event.UserId; txtUserName.text = event.UserName; txtUserPsd.text = event.UserPsd; txtUserDetail.text = event.UserDetail; } private function onFault(event:Object):void { trace("Error"); } public function retDefault():void { var urlStr:String="http://"+URLUtil.getServerNameWithPort(Application.application.url) +"/Web/bin-debug/ShowUser.html"; var request:URLRequest = new URLRequest(urlStr); navigateToURL(request,"_top"); } public function saveUserInfo():void{ var array:Array = new Array(); array.push(userId); array.push(txtUserName.text); array.push(txtUserPsd.text); array.push(txtUserDetail.text); rsSave = new Responder(onResultSave,onFaultSave); nc.call("Robin.BLL.UserBLD.UpdateUser",rsSave,array); } private function onResultSave(retValue:int):void { if(retValue == 1) Alert.show("用户信息修改成功","提示",Alert.OK); else Alert.show("用户信息修改失败，请稍候重试","提示",Alert.OK); } private function onFaultSave(event:Object):void { trace("Error"); } ]]--> </mx:Script> <mx:Label x="44" y="51" text="UserId:"/> <mx:Label x="44" y="95" text="UserName:"/> <mx:Label x="144" y="51" id="lblUserId"/> <mx:Label x="44" y="144" text="UserPsd:"/> <mx:Label x="44" y="206" text="UserDetail:"/> <mx:TextInput x="144" y="93" id="txtUserName"/> <mx:TextInput x="144" y="142" id="txtUserPsd"/> <mx:TextArea x="144" y="193" id="txtUserDetail"/> <mx:Text x="44" y="10" text="修改用户信息" fontWeight="bold" fontSize="15"/> <mx:Button x="76" y="281" label="修改" id="btnEdit" click="saveUserInfo()"/> <mx:Button x="181" y="281" label="返回" id="btnRet" click="retDefault()"/> </mx:Application>

运行之后，界面如下所示：

 

运行之后，界面如下所示：

3、修改用户

EditUser.mxml内容如下：

<?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" title="添加用户" fontSize="15" close="this.parentDocument.closePnlHandler(event)" showCloseButton="true"> <mx:Script> <!--[CDATA[ import mx.controls.Alert; private var nc:NetConnection; private var rs:Responder; private function init():void { nc = new NetConnection(); rs = new Responder(onResult,onFault); nc.objectEncoding = ObjectEncoding.AMF3; nc.connect("http://localhost:5108/Web/Gateway.aspx"); nc.client = this; } private function onResult(retValue:int):void { if(retValue == 1) Alert.show("用户信息添加成功","提示",Alert.OK); else Alert.show("用户信息添加失败，请稍候重试","提示",Alert.OK); } private function onFault(event:Object):void { trace("Error"); } public function saveUserInfo():void{ init(); var array:Array = new Array(); array.push(txtUserId.text); array.push(txtUserName.text); array.push(txtUserPsd.text); array.push(txtUserDetail.text); rs = new Responder(onResult,onFault); nc.call("Robin.BLL.UserBLD.AddUser",rs,array); } public function retDefault():void { this.parentDocument.closePnlHandler(null); } ]]--> </mx:Script> <mx:Label x="42" y="10" text="UserId:"/> <mx:Label x="42" y="54" text="UserName:"/> <mx:Label x="42" y="103" text="UserPsd:"/> <mx:Label x="42" y="165" text="UserDetail:"/> <mx:TextInput x="142" y="52" id="txtUserName"/> <mx:TextInput x="142" y="8" id="txtUserId"/> <mx:TextInput x="142" y="101" id="txtUserPsd"/> <mx:TextArea x="142" y="152" id="txtUserDetail"/> <mx:Button x="84" y="212" label="添加" id="btnAdd" click="saveUserInfo()"/> <mx:Button x="189" y="212" label="返回" id="btnRet" click="retDefault()"/> </mx:TitleWindow>

运行之后，界面如下所示：

运行之后，界面如下所示：

4、删除用户

运行之后，界面如下所示：