FlashBuilder4+FlourinFx+VS2005 增删改查小试

　　在前面文章中演示了如何配置（http://www.cnblogs.com/tzy080112/archive/2010/10/26/Flex.html），现就这样的方式配置来实现flex前台和.NET服务器端常见的增删改查通讯。

1、创建数据库

 

代码

CREATE   TABLE   [ dbo ] . [ Employees ]  (
     [ ID ]   [ int ]   IDENTITY  ( 1 ,  1 )  NOT   NULL  ,
     [ Code ]   [ varchar ]  ( 50 ) COLLATE Chinese_PRC_CI_AS  NULL  ,
     [ Name ]   [ varchar ]  ( 50 ) COLLATE Chinese_PRC_CI_AS  NULL  
)  ON   [ PRIMARY ]
GO

 

2、创建RemoteObject数据通讯组建，并声明对应的多个方法。

 

代码

         < s:RemoteObject  id ="Service"  destination ="fluorine"  source ="ServiceLibrary.Sample"  fault ="Service_faultHandler(event)" >
             < s:method  name ="Echo"  result ="onResult(event)" >
             </ s:method >
             < s:method  name ="GetCustomers"  result ="onCustomerResult(event)" >
             </ s:method >
             < s:method  name ="InsertData"  result ="onInsertDataResult(event)" >
             </ s:method >         
             < s:method  name ="InsertCustomer"  result ="onInsertCustomerResult(event)" >
             </ s:method >             
             < s:method  name ="DelData"  result ="onDelDataResult(event)" >
             </ s:method >         
             < s:method  name ="UpdateCustomer"  result ="onUpdateCustomerResult(event)" >
             </ s:method >                 
         </ s:RemoteObject >
    

 

 

2、获取数据

　在flex中创建获取数据按钮以及一个datagrid，如下

 

代码

         < s:Button  x ="298"  y ="117"  label ="获取记录"  click ="button1_clickHandler(event)" />
         < mx:DataGrid  id ="gridview"  x ="33"  y ="162"  width ="366" >
             < mx:columns >
                 < mx:DataGridColumn  headerText ="ID"  dataField ="ID" />
                 < mx:DataGridColumn  headerText ="Code"  dataField ="Code" />
                 < mx:DataGridColumn  headerText ="Name"  dataField ="Name" />
             </ mx:columns >
         </ mx:DataGrid >
        

 

　　获取记录按钮添加时间，调用获取数据方法GetCustomers，并成功之后将数据集绑定到datagrid，如下：

 

代码

//调用方法            
protected function button1_clickHandler(event:MouseEvent):void
{
    // TODO Auto-generated method stub
    Service.GetCustomers();
}

//成功绑定
private function onCustomerResult(evt:ResultEvent):void
{
    var aa:ArrayCollection;
    aa=evt.result as ArrayCollection;
    this.edRetValue.text=aa.length.toString();
    this.gridview.dataProvider=aa;
}

 

 .NET部分获取数据代码如下：

 

代码

// DataTableType类型转换，flex端口与直接使用数据集
        [DataTableType( " ServiceLibrary.Sample.GetEchoTable " )]
         public  DataTable GetCustomers()
        {
             string  ConnStr  =   " Persist Security Info=False;database=Practice;server=192.168.0.66;user=sa;Pwd=tysoft1234;Connect Timeout=300 " ;
            SqlConnection SQLConn  =   new  SqlConnection(ConnStr);
             string  SelectStr  =   " SELECT * FROM Employees " ;
            SqlDataAdapter da  =   new  SqlDataAdapter(SelectStr,SQLConn);
            DataSet ds  =   new  DataSet();
            da.Fill(ds);
            DataTable dt  =  ds.Tables[ 0 ];
             return  dt;
        }

 

 

2、新添数据

　　创建一个Form，加入输入框以及按钮进行数据的添加，如下：

 

代码

         < mx:Form  x ="33"  y ="348"  width ="366"  height ="198" >
             < mx:FormItem  label ="Code" >
                 < s:TextInput  id ="edCode"   />
             </ mx:FormItem >
             < mx:FormItem  label ="Name" >
                 < s:TextInput  id ="edName"   />
             </ mx:FormItem >
             < mx:FormItem  label ="参数" >
                 < s:Button  label ="添加"  click ="button2_clickHandler(event)" />
             </ mx:FormItem >
             < mx:FormItem  label ="对象" >
                 < s:Button  label ="添加"  click ="button3_clickHandler(event)" />
             </ mx:FormItem >
         </ mx:Form >

 

　　button2 是通过参数的方式进行添加数据，将Code,Name作为字符串传递到服务器端进行数据插入，button3则采用对象的方式进行数据传递，对象方式的应用中大型应用中的体现更广泛。添加事件函数，调用插入数据方法，如下：

 

代码

protected function button2_clickHandler(event:MouseEvent):void
{
    Service.InsertData(edCode.text,edName.text);
}

private function onInsertDataResult(evt:ResultEvent):void
{
    //insert successfull
    Alert.show(evt.result.toString());
    Service.GetCustomers();//插入成功，重新绑定
}

 

　　如果采用传递对象的方式进行数据添加，需要先在flex项目中声明一个和服务端对应的actionscript类，如下：

 

代码

package VO
{
    //此句不能少，用于对应服务端对象，将对象进行序列化
    //规则： 命名空间.类名
    [RemoteClass(alias="ServiceLibrary.Customers")]

    public class Customers
    {
        public var ID:int;
        public var Code:String;
        public var Name:String;
    }
}

 

　　服务端类如下：

namespace  ServiceLibrary
{
     public   class  Customers
    {
         public   int  ID;
         public   string  Code;
         public   string  Name;
    }
}

 

　　服务端函数代码，请参见附件，大体相同没有多大改变。

 

3、修改数据

　　修改数据相对简单，与添加数据类似，在此增加一个功能，当选择datagrid中的记录的时候，输入框自动填充对应的字段值。如下：

 

代码

             < mx:FormItem  label ="Code" >
                 < s:TextInput  id ="edCode"   text ="{gridview.selectedItem.Code}" />
             </ mx:FormItem >
             < mx:FormItem  label ="Name" >
                 < s:TextInput  id ="edName"  text ="{gridview.selectedItem.Name}" />
             </ mx:FormItem >

 

　　具体实现代码如下：

 

代码

            protected  function  button5_clickHandler(event:MouseEvent):void
            {
                 var  Customer:Customers = new Customers();
　　　　　　　　　　 // 获取主键
                Customer.ID = gridview.selectedItem.ID  as   int ;
                Customer.Code = edCode. text ;
                Customer.Name = edName. text ;
                
                Service.UpdateCustomer(Customer);
            }

 

 

 

4、删除数据

　　删除数据只需要传入主键ID删除数据即可，如下　　

   protected function button4_clickHandler(event:MouseEvent):void
   {
    // TODO Auto-generated method stub
    Service.DelData(gridview.selectedItem.ID as int);
   }

 

 

　　到此简单演示已经完毕，其中容易忽视的就是传递对象时候需要对应的问题，其他方面和平常应用无多大异同。

　　界面：

　　附件 增删改查小试.rar