把PHP應用和Flex結合起來！

 本文來自國外：http://www.sitepoint.com/article/pimp-php-app-flex/

Flex是Adobe的開源WEB應用程式框架，用於WEB或者案頭應用的快速開發。Flex可以讓你製作軟體，該軟體然後編入一個Flash (SWF)檔案中；在安裝了Flash 外掛程式後，該軟體可以在任何瀏覽器中運行。最棒的是，它使用起來非常有趣。你可以輕鬆地編寫出介面超眩的應用程式：令人影響深刻的效果，你只需再加上幾行代碼，就可以添加到你的應用程式裡。這樣，在短短的時間裡，你就可以編寫出超酷的應用程式了。哇，我是不是說過這個用起來很有趣啊。

如果你以前沒接觸過Flex, 那就讀讀我們前面的Flex輔導課程吧。你可以瞭解Flex Builder的整個安裝環境，和Flex開發的一些關鍵概念。

在本文中，我們會進一步學會將PHP和Flex結合起來: 在使用PHP的Flex中，製作一個產品資訊widget，以提取產品資訊。在開始之前，從Adobe中擷取一份Flex Builder 3的示範版――我們將要用它來製作我們的widget。

範例Widget

我們將要製作的小widget 會顯示產品的映像，並附有說明和產品資訊頁面的連結。它由這些基本元素構成：

· 一個Flex 應用程式以呈現widget;

· 一個包含Flash的HTML頁面；

· 然後，一個PHP指令碼將以XML或者JSON形式顯示產品資料

首先，我們將產品資訊嵌入Flex應用程式中，同時建立我們的widget。一旦我們整理出Flex部分，我們將改變代碼以學會從XML檔案中提取資料。

開始，我們使用Flex Builder建立新的Flex項目。輸入ProductWidget做為項目的名稱，確保應用程式的類型適應WEB應用程式，然後按Finish鍵。

這樣就構建了一個基本的項目，包括一個模板HTML檔案上傳和顯示應用程式，及一個裸骨應用程式－ProductWidget.mxml。除非你已改變了Flex Builder layout，在螢幕右邊的文字編輯器裡可看到主要的應用程式檔案。確保ProductWidget.mxml檔案在編輯器裡顯示。如果你不能確保，在左邊的檔案樹裡尋找一個名為ProductWidget.mxml的檔案，然後雙擊該檔案，以確保上傳了正確的檔案。

 

 

 

 

在檔案裡，你會看到Flex應用程式的啟動，包含在mx:Application標籤裡。我們將給widget增加一個box, 為映像增加一個預留位置號，和一個包含連結的按鈕。在mx:Application標籤之間，添加以下代碼：

 

<mx:VBox top="0" left="0" right="0" bottom="0"> <mx:Image id="image" width="150"/> <mx:LinkButton label="LinkButton" id="link" width="150"/> </mx:VBox>

mx:VBox 是一個layout布局組件，以確保映像和連結按鈕在其下各自顯示。兩項均為150像素寬。

在工具列裡點擊Run按鈕（綠色按鈕，內有白色箭頭）以確保各項正常工作。瀏覽器應該開啟並顯示比較空白的頁面，在左上方是我們之前建立的LinkButton。

 

下一步，我們將向Flex應用程式輸入產品映像，按鈕文字和按鈕連結。

傳遞參數

將參數傳遞給Flex的最基本的方法是：向包含我們的widget的HTML模板添加參數。舉例說明，我們需要提供三項數值：

· 顯示映像的URL (imageURL)

· 產品說明(productTitle)

· 關於產品詳細資料的連結(productLink)

我們需改變位於html-template 檔案裡的HTML模板，達到此目的。在預設條件下，如果用戶端需要安裝Flash外掛程式的話，該檔案含有可檢測Flash外掛程式的代碼，及安裝連結。一旦完成，它同時包含向Flex 應用程式傳遞參數的代碼。

