第一个ActionScript MySQL Driver:asSQL原理与实践

熟悉Flex 的开发者都知道,在Flex中不能直接访问数据库,而是采用HTTPService/WebService/RemoteObject等方式实现。asSQL的出现多少让大家感到意外(抛开这两种方式的优劣不提),也可见它的威力。

1. 简介

大型软件系统都采取了分层设计的原则,将其分为大致表现(UI)、业务逻辑以及EIS三部分。在Java语言,直接与数据库打交道曾是家常便饭。Hibernate等O/R Mapping工具流行,直接使用JDBC编程变得少见了,但有时这种方式更加简便、速度更快。

ActionScript用于在Flash实现动画设计,访问数据库自然不是它的强项,甚至大家都觉得没有必要。asSQL的出现使许多Flash的开发 者感到惊喜(也许在Java开发人员看来这实在算不了什么)。asSQL现在是alpha版本,还很稚嫩有一些问题。但基本工作正常。

2. asSQL驱动

a)Connection

asSQL也提供了类似Java语言的Connection,确切的说asSQL中的Connection是类,而Java的Connectio是接口。 Connection负责与mySQL Server通讯(通过socket建立连接,握手,接收/发送数据包),并按照mySQL协议解析、加密数据包(此处略去协议处理细节,感兴趣的请访问 http://www.redferni.uklinux.net/mysql/MySQL-Protocol.html)。

b)MysqlService

虽然Connection是asSQL的核心对象,但与客户打交道仅有一个UI组件MysqlService。该组件需要用户输入host,port, database等信息,在内部创建Connection,这避免了用户直接操作Connection可能引发的错误。

xml 代码

<controls:MysqlService id="sqlService" host="localhost" port="3306" user="root" scrambler="{new PlainTextScrambler('sa')}" database="jpetstore" response="onResponse(event)" error="onError(event)" />  

将操作结果保存到lastResult中,因此它可作为数据源(data provider)供其它组件(如DataGrid)使用,如下所示:

xml 代码

<mx:DataGrid x="55" y="137" dataProvider="{sqlService.lastResult}">  
    <mx:columns>  
        <mx:DataGridColumn headerText="UserId" dataField="userid"/>  
        <mx:DataGridColumn headerText="Email" dataField="email"/>  
        <mx:DataGridColumn headerText="First Name" dataField="firstname"/>  
    mx:columns>  
mx:DataGrid>  

在一个按钮click事件中,调用myService.send('SELECT userid,email,firstname FROM account;')即可触发上述DataGrid加载数据。

MysqlService支持3个事件,分别是results、response和errors,供调用者定制操作结果。

errors :显然是发生错误
results、response的区别是前者针对SELECT操作,后者针对UPDATE,DELETE......

遗憾的是,MysqlService设计的不够完美,Connection的创建和释放可能被分离到类内部和外部实现。如果用户提供上述事件的响应函数,就必须在该函数中显示关闭connection。如下所示:


ActionScript 代码

private function onResults(e:ResultsEvent):void{   
      var st:Statement = Statement(e.target);   
      var con:Connection = st.getConnection();   
      var rs:ResultSet = e.resultSet;   
  
      while ( rs.next() ) {   
          var userid = rs.getString("userid");   
          //var email = rs.getString(2);   
          trace(userid);   
      }   
  
      con.disconnect();   
}   
  
private function onResponse(e:ResponseEvent):void{     
     var st:Statement = Statement(e.target);   
     var con:Connection = st.getConnection();   
        
     var affectedRows:int = e.affectedRows;   
     var insertID:int = e.insertID;   
  
     con.disconnect();   
}   
  
private function onError(e:SQLErrorEvent):void{   
     var st:Statement = Statement(e.target);   
     var con:Connection = st.getConnection();   
        
     var message:String = e.msg;   
     var errorNo:int = e.id;   
     var text:String = e.text; // Equals SQLError #{id}: {msg}   
  
     con.disconnect();   
}   

3. 示例

    asSQL目前仅支持mySQL,它以UI组件的形式供用户调用,并以数据源的形式把数据和UI组件绑定。

    开发环境:Flex Builder 2,以及MySql 5,还有Spring 1.2.8中实例JPetStore的Schema。

步骤1:MySQL中建立一个叫做JPetStore的Database。并把JPetStore的Schema导入其中。
步骤2:从http://maclema.com/assql/downloads/asSQL-0.1alpha.swc下载asSQL SWC
步骤3:新建Flex Project项目,然后选中项目根目录,右键Properties->Flex Build Path->Library Path;点击右侧按钮Add SWC,在浏览窗口找到刚下载的SWC文件。
步骤4:编辑Flex的界面元素,增加1个ComboBox和1个DataGrid,以及2个按钮。然后编辑MXML文件。

你可能感兴趣的:(UI,mysql,webservice,Flex,actionscript)