跟我學用Flex中的MySQL管理

火星人 @ 2014-03-09 , reply:0
←手機掃碼閱讀

用Flex連接MySQL資料庫相信各位還比較陌生,今天我們就來全面介紹下Flex
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
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庫連接資料庫.如果沒有安裝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 version="1.0"?>


addresses


ajaxdb

...
%
在本例中,我並未指定資料庫或模式,這會要求腳本返回可用資料庫的清單.假如web服務腳本有權執行該任務,則在curl語句後面就會顯示執行的結果.在本例中,將以標籤的形式顯示不同資料庫的列表.
該腳本返回的所有數據都帶有

標籤,它包含一組標籤.每個標籤的名稱和內容取決於已執行的SQL語句.在本例中,只返回單列命名資料庫.
除了使用curl命令,還可將URL輸入瀏覽器中,然後在載入頁面后選擇「View Source(查看源文件)」.
在下例中,將連接articles資料庫並獲取它的表格列表.結果如下:
% curl ".../req.php?mode=getTables&db=articles"
<?xml version="1.0"?>


article


%
articles資料庫中只有一個名為article的表格,這並不奇怪.要運行經典的select * from article查詢以獲取所有記錄,可使用以下URL:
% curl ".../req.php?mode=getData&db=articles&table=article"
<?xml version="1.0"?>


1

Apple Computer is going to release the iPhone...


2

Google, Inc. of Mountain View California has...


%
表格中有兩條記錄:第一條顯示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"?>

initialize="onInitialize()">

-->{
selectedDatabase.dataProvider = myservice.lastResult..database.*;
}
]]>


















我省略了與前例類似的部分代碼,以縮短代碼段長度.差別重點在於標籤,它將創建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"?>

initialize="onInitialize()">

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()處理器中設置數據網格.
在瀏覽器中運行該例時,結果如圖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創建了有趣的程序,請告訴我,也許我們可以合寫一篇文章來介紹它.





[火星人 via ] 跟我學用Flex中的MySQL管理已經有264次圍觀

http://www.coctec.com/docs/linux/show-post-58702.html