在檔案裡，對於函數AC_FL_RunContent有兩個呼叫。一個是確保你使用的是用來呼叫你的SWF檔案的（另外一個是檢測到期版本後呼叫更新Flash Player的）。在我的模板裡，它大約在77行。該呼叫包含所有傳遞給Flex應用程式的模板。為了向你的Flex應用程式傳遞資料，你需要添加一個額外的參數flashVars，該參數可包含幾個其它以HTML URL編碼的參數，如同GET呼叫裡的變數一樣。我正使用來自stock.xchng by nitewind23的免費映像，映像的詳細螢幕在本展示中當作一個產品。

 

} else if (hasRequestedVersion) { // if we've detected an acceptable version // embed the Flash Content SWF when all tests are passed AC_FL_RunContent( "src", "${swf}", "width", "${width}", "height", "${height}", "align", "middle", "id", "${application}", "quality", "high", "bgcolor", "${bgcolor}", "name", "${application}", "allowScriptAccess","sameDomain", "type", "application/x-shockwave-flash", "pluginspage", "http://www.adobe.com/go/getflashplayer", "flashVars", "imageURL=http://www.sxc.hu/pic/m/n/ni/nitewind23/638995_dead_rubber_ducky.jpg&productTitle=Rubber%20duck&productLink=http://www.sxc.hu/photo/638995" ); // … }

如果使用者在瀏覽器上啟動了JavaScript，這就完全可以運行起來了。對沒使用JavaScript啟動瀏覽器的使用者來說，你也需要在模板的noscript欄裡添加參數。

我們的應用程式會從HTML模板裡接收參數――現在，我們需要告知應用程式怎樣使用它們。

在.mxml檔案裡的代碼要求放在mx:Script欄裡。我們在mx:VBox:的閉括弧後添加該欄。

 

 

<mx:Script> <!--[CDATA[ private var linkURL: String =""; private function onCreationComplete() : void { setData( application.parameters.imageURL, application.parameters.productTitle, application.parameters.productLink ); } private function setData(imageURL: String, productTitle:String, productLink:String) : void { image.source = imageURL; link.label = productTitle; linkURL = productLink; } private function onLinkClicked():void { navigateToURL(new URLRequest(linkURL)); } ]]--> </mx:Script>

private function serviceLoaded(event: ResultEvent) : void { var rawData:String = String(event.result); var data:Object = JSON.decode(rawData); setData( data.imageURL, data.productTitle, data.productLink ); }

最後範例的完成源，參見Listing 3.

HTTP請求的參數使用

現在，我們所有範例都直接請求資料。在真實的使用中，有可能你需要向相關的services 傳遞參數，如搜尋語或標籤。要在HTTPService裡設定參數，你添加一個包含了需要傳遞的參數的mx:Request 標籤，和一個請求的方法。如我們想要傳遞一個search參數，那就是：

 

<mx:HTTPService id="personRequest" url="http://www.example.com/service_json.php" resultFormat="text" result="serviceLoaded(event)" fault="serviceError(event)" method="GET" > <mx:Request> <search>duck</search> </mx:Request> </mx:HTTPService>

開始吧。

你看到了，將Flex和PHP結合起來非常簡單。如果你的PHP應用程式暴露返回XML或者JSON資料的服務，Flex可以瞬時抓取該資料。有意思的編碼。

onCreationComplete 讀取從HTML檔案傳遞來的參數，呼叫另外一個函數setData, 該函數將以我們從HTML模板接收到的參數佔據變數。鑒於在應用程式建立後立即呼叫此方法，我們可以確定資料在一開始就設定了。

setData 函數需三個參數：imageURL, productTitle, 和 productLink。 我們將使用imageURL 以設定映像的源，並可使用productTitle 設定顯示在連結按鈕上的標籤。productLink 需要儲存在我們剛定義的linkURL 變數裡，從而我們可以在使用者點選連結時即使用它。

最後，onLinkClicked函數將跳轉到在變數linkURL裡定義的連結。我們在下一步將會將該函數附加到按鈕上。

我們回到之前建立的mx:VBox 標籤，來尋找連結按鈕。如下所示，我們會添加一個click handler：

<mx:LinkButton label="LinkButton" id="link" click="onLinkClicked()"/>

最後，一旦上傳了該應用程式，我們就需要在進行此操作。我們將在應用程式上添加一個handler creationComplete該元素建立完畢後立即運行onCreationComplete函數。在最上處尋找mx:Application標籤，並添加handler：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
 layout="absolute"  
 creationComplete="onCreationComplete()" >

完整的.mxml 檔案應該像Listing 1.中的代碼一樣。

所有完成。按RUN按鈕，試下吧。結果如下所示：

 

添加一點趣味吧。

太容易了。我們來給應用程式添加一點眼珠糖果，然後在映像裡漸隱。就是在mx:Image 標籤裡添加completeEffect="Fade"：

<mx:Image id="image" height="150" completeEffect="Fade"/>

現在，再次運行該程式－你應該確保小鴨子的映像會漸漸隱退。在Flex裡有很多預定義的效果；定製或者建立屬於你的效果都非常容易。如需瞭解更多，請參閱Adobe LiveDocs的使用效果Working with effects。

現在，我們已經有了基本架構，以根據資料提供Flex應用程式。下一步就應該以更為令人激動的方式提供此類資料了：讓我們使用PHP來建立XML，運用我們的程式吧。

使用XML資料

如果你的應用程式能產生XML資料，該教程的下半部分將向你展示如果在Flex裡處理此類資料。我們可以輕鬆地建立XML，閱讀XML，而對XML的Flex支援也是簡明有效。這就是為什麼我們要使用它。讓我們來看看為此我們需要做的工作吧。

在我們開始前: 重點是我們應該記住Flash對從另外的域來獲得SWF儲存處的資料要求非常嚴格。你或者需要在PHP指令碼的域運行Flex應用程式，或者在PHP的伺服器上建立一個跨域策略。如需瞭解有關跨域策略和Flash安全模式的更多資訊，請閱讀Adobe 開發人員論壇(Adobe Developer Connection)文章。

鑒於我們將要使用HTTP 提取資料，我們將使用名為HTTPService的Flex class，以處理所有重要的事項。我們將告知HTTPService在哪裡串連，如何處理返回的資料。

為了試一下，我們需要為一個簡單的PHP資料提供編碼。在真實的情況下，你將要從一個資料庫中提取資訊。但是在這裡範例中，我們簡單些，寫入程式碼這些數值。這裡是一個PHP指令碼，使用函數讀取資料，建立一個變數保留資料，然後以XML格式輸出資料：

 

 

<?php header("Content-type: text/xml"); function getData() { $data["productLabel"] = "Rubber duck"; $data["productLink"] = "http://www.sxc.hu/photo/638995"; $data["imageURL"] = "http://www.sxc.hu/pic/m/n/ni/nitewin