作者:txy001美丽人生_618 | 来源:互联网 | 2018-04-19 14:04
我省略了与前例类似的部分代码,以缩短代码段长度。差别重点在于
标签,它将创建HTTP Service Flex对象,而后者将与服务器进行通讯。该服务对象由onInitialize方法调用, 而后者在Flex应用程序启动时调用。onInitialize方法先设置服务的URL,然后开始发出请求。请求完成后,就调用onResult方法。onResult方法将组合框的dataProvider设为web服务器的返回结果。该方法最有价值的部分如下:
myservice.lastResult..database.* |
看看这个语句。如果之前不了解E4X的作用,我可以稍加解释。myservice.lastResult变量实际上是一个XML文档。‘..’句法等价于XPath ‘//’句法。它表示“将具有此名字的任何一个标签给我”,在本例中就是“将任何一个数据库标签给我”。星号表示数据库标签的任何子标签。由于数据库标签只有一个子标签,即数据库名称的文字部分,因此这段代码就表示“将XML文档中每个数据库的名称给我”。这个功能真的很好用!
正是由于ActionScript的这种E4X扩展,Flex才能够方便地与XML数据源进行通讯。据我所知,还没有其他语言能够如此方便地查询XML文档。因此利用强大的E4X,就可以在浏览器中运行该应用程序,并得到如图2所示的结果。
|
图2:填充数据库名称的数据库组合框 |
单击该组合框时,将弹出下拉列表,并显示机器中的数据库列表。是的,其中有很多数据库。几乎每篇有关PHP、Flex、Rails或其他技术的文章都会用到数据库,所以我拥有大量的数据库。
创建表视图代码
创建示例Flex应用程序的最后一步就是添加表格的下拉菜单,并在数据网格中显示选中表格的数据。该例的完整代码如清单4所示。
清单4:flexmysql.mxml
initialize="onInitialize()">
import mx.collections.ArrayCollection; private static const SERVICE_BASE:String = "http://localhost/sql/req.php"; private var loadingDatabases:Boolean = true; private var loadingTables:Boolean = false; public function onInitialize():void { loadingDatabases = true; myservice.url = SERVICE_BASE; myservice.send( null ); } public function onResult(event:Event):void { if ( loadingDatabases ) { loadingDatabases = false; selectedDatabase.dataProvider = myservice.lastResult..database.*; onSelectDatabase(); } else if ( loadingTables ) { loadingTables = false; var tables:Array = new Array(); for each ( var tablRecord:XML in myservice.lastResult..record ) { for each( var tablCol:XML in tablRecord.* ) tables.push( tablCol..*.toString() ); } selectedTable.dataProvider = tables; onSelectTable(); } else { var records:Array = new Array(); for each ( var record:XML in myservice.lastResult..record ) { var outRecord:Array = new Array(); for each( var column:XML in record.* ) outRecord[ column.name() ] = column..*.toString(); records.push( outRecord ); } var data:ArrayCollection = new ArrayCollection( records ); dg1.dataProvider = data; } } public function onSelectDatabase():void { loadingDatabases = false; loadingTables = true; var url:String = SERVICE_BASE; url += "?mode=getTables&db="+selectedDatabase.selectedLabel; myservice.url = url; myservice.send(null); } public function onSelectTable():void { var url:String = SERVICE_BASE; url += "?mode=getData&db="+selectedDatabase.selectedLabel; url += "&table="+selectedTable.selectedLabel; myservice.url = url; myservice.send(null); } ]]>
change="onSelectDatabase()">
change="onSelectTable()">
|
其中有一处重要修改,即添加了onSelectDatabase()函数的代码,以获取表格列表,然后将其输入到onResult()函数中,还添加了onSelectTable()函数,该函数可检索表格中的数据,并在onResult()处理器中设置数据网格