关闭 x
    ITJS.cn - 技术改变世界
    IT采购网

    Flex中的MySQL管理(1)

    出处：ITJS

    学习使用RIA Framework Flex创建MySQL管理UI

    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

    < php
    addresses
    article
    1
    Apple Computer is going to release the iPhone...
    Google release Gears 
    %

    表格中有两条记录：第一条显示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 version="1.0" encoding="utf-8" >
     

    在Flex Builder 2中编译及运行这段代码时，结果如图1所示。

    图1：界面布局

    相当整洁，对吧？渐变背景很漂亮，控件也很美观。我只做了极少量的工作。当然，图形设计师也可添加一些修饰，以使其更加美观，例如过渡效果和图像。而我还是喜欢整洁的界面，并要确保它在每台客户机上都具有一致的外观和表现，而Ajax应用程序要做到这一点并不容易。

    获取数据库清单

    补充Flex应用程序代码的第一步就是，当应用程序加载后在窗体顶部显示数据库的组合框。相关代码如清单3所示。

    清单3：flexmysql2.mxml

    < xml version="1.0" encoding="utf-8" >
    

    我省略了与前例类似的部分代码，以缩短代码段长度。差别重点在于标签，它将创建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 version="1.0" encoding="utf-8" >
    

    在浏览器中运行该例时，结果如图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创建了有趣的程序，请告诉我，也许我们可以合写一篇文章来介绍它。
    

    资源
    

    Flex是一种开源Flash应用程序开发语言，由Adobe创建。
    




    学习使用RIA Framework Flex创建MySQL管理UI
    

    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
    

    


    

    < php
    addresses
    article
    1
    Apple Computer is going to release the iPhone...
    Google release Gears 
    %
    

    表格中有两条记录：第一条显示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 version="1.0" encoding="utf-8" >
     
    

    在Flex Builder 2中编译及运行这段代码时，结果如图1所示。
    

    


    

    

    
图1：界面布局
    

    相当整洁，对吧？渐变背景很漂亮，控件也很美观。我只做了极少量的工作。当然，图形设计师也可添加一些修饰，以使其更加美观，例如过渡效果和图像。而我还是喜欢整洁的界面，并要确保它在每台客户机上都具有一致的外观和表现，而Ajax应用程序要做到这一点并不容易。
    

    获取数据库清单
    

    补充Flex应用程序代码的第一步就是，当应用程序加载后在窗体顶部显示数据库的组合框。相关代码如清单3所示。
    

    清单3：flexmysql2.mxml
    

    


    

    < xml version="1.0" encoding="utf-8" >
    

    其中有一处重要修改，即添加了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创建了有趣的程序，请告诉我，也许我们可以合写一篇文章来介绍它。
    

    资源
    

    Flex是一种开源Flash应用程序开发语言，由Adobe创建。
    MDB2 PEAR模块是我用来访问数据库的方法。
    
	
	

	
	
    
 上一篇返回首页 下一篇
    
			
	
    

    声明：   此文观点不代表本站立场；转载务必保留本文链接；版权疑问请联系我们。
    
	
    
	
    
				
    
					
    别人在看