引言：一直想學(xué)習(xí)Flex來著，平時都是因為太懶的緣故，沒有去實踐，在csdn上無意看到這篇博文，覺得對自己挺有幫助的，就引過來了~

?

　　PHPMyAdmin的出現(xiàn)震撼了業(yè)界，這毫無疑問。它當(dāng)然是基于PHP的最佳應(yīng)用程序，因為它將MySQL管理界面由命令行的形式改為了web瀏覽器的形式。不過，雖然它的功能很強(qiáng)大，但使用并不太方便，界面也不夠美觀。因此，我嘗試通過Rich Internet Application框架設(shè)計更理想的MySQL前臺管理程序。
要達(dá)成此目標(biāo)本可選用Ajax。但我不想處理客戶端的不兼容問題。當(dāng)然，Silverlight也是不錯的選擇，但它仍不夠成熟。之所以選擇Adobe Flex，是因為它擁有富用戶接口工具集和方便的web服務(wù)集成功能，而且它生成的Flash應(yīng)用程序能夠以相同方式在任何操作系統(tǒng)中運(yùn)行。
我學(xué)習(xí)了很多有關(guān)創(chuàng)建應(yīng)用程序方面的知識：如何為PHP程序創(chuàng)建安全的SQL web服務(wù)；如何通過Flex訪問web服務(wù)；如何將web服務(wù)返回的數(shù)據(jù)輸入數(shù)據(jù)網(wǎng)格中并顯示。在本文中，我將引領(lǐng)讀者從前臺到后臺，逐步創(chuàng)建MySQL管理程序。讀者從中可了解一些有用的信息，以創(chuàng)建自己的Rich Internet應(yīng)用程序。
創(chuàng)建后臺程序
　　Flex應(yīng)用程序擅長與web服務(wù)通訊，以發(fā)出請求及提交數(shù)據(jù)。因此，首先需要創(chuàng)建一個非常簡單的PHP腳本，它將以XML格式返回數(shù)據(jù)庫列表、表或表中的數(shù)據(jù)。
清單 1. req.php
<?php
require_once("MDB2.php");
$sql = 'SHOW DATABASES';
if ( $_REQUEST['mode'] == 'getTables' )
$sql = 'SHOW TABLES';
if ( $_REQUEST['mode'] == 'getData' )
$sql = 'SELECT * FROM '.$_REQUEST['table'];
$dsn = 'mysql://root@localhost/'.$_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庫連接數(shù)據(jù)庫。如果沒有安裝MDB2庫，則可使用PEAR安裝該庫，如下所示：
% pear install MDB2
%
如果PEAR無法正常運(yùn)行，可訪問http://pear.php.net/mdb2，然后下載源代碼并將其解包到PHP的include路徑下。MDB2是通用的數(shù)據(jù)庫適配器層，它已取代了廣為使用的PEAR DB庫。
腳本的第二項工作就是創(chuàng)建XML DOM Document對象，該對象將用來創(chuàng)建要輸出的XML樹。從此處開始，它將運(yùn)行查詢，并在XML樹中添加row和column作為XML標(biāo)簽。最后，該腳本將關(guān)閉所有連接，并將XML保存到PHP輸出流中。
選用XML DOM對象的原因是，它可避免任何與數(shù)據(jù)、不對稱標(biāo)簽等有關(guān)的編碼問題以及各種可能使XML產(chǎn)生混亂的因素。我可以將調(diào)試XML數(shù)據(jù)流的時間節(jié)省下來做其他許多更有意義的工作。您一定也會這樣做。
將該腳本安裝到本地機(jī)器上的可運(yùn)行目錄下，然后使用curl命令向服務(wù)器發(fā)出請求。
% curl "http://localhost/sql/req.php"
<?xml version="1.0"?>
<records>
<record>
<database>addresses</database>
</record>
<record>
<database>ajaxdb</database>
</record>
...
%
在本例中，我并未指定數(shù)據(jù)庫或模式，這會要求腳本返回可用數(shù)據(jù)庫的清單。假如web服務(wù)腳本有權(quán)執(zhí)行該任務(wù)，則在curl語句后面就會顯示執(zhí)行的結(jié)果。在本例中，將以標(biāo)簽的形式顯示不同數(shù)據(jù)庫的列表。
該腳本返回的所有數(shù)據(jù)都帶有<records>標(biāo)簽，它包含一組<record>標(biāo)簽。每個<record>標(biāo)簽的名稱和內(nèi)容取決于已執(zhí)行的SQL語句。在本例中，只返回單列命名數(shù)據(jù)庫。
除了使用curl命令，還可將URL輸入瀏覽器中，然后在加載頁面后選擇“View Source（查看源文件）”。
在下例中，將連接articles數(shù)據(jù)庫并獲取它的表格列表。結(jié)果如下：
% curl ".../req.php?mode=getTables&db=articles"
<?xml version="1.0"?>
<records>
<record>
<tables_in_articles>article</tables_in_articles>
</record>
</records>
%
articles數(shù)據(jù)庫中只有一個名為article的表格，這并不奇怪。要運(yùn)行經(jīng)典的select * from article查詢以獲取所有記錄，可使用以下URL：
% curl ".../req.php?mode=getData&db=articles&table=article"
<?xml version="1.0"?>
<records>
<record>
<id>1</id>
<title>Apple releases iPhone</title>
<content>Apple Computer is going to release the iPhone...</content>
</record>
<record>
<id>2</id>
<title>Google release Gears</title>
<content>Google, Inc. of Mountain View California has...</content>
</record>
</records>
%
表格中有兩條記錄：第一條顯示Apple公司將發(fā)布超炫的IPhone；第二條顯示Google公司將發(fā)布同樣很炫、但用途完全不同的Gears系統(tǒng)。
在本地機(jī)器上安裝了極為強(qiáng)大且靈活的后臺程序后，就可以著手為其創(chuàng)建Flex前臺程序了。
創(chuàng)建用戶界面
我想以層的形式創(chuàng)建Flex應(yīng)用程序，首先是用戶界面，然后在框架中添加代碼以實現(xiàn)互動性。首先，若尚未安裝Flex SDK則先安裝。Flex SDK是免費(fèi)軟件，Flex Builder 2 IDE也有免費(fèi)試用版。可從http://www.flex.org/download下載Flex SDK。Flex SDK是免費(fèi)的，Flex 3 SDK也將成為開源軟件。Flex Builder是一種基于Eclipse的開發(fā)環(huán)境，通過拖放控件即可創(chuàng)建界面，但本例不必使用該工具。我非常喜歡使用標(biāo)簽，因此通常采用代碼視圖并直接修改MXML。
我想在界面頂部放置幾個控件并在底部放置一個數(shù)據(jù)網(wǎng)格，以顯示表中的數(shù)據(jù)。頂部的控件就是兩個下拉列表，可在其中選擇數(shù)據(jù)庫和表。
該窗體的MXML如清單2所示。
清單 2. flexmysql1.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:VBox horizontalAlign="left">
<mx:HBox>
<mx:Label text="Database:" />
<mx:ComboBox id="selectedDatabase" width="381" height="21">
</mx:ComboBox>
</mx:HBox>
<mx:HBox>
<mx:Label text="Table:" />
<mx:ComboBox id="selectedTable" width="381" height="21">
</mx:ComboBox>
</mx:HBox>
<mx:DataGrid id="dg1" width="452">
</mx:DataGrid>
</mx:VBox>
</mx:Application>
在Flex Builder 2中編譯及運(yùn)行這段代碼時，結(jié)果如圖1所示。
圖1.界面布局
相當(dāng)整潔，對吧？漸變背景很漂亮，控件也很美觀。我只做了極少量的工作。當(dāng)然，圖形設(shè)計師也可添加一些修飾，以使其更加美觀，例如過渡效果和圖像。而我還是喜歡整潔的界面，并要確保它在每臺客戶機(jī)上都具有一致的外觀和表現(xiàn)，而Ajax應(yīng)用程序要做到這一點并不容易。
獲取數(shù)據(jù)庫清單
補(bǔ)充Flex應(yīng)用程序代碼的第一步就是，當(dāng)應(yīng)用程序加載后在窗體頂部顯示數(shù)據(jù)庫的組合框。相關(guān)代碼如清單3所示。
清單 3. flexmysql2.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
initialize="onInitialize()">
<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:Script>
<mx:HTTPService id="myservice" result="onResult(event)" resultFormat="e4x">
</mx:HTTPService>
<mx:VBox horizontalAlign="left">
<mx:HBox>
<mx:Label text="Database:" />
<mx:ComboBox id="selectedDatabase" width="381" height="21">
</mx:ComboBox>
</mx:HBox>
<mx:HBox>
<mx:Label text="Table:" />
<mx:ComboBox id="selectedTable" width="381" height="21">
</mx:ComboBox>
</mx:HBox>
<mx:DataGrid id="dg1" width="452">
</mx:DataGrid>
</mx:VBox>
</mx:Application>
我省略了與前例類似的部分代碼，以縮短代碼段長度。差別重點在于<mx:HTTPService>標(biāo)簽，它將創(chuàng)建HTTP Service Flex對象，而后者將與服務(wù)器進(jìn)行通訊。該服務(wù)對象由onInitialize方法調(diào)用，而后者在Flex應(yīng)用程序啟動時調(diào)用。onInitialize方法先設(shè)置服務(wù)的URL，然后開始發(fā)出請求。請求完成后，就調(diào)用onResult方法。onResult方法將組合框的dataProvider設(shè)為web服務(wù)器的返回結(jié)果。
該方法最有價值的部分如下：
myservice.lastResult..database.*
看看這個語句。如果之前不了解E4X的作用，我可以稍加解釋。myservice.lastResult變量實際上是一個XML文檔。‘..’句法等價于XPath ‘//’句法。它表示“將具有此名字的任何一個標(biāo)簽給我”，在本例中就是“將任何一個數(shù)據(jù)庫標(biāo)簽給我”。星號表示數(shù)據(jù)庫標(biāo)簽的任何子標(biāo)簽。由于數(shù)據(jù)庫標(biāo)簽只有一個子標(biāo)簽，即數(shù)據(jù)庫名稱的文字部分，因此這段代碼就表示“將XML文檔中每個數(shù)據(jù)庫的名稱給我”。這個功能真的很好用！
正是由于ActionScript的這種E4X擴(kuò)展，Flex才能夠方便地與XML數(shù)據(jù)源進(jìn)行通訊。據(jù)我所知，還沒有其他語言能夠如此方便地查詢XML文檔。因此利用強(qiáng)大的E4X，就可以在瀏覽器中運(yùn)行該應(yīng)用程序，并得到如圖2所示的結(jié)果。
圖2.填充數(shù)據(jù)庫名稱的數(shù)據(jù)庫組合框
單擊該組合框時，將彈出下拉列表，并顯示機(jī)器中的數(shù)據(jù)庫列表。是的，其中有很多數(shù)據(jù)庫。幾乎每篇有關(guān)PHP、Flex、Rails或其他技術(shù)的文章都會用到數(shù)據(jù)庫，所以我擁有大量的數(shù)據(jù)庫。
創(chuàng)建表視圖代碼
創(chuàng)建示例Flex應(yīng)用程序的最后一步就是添加表格的下拉菜單，并在數(shù)據(jù)網(wǎng)格中顯示選中表格的數(shù)據(jù)。該例的完整代碼如清單4所示。
清單 4. flexmysql.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
initialize="onInitialize()">
<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 += "?mode=getTables&db="+selectedDatabase.selectedLabel;
myservice.url = url;
myservice.send(null);
} public function onSelectTable():void
{
var http://www.cnblogs.com/fjytzh/admin/String = SERVICE_BASE;
url += "?mode=getData&db="+selectedDatabase.selectedLabel;
url += "&table="+selectedTable.selectedLabel;
myservice.url = url;
myservice.send(null);
}
]]>
</mx:Script>
<mx:HTTPService id="myservice" result="onResult(event)" resultFormat="e4x">
</mx:HTTPService>
<mx:VBox horizontalAlign="left">
<mx:HBox>
<mx:Label text="Database:" />
<mx:ComboBox id="selectedDatabase" width="381" height="21"
change="onSelectDatabase()">
</mx:ComboBox>
</mx:HBox>
<mx:HBox>
<mx:Label text="Table:" />
<mx:ComboBox id="selectedTable" width="381" height="21"
change="onSelectTable()">
</mx:ComboBox>
</mx:HBox>
<mx:DataGrid id="dg1" width="452">
</mx:DataGrid>
</mx:VBox>
</mx:Application>
其中有一處重要修改，即添加了onSelectDatabase()函數(shù)的代碼，以獲取表格列表，然后將其輸入到onResult()函數(shù)中，還添加了onSelectTable()函數(shù)，該函數(shù)可檢索表格中的數(shù)據(jù)，并在onResult()處理器中設(shè)置數(shù)據(jù)網(wǎng)格。
在瀏覽器中運(yùn)行該例時，結(jié)果如圖3所示。
圖3. 運(yùn)行“show tables”查詢之后的結(jié)果
本例中使用了nasa數(shù)據(jù)庫，這是我為NASA Ames演講而創(chuàng)建的數(shù)據(jù)庫（我用了“火箭科學(xué)”的笑話，因為當(dāng)時我的聽眾是一群火箭科學(xué)家）。該數(shù)據(jù)庫只有一個名為mission的表，其中包含兩列，分別代表每項由NASA發(fā)起但已撤消的任務(wù)名稱和年份。
在數(shù)據(jù)網(wǎng)格中單擊名稱列即可按名稱排序，如圖4所示。
圖 4. 顯示mission表中的數(shù)據(jù)
然后單擊年份列，以按照年份排列數(shù)據(jù)，如圖5所示。
圖 5. 迪斯科球式查詢
在過去幾年中，我們似乎并未發(fā)起任何任務(wù)。
后續(xù)步驟
至此，本例已可應(yīng)用于許多場合。在前臺Flex應(yīng)用中，可以添加一些對用戶更友好的控件，以添加、刪除或更新表格。甚至可以提供數(shù)據(jù)過濾功能或者編輯功能，以修改表格中的數(shù)據(jù)。數(shù)據(jù)網(wǎng)格控件非常強(qiáng)大，可以處理現(xiàn)場編輯任務(wù)。也可以用在完全不同的場合，例如使用Flex繪圖軟件包執(zhí)行數(shù)據(jù)分析和可視化工作。
總結(jié)
PHP和Flex的結(jié)合潛力無限。利用PHP可以方便地在后臺發(fā)布web服務(wù)，可以單獨(dú)發(fā)布，可以與HTML前臺程序一起發(fā)布。PHPMyAdmin帶有web服務(wù)接口擴(kuò)展功能，使任何人都能以Flex、Ajax、Silverlight、桌面小部件或其他任何技術(shù)編寫前臺程序。Flex為PHP開發(fā)人員提供了強(qiáng)大的前臺工具。它避開了困擾Ajax開發(fā)人員的客戶端不兼容問題。Flex 2并非只能使用特定的服務(wù)器技術(shù)，因此Flex應(yīng)用程序編譯完成后，它就可以部署在任何場合，因為它只是一個SWF文件。可以看到，利用簡單的web服務(wù)對象和強(qiáng)大的E4X語言擴(kuò)展，就可以讓Flex應(yīng)用程序方便地與幾乎任何一種后臺程序進(jìn)行通訊。
讀者不妨一試，如果您使用PHP和Flex創(chuàng)建了有趣的程序，請告訴我，也許我們可以合寫一篇文章來介紹它。

本文來自CSDN博客，轉(zhuǎn)載請標(biāo)明出處：http://blog.csdn.net/java060515/archive/2008/01/30/2072602.aspx

轉(zhuǎn)載于:https://www.cnblogs.com/fjytzh/archive/2010/04/02/1703118.html

總結(jié)

以上是生活随笔為你收集整理的学习使用RIA Framework Flex创建MySQL管理UI（初学Flex实例教程）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。