苗木网站建设,网站海外推广服务,wordpress id连续,校园网上超市网站建设引言#xff1a;一直想学习Flex来着#xff0c;平时都是因为太懒的缘故#xff0c;没有去实践#xff0c;在csdn上无意看到这篇博文#xff0c;觉得对自己挺有帮助的#xff0c;就引过来了~ PHPMyAdmin的出现震撼了业界#xff0c;这毫无疑问。它当然是基于PHP的最佳应用…引言一直想学习Flex来着平时都是因为太懒的缘故没有去实践在csdn上无意看到这篇博文觉得对自己挺有帮助的就引过来了~ PHPMyAdmin的出现震撼了业界这毫无疑问。它当然是基于PHP的最佳应用程序因为它将MySQL管理界面由命令行的形式改为了web浏览器的形式。不过虽然它的功能很强大但使用并不太方便界面也不够美观。因此我尝试通过Rich Internet Application框架设计更理想的MySQL前台管理程序。要达成此目标本可选用Ajax。但我不想处理客户端的不兼容问题。当然Silverlight也是不错的选择但它仍不够成熟。之所以选择Adobe Flex是因为它拥有富用户接口工具集和方便的web服务集成功能而且它生成的Flash应用程序能够以相同方式在任何操作系统中运行。我学习了很多有关创建应用程序方面的知识如何为PHP程序创建安全的SQL web服务如何通过Flex访问web服务如何将web服务返回的数据输入数据网格中并显示。在本文中我将引领读者从前台到后台逐步创建MySQL管理程序。读者从中可了解一些有用的信息以创建自己的Rich Internet应用程序。创建后台程序 Flex应用程序擅长与web服务通讯以发出请求及提交数据。因此首先需要创建一个非常简单的PHP脚本它将以XML格式返回数据库列表、表或表中的数据。清单 1. req.php?phprequire_once(MDB2.php);$sql SHOW DATABASES;if ( $_REQUEST[mode] getTables )$sql SHOW TABLES;if ( $_REQUEST[mode] getData )$sql SELECT * FROM .$_REQUEST[table];$dsn mysql://rootlocalhost/.$_REQUEST[db];$mdb2 MDB2::factory($dsn);if (PEAR::isError($mdb2)) { die($mdb2-getMessage()); }$dom new DomDocument();$dom-formatOutput true;$root $dom-createElement( records );$dom-appendChild( $root );$res $mdb2-query( $sql );if (PEAR::isError($mdb2)) { die($mdb2-getMessage()); }while ($row $res-fetchRow(MDB2_FETCHMODE_ASSOC)){$rec $dom-createElement( record );$root-appendChild( $rec );foreach( array_keys( $row ) as $key ) {$key_elem $dom-createElement( $key );$rec-appendChild( $key_elem );$key_elem-appendChild( $dom-createTextNode( $row[$key] ) );}}$res-free();$mdb2-disconnect();header( Content-type: text/xml );echo $dom-saveXML();?该脚本的第一项工作就是利用MDB2库连接数据库。如果没有安装MDB2库则可使用PEAR安装该库如下所示% pear install MDB2%如果PEAR无法正常运行可访问http://pear.php.net/mdb2然后下载源代码并将其解包到PHP的include路径下。MDB2是通用的数据库适配器层它已取代了广为使用的PEAR DB库。脚本的第二项工作就是创建XML DOM Document对象该对象将用来创建要输出的XML树。从此处开始它将运行查询并在XML树中添加row和column作为XML标签。最后该脚本将关闭所有连接并将XML保存到PHP输出流中。选用XML DOM对象的原因是它可避免任何与数据、不对称标签等有关的编码问题以及各种可能使XML产生混乱的因素。我可以将调试XML数据流的时间节省下来做其他许多更有意义的工作。您一定也会这样做。将该脚本安装到本地机器上的可运行目录下然后使用curl命令向服务器发出请求。% curl http://localhost/sql/req.php?xml version1.0?recordsrecorddatabaseaddresses/database/recordrecorddatabaseajaxdb/database/record...%在本例中我并未指定数据库或模式这会要求脚本返回可用数据库的清单。假如web服务脚本有权执行该任务则在curl语句后面就会显示执行的结果。在本例中将以标签的形式显示不同数据库的列表。该脚本返回的所有数据都带有records标签它包含一组record标签。每个record标签的名称和内容取决于已执行的SQL语句。在本例中只返回单列命名数据库。除了使用curl命令还可将URL输入浏览器中然后在加载页面后选择“View Source查看源文件”。在下例中将连接articles数据库并获取它的表格列表。结果如下% curl .../req.php?modegetTablesdbarticles?xml version1.0?recordsrecordtables_in_articlesarticle/tables_in_articles/record/records%articles数据库中只有一个名为article的表格这并不奇怪。要运行经典的select * from article查询以获取所有记录可使用以下URL% curl .../req.php?modegetDatadbarticlestablearticle?xml version1.0?recordsrecordid1/idtitleApple releases iPhone/titlecontentApple Computer is going to release the iPhone.../content/recordrecordid2/idtitleGoogle release Gears/titlecontentGoogle, Inc. of Mountain View California has.../content/record/records%表格中有两条记录第一条显示Apple公司将发布超炫的IPhone第二条显示Google公司将发布同样很炫、但用途完全不同的Gears系统。在本地机器上安装了极为强大且灵活的后台程序后就可以着手为其创建Flex前台程序了。创建用户界面我想以层的形式创建Flex应用程序首先是用户界面然后在框架中添加代码以实现互动性。首先若尚未安装Flex SDK则先安装。Flex SDK是免费软件Flex Builder 2 IDE也有免费试用版。可从http://www.flex.org/download下载Flex SDK。Flex SDK是免费的Flex 3 SDK也将成为开源软件。Flex Builder是一种基于Eclipse的开发环境通过拖放控件即可创建界面但本例不必使用该工具。我非常喜欢使用标签因此通常采用代码视图并直接修改MXML。我想在界面顶部放置几个控件并在底部放置一个数据网格以显示表中的数据。顶部的控件就是两个下拉列表可在其中选择数据库和表。该窗体的MXML如清单2所示。清单 2. flexmysql1.mxml?xml version1.0 encodingutf-8?mx:Application xmlns:mxhttp://www.adobe.com/2006/mxml layoutverticalmx:VBox horizontalAlignleftmx:HBoxmx:Label textDatabase: /mx:ComboBox idselectedDatabase width381 height21/mx:ComboBox/mx:HBoxmx:HBoxmx:Label textTable: /mx:ComboBox idselectedTable width381 height21/mx:ComboBox/mx:HBoxmx:DataGrid iddg1 width452/mx:DataGrid/mx:VBox/mx:Application在Flex Builder 2中编译及运行这段代码时结果如图1所示。图1.界面布局相当整洁对吧渐变背景很漂亮控件也很美观。我只做了极少量的工作。当然图形设计师也可添加一些修饰以使其更加美观例如过渡效果和图像。而我还是喜欢整洁的界面并要确保它在每台客户机上都具有一致的外观和表现而Ajax应用程序要做到这一点并不容易。获取数据库清单补充Flex应用程序代码的第一步就是当应用程序加载后在窗体顶部显示数据库的组合框。相关代码如清单3所示。清单 3. flexmysql2.mxml?xml version1.0 encodingutf-8?mx:Application xmlns:mxhttp://www.adobe.com/2006/mxml layoutverticalinitializeonInitialize()mx:Script![CDATA[import mx.collections.ArrayCollection;private static const SERVICE_BASE:String http://localhost/sql/req.php;public function onInitialize():void{myservice.url SERVICE_BASE;myservice.send( null );} public function onResult(event:Event):void{selectedDatabase.dataProvider myservice.lastResult..database.*;}]]/mx:Scriptmx:HTTPService idmyservice resultonResult(event) resultFormate4x/mx:HTTPServicemx:VBox horizontalAlignleftmx:HBoxmx:Label textDatabase: /mx:ComboBox idselectedDatabase width381 height21/mx:ComboBox/mx:HBoxmx:HBoxmx:Label textTable: /mx:ComboBox idselectedTable width381 height21/mx:ComboBox/mx:HBoxmx:DataGrid iddg1 width452/mx:DataGrid/mx:VBox/mx:Application我省略了与前例类似的部分代码以缩短代码段长度。差别重点在于mx:HTTPService标签它将创建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?xml version1.0 encodingutf-8?mx:Application xmlns:mxhttp://www.adobe.com/2006/mxml layoutverticalinitializeonInitialize()mx:Script![CDATA[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 http://www.cnblogs.com/fjytzh/admin/String SERVICE_BASE;url ?modegetTablesdbselectedDatabase.selectedLabel;myservice.url url;myservice.send(null);} public function onSelectTable():void{var http://www.cnblogs.com/fjytzh/admin/String SERVICE_BASE;url ?modegetDatadbselectedDatabase.selectedLabel;url tableselectedTable.selectedLabel;myservice.url url;myservice.send(null);}]]/mx:Scriptmx:HTTPService idmyservice resultonResult(event) resultFormate4x/mx:HTTPServicemx:VBox horizontalAlignleftmx:HBoxmx:Label textDatabase: /mx:ComboBox idselectedDatabase width381 height21changeonSelectDatabase()/mx:ComboBox/mx:HBoxmx:HBoxmx:Label textTable: /mx:ComboBox idselectedTable width381 height21changeonSelectTable()/mx:ComboBox/mx:HBoxmx:DataGrid iddg1 width452/mx:DataGrid/mx:VBox/mx:Application其中有一处重要修改即添加了onSelectDatabase()函数的代码以获取表格列表然后将其输入到onResult()函数中还添加了onSelectTable()函数该函数可检索表格中的数据并在onResult()处理器中设置数据网格。在浏览器中运行该例时结果如图3所示。图3. 运行“show tables”查询之后的结果本例中使用了nasa数据库这是我为NASA Ames演讲而创建的数据库我用了“火箭科学”的笑话因为当时我的听众是一群火箭科学家。该数据库只有一个名为mission的表其中包含两列分别代表每项由NASA发起但已撤消的任务名称和年份。在数据网格中单击名称列即可按名称排序如图4所示。图 4. 显示mission表中的数据然后单击年份列以按照年份排列数据如图5所示。图 5. 迪斯科球式查询在过去几年中我们似乎并未发起任何任务。后续步骤至此本例已可应用于许多场合。在前台Flex应用中可以添加一些对用户更友好的控件以添加、删除或更新表格。甚至可以提供数据过滤功能或者编辑功能以修改表格中的数据。数据网格控件非常强大可以处理现场编辑任务。也可以用在完全不同的场合例如使用Flex绘图软件包执行数据分析和可视化工作。总结PHP和Flex的结合潜力无限。利用PHP可以方便地在后台发布web服务可以单独发布可以与HTML前台程序一起发布。PHPMyAdmin带有web服务接口扩展功能使任何人都能以Flex、Ajax、Silverlight、桌面小部件或其他任何技术编写前台程序。Flex为PHP开发人员提供了强大的前台工具。它避开了困扰Ajax开发人员的客户端不兼容问题。Flex 2并非只能使用特定的服务器技术因此Flex应用程序编译完成后它就可以部署在任何场合因为它只是一个SWF文件。可以看到利用简单的web服务对象和强大的E4X语言扩展就可以让Flex应用程序方便地与几乎任何一种后台程序进行通讯。读者不妨一试如果您使用PHP和Flex创建了有趣的程序请告诉我也许我们可以合写一篇文章来介绍它。 本文来自CSDN博客转载请标明出处http://blog.csdn.net/java060515/archive/2008/01/30/2072602.aspx转载于:https://www.cnblogs.com/fjytzh/archive/2010/04/02/1703118.html
