Project Zero、WebSphere sMash和PHP入門

CloudSpace發表於2008-07-21
原文網址 : http://blog.itpub.net/14789789/viewspace-406673/
ProjectWebPHP

Project Zero 提供了一個軟體開發環境，可以基於流行的 Web 技術（例如 PHP）快速開發互動式 Web 應用程式。本教程將演示如何輕鬆掌握 Project Zero 基礎，包括開發工具的安裝，以及使用 PHP 作為後端指令碼語言構建一個 Ajax Web 2.0 示例。順便討論如何匯出應用程式，並通過示例講解如何除錯和擴充套件 Web 2.0 應用程式。

編者注：IBM® WebSphere® sMash 和 IBM WebSphere sMash Developer Edition 以非常受歡迎的 Project Zero 孵化專案為基礎。Project Zero 是 WebSphere sMash 的開發社群，並將繼續為開發人員提供免費的應用程式開發平臺，以及最新的構建、最新的特性和社群支援。

開始之前

花一些時間瀏覽和熟悉 Project Zero Web 站點。可以加入 Project Zero 社群、為這個專案做貢獻，或參與論壇，在各個開發階段對專案進行評價。本文只要求您的計算機上安裝了合適的 Java™ Development Kit (JDK)。您還應當熟悉 PHP 和 JavaScript. 的概念。

Project Zero 概述

Project Zero 為快速簡便地開發互動式 Web 應用程式提供了開發環境。這個專案的目的是為 Web 開發提供一個完整的基礎設施，讓應用程式開發人員可以將注意力集中在業務邏輯上。為了展示 Project Zero 的入門是多麼簡單，本教程將指導您先建立一個空目錄，安裝所需的所有開發工具，然後使用 PHP 作為後端指令碼語言開發一個 Ajax Web 2.0 樣例。將使用 Eclipse 作為開發環境。

本教程提供了所需的所有操作說明，但是在 Project Zero 站點上可以找到下載和安裝 Project Zero for PHP 的完整說明（請參閱 參考資料）。

安裝 Project Zero for PHP

現在，讓我們遵循此列表中的步驟安裝 Project Zero for PHP：

  1. 建立一個新的空目錄（例如，zero_example）。
  2. 在 Eclipse 內下載面向 PHP 的完整開發環境（有關連結，請參閱 參考資料）。注：在下載頁面中，必須選擇一個版本（本練習選擇的是穩定版本 S20070910-RC1，但是提供的版本會隨時間變化，所以應該選擇最新的穩定版本）。重要資訊：早期版本（例如 S20070611-M1）不再與當前版本的 Project Zero 一起使用。下載適合您的作業系統的 PDT .zip 檔案（例如，pdt-all-in-one--win32.zip），並將它解壓縮到 zero_example 目錄中。例如，如果使用 Eclipse，那麼會產生一個名為 zero_example//eclipse 的目錄。

現在已經設定了開發環境，可以開始安裝 Eclipse 外掛，從而支援在 Project Zero 中使用 PHP 進行開發，操作步驟如下：

  1. 執行 zero_example/eclipse 目錄中的 eclipse.exe 副本，在出現提示時，輸入一個新的工作空間名，例如 zero_example/workspace。
  2. 在選單中，選擇 Help > Software Updates > Find and Install...。
  3. 在出現的對話方塊中，選擇 Search for new features to install 並單擊 Next。

現在可以新增一個新的遠端站點，用於搜尋軟體更新：

  1. 單擊 New remote site，在出現的對話方塊中給出站點名稱，例如 Project Zero。
  2. 為這個新的遠端站點分配下面的名稱：http://www.projectzero.org/update/zero.eclipse.php.latest。
  3. 單擊 OK，然後在外部對話方塊中單擊 Finish。
  4. 在搜尋結果對話方塊中，選擇樹中的整個 Project Zero 元素並單擊 Next。
  5. 接受許可協議並單擊 Next。
  6. 單擊 Finish 和 Install All。

現在已經安裝了 Project Zero for PHP 環境。系統提示重新啟動 Eclipse，之後環境就可以使用了。現在來建立一個簡單的 PHP 應用程式。

開發應用程式 1：MyFirstProject

開始開發您的首個應用程式的第一步是在 Eclipse 中建立一個新的 Zero 專案，操作步驟如下：

  1. 選擇 File > New > Project... 並在對話方塊中展開 Zero 類別（參見 圖 1）。
  2. 選擇 Project Zero PHP Application 並單擊 Next。
  3. 給專案命名（例如，MyFirstProject）並單擊 Finish。專案現已建立。

圖 1. Project Zero 類別

Project Zero 類別

由於選擇了 Project Zero PHP application，因此 Zero 已經知道您將使用 PHP，所以它在專案的 config 目錄中放置一個適當的 php.ini 檔案。清單 1 中給出這個 INI 檔案的內容片段。清單 1 中的程式碼行讓 PHP 裝載 Zero 擴充套件。


清單 1. Project Zero PHP 擴充套件
                
extension = zero.php.ZeroExtension
extension = zero.php.JSONExtension
extension = zero.php.LoginServiceExtension
extension = zero.php.ACFExtension
extension = zero.data.php.QueryExtension
extension = zero.php.XMLExtension
extension = zero.php.NetworkExtension
extension = zero.php.URIUtilsExtension

Zero 還在 ivy.xml 檔案中新增了必需的 PHP 依賴項。如果在瀏覽器中雙擊這個檔案，就會在列表中看到 zero.php 依賴項（要獲得其他引用，單擊 Add 檢視可以新增的其他模組列表）。

現在已經在 Zero 中啟用了 PHP，並且啟用了 Zero PHP 擴充套件，所以 Zero 執行時可以呼叫 P8 引擎來處理 Web 應用程式傳送的資料。PHP 可以使用 Zero PHP 擴充套件的服務訪問 Zero Global Context。

Zero Global Context 是 Zero 開發的關鍵之一。伺服器需要從客戶機獲得的所有內容都可以放在 Global Context 中（有關更多資訊，請參閱 Zero 文件的 Core Developer's Guide；有關連結，請參閱 參考資料）。

這個過程中的下一步是建立一個簡單的 PHP 應用程式，它允許使用者在客戶端輸入一些資料，然後在伺服器端用 PHP 指令碼讀取它。

建立 PHP 應用程式

在開始開發之前，要檢查視窗右上角的透檢視名稱，確保是在 PHP 透檢視中進行開發。如果目前不在 PHP 透檢視中，請單擊視窗右上角的加號圖示來切換透檢視。

接下來，按照以下步驟開始開發：

  1. 展開 MyFirstProject 目錄。
  2. 右鍵單擊 public 目錄並建立一個名為 MyFirstForm.php 的 PHP 檔案。將 清單 2 所示的程式碼複製到表單中，覆蓋預設的 PHP 標記並儲存檔案：

清單 2. 一個簡單的表單
                
<!--Input form. with one field and a button--&gt


   My First Form

注：副檔名是 .php，但是它實際上不包含任何 PHP；它僅僅是 HTML，所以使用副檔名 .html 也可以。在這個表單中可以包含 PHP 指令碼，但是您將建立另一個名為 action.php 的表單來處理資料傳送。注意，程式碼行 form. action='action.php' 將告訴伺服器由哪個指令碼處理這一操作。

現在在 public 目錄中建立第二個 PHP 檔案 action.php，貼上清單 3 中的程式碼並儲存檔案：


清單 3. 一個簡單的 PHP 後端
                


Processing your entry
The request was a $method";

$keys = zlist('/request/params', true);

echo "
Here is the data:
";

echo "
"; echo ""; for ($i=0;$i"; echo "
KeyValues
$keys[$i]"; $value = zget($keys[$i]); if (is_array($value)) { for ($j=0;$j"; echo ""; } echo "
"; ?>

清單 3 中的程式碼混合了 HTML 程式碼和 PHP 程式碼。PHP 程式碼輸出一些 HTML，但是使用了在原表單中輸入的值。這個表單的 Project Zero 部分如下：


清單 4. 從 Global Context 獲得資訊
                
$method = zget('/request/method');
$keys = zlist('/request/params', true);
...
$value = zget($keys[$i]);

清單 4 的第一行使用 zget()，這個方法是 Zero 執行時的一部分，是通過在 php.ini 檔案中新增 Zero 擴充套件匯入 PHP 中的。此方法將從全域性上下文中獲得一個值。第二行顯示 zlist() 的使用，其中全域性上下文中的條目是鍵/值對列表，該輸入適用於 “/request/params”。包含清單第 3 行的迴圈將遍歷接收到的鍵，獲得相應值，並把它作為陣列或字串輸出。

執行 PHP 應用程式

這兩個表單組成了一個完整的 Zero 示例應用程式。在 Eclipse 中右鍵單擊專案名並選擇 Run as > Project Zero Application；在本地主機的 8080 埠上啟動一個 Web 伺服器。現在可以啟動瀏覽器並訪問 http://localhost:8080/MyFirstForm.php，應當會看到輸入表單。輸入一些資料，例如 This is my zero project 並單擊按鈕。現在應該會看到輸出表單，其中的表格顯示輸入的資料（參見 圖 2）：

圖 2. 輸出示例


可以單擊瀏覽器中的 Back 按鈕返回輸入表單，輸入不同的資料，再次單擊 post a message 時會顯示新的資料。單擊控制檯視窗中的紅色方塊符號，就可以停止應用程式。

理解 Project Zero 的關鍵是，瞭解在 Global Context（也就是 get() 方法執行查詢的地方）中可以查詢和設定哪些資料元素，以及如何使用其他外掛（例如 data zero）在資料庫中儲存和檢索資料。

匯出應用程式

我的 .zip 檔案沒有在 Eclipse 中出現

這個 .zip 檔案將被寫到磁碟中，但它不是 Eclipse 生成的工件，所以 Eclipse 還沒有註冊它。右鍵單擊專案名並選擇 Refresh。

在匯出專案之前，必須單擊控制檯選項卡上面的標題中的紅色方塊來停止 Zero 伺服器。在停止伺服器之後，按照以下步驟匯出應用程式：

  1. 在 Eclipse 中右鍵單擊專案並選擇 Export...。
  2. 展開 Zero 類別並選擇 Project Zero Export Wizard。
  3. 選擇要匯出的目標目錄名稱並選取核取方塊以包含原始碼。
  4. 最後，選擇 Finish，專案就會匯出為目標目錄中的一個 .zip 檔案。

這個 .zip 檔案只是一種傳輸專案的方法。如果希望從命令列執行它，則需要安裝命令列 Zero 執行時並將專案解壓縮到它的 apps 目錄中。

現在，要將這個應用程式部署到 Zero 伺服器上，按照 Project Zero 文件中的說明（請參閱 參考資料）訪問命令列 Zero 執行時。需要按照 CLI 安裝說明執行 “zero seed”，這會選擇 Zero 核心庫。文件小節的其餘內容將討論安裝示例和建立 apps 目錄，所以可以繼續安裝示例以供稍後使用，也可以自己用 Windows® Explorer 建立 apps 目錄。完成這些步驟之後，返回本練習的當前位置。

部署出現問題

如果在裝載 MyFirstForm.php 時遇到了錯誤 500，請先檢查 config 目錄中是否確實有 php.ini 檔案。如果沒有這個檔案，請在其他示例專案或安裝 PHP 的目錄中找到這個檔案。

如果在裝載操作表單時遇到 unknown method get() 錯誤，請檢查 php.ini 檔案中是否定義了 Zero 擴充套件。

現在，按照以下步驟執行應用程式：

  1. 把從 Eclipse 匯出的 .zip 檔案解壓縮到 /apps 目錄中。這會在 apps 下為應用程式建立目錄結構。根據解壓縮 .zip 檔案的方式，可能會產生一個應用程式目錄（例如，MyFirstProject）或者一個包含應用程式目錄的基目錄。
  2. 必須將目錄切換為應用程式的基目錄（其中必須有一個名為 config 子目錄）並輸入 zero resolve。
  3. 最後，輸入 zero run。這應該會在 8080 埠上啟動最初在 Eclipse 看到的伺服器。瀏覽器現在應該能夠裝載 MyFirstForm.php 檔案。
  4. 只需在命令提示下按 Ctrl-C 組合鍵就可以再次停止伺服器。

新增 Ajax 功能 —— 應用程式 2：在 MyFirstDojoApp 中使用 Ajax 和 Project Zero

既然已經建立了一個簡單的 PHP 應用程式，接下來就該看看用 JavaScript. 和 Dojo 新增 Ajax 功能有多麼簡單了。首先執行以下步驟：

  1. 首先，單擊 File > New > Project...，在 Eclipse 中建立一個新的 Zero 應用程式專案。
  2. 選擇 Project Zero PHP 應用程式型別並單擊 Next。
  3. 給專案命名（例如，MyFirstDojoApp）並單擊 Finish。

在這個應用程式中，還要使用 Dojo，所以需要告訴 Zero 執行以下步驟：

  1. 展開 MyFirstDojoApp 和 config 目錄。
  2. 開啟 ivy.xml 檔案，並在 Zero Package Information 窗格中單擊 Add...。
  3. 在 Dependency Selection 視窗中，查詢 Dojo 依賴項（如 圖 3 中列表的頂部所示）；如果找到該依賴項，則轉到第 8 步。
  4. 如果沒有列出 Dojo 依賴項，則單擊 Manage Repository（參見 圖 3）。
  5. 在 Manage Repository 視窗中，單擊 Search（不必輸入任何其他資料）。
  6. 稍等一會兒（搜尋資訊庫），就會出現一個列表（參見 圖 3b）。
  7. 選擇 Dojo 依賴項，單擊 Download，然後單擊 Close。
  8. 在 Dependency Selection 視窗中選擇 Dojo... 並單擊 OK（在 Zero Package Information 窗格中，應該會看到 Dojo 已經新增到依賴項列表中了）。
  9. 使用 File > Save 選單儲存更改。

圖 3. Dojo 依賴項

Dojo 依賴項

圖 3b. Manage Repository 視窗

Manage Repository 視窗
更新 Zero 依賴項

所有依賴項（例如 Dojo 和 PHP）都處於版本控制之下。為了確保獲得最新的版本，只需單擊 Eclipse 工具欄中的 Update Dependencies 按鈕，或者從選單中選擇 Zero > Update Dependencies（參見 圖 4）。

圖 4. 更新依賴項

更新依賴項

現在，讓我們為應用程式建立一個 JavaScript. 和 HTML 前端。

在 public 目錄中，建立一個名為 Example.html 的新檔案。貼上清單 5 中的程式碼並儲存檔案：


清單 5. 一個小型的 javascript. 前端
                


Dojo Zero Example

 @import "dijit/themes/noir/noir.css";
 @import "dojo/dojo.css"



dojo.require("dijit.form.Button");
dojo.require("dojo.parser");

function enterPressed() {
alert('The enter button was pressed');
}







Type your name then press enter:

清單 5 所示的程式碼目前根本沒有與伺服器進行互動；它僅僅在單擊 Enter 按鈕時彈出 “The button was pressed” 訊息。程式碼沒有在按鈕內使用傳統的 onClick，而是使用 Dojo 事件系統註冊一個在裝載頁面時呼叫的方法。

測試驅動的 Dojo

現在，應該試著執行此應用程式以確保此應用程式的 Dojo 部分執行正常：

  1. 右鍵單擊專案名並選擇 Run as... > Project Zero Application。
  2. 開啟瀏覽器並訪問 http://localhost:8080/Example.html。
  3. Example.html 應該顯示一個輸入皮膚，其中包含一個按鈕和一個輸入欄位（參見圖 5）。在輸入欄位中輸入一些文字並單擊按鈕。檢驗是否彈出一條包含 “The enter button was pressed” 文字的訊息。
  4. 現在，可能需要下載 Google Firebug（一種 Firefox 擴充套件）並將它安裝在 Firefox 中。然後，Firefox 就允許單步除錯複雜的 JavaScript. 檔案。
  5. 如果看到了輸入皮膚，但是在單擊按鈕時沒有看到訊息，那麼很可能是沒有使用 Dojo。檢查 Enter 按鈕的字型和形狀（參見圖 5）。Dojo 控制元件是根據頁面頁首所示的模板（在我們的例子中為 “noir”）設定樣式的；正常的系統字型和按鈕圖形表示 Dojo 沒有執行。重新檢查專案對上文設定的 Dojo 的依賴項（參見 圖 3）。

圖 5. Dojo 按鈕


新增 PHP 後端並完成前端

接下來，新增一些程式碼將單擊按鈕事件傳送給 Zero，並通過一個小 PHP 指令碼接收並處理它：

  1. 在 public 目錄中，建立一個新檔案 ExampleResponse.php。
  2. 貼上 清單 6 中的程式碼並儲存檔案：

清單 6. 另一個 PHP 後端

清單 6 看起來應該很熟悉，它與本教程中的第一個示例很相似。它只是獲得訊息並返回內容以供顯示。

接下來，返回到 Example.html 並新增 enterPressed 函式以與先前建立的 ExampleResponse 繫結在一起：


清單 7. 與 PHP 後端對應的 enterPressed 函式
                
function enterPressed()
{
    var deferred = dojo.xhrGet({
        url: "ExampleResponse.php",
        handleAs: "text",
        content: {name: dojo.byId('name').value},
        timeout: 5000, //Time in milliseconds
        handle: function(response, ioArgs){
            if(response instanceof Error){
                if(response.dojoType == "cancel"){
                     alert("Request cancelled.");
                }else if(response.dojoType == "timeout"){
                     alert("Request timed out.");
                }else{
                     alert(response);
                }
            }else{
               alert(response);
            }
        return response;
        }
});
}

顯示報警的處理程式將被嵌入到上面的 enterPressed 函式的定義中。這將替換本文前面針對 Dojo 0.4.3 的 dojo.io.bind 呼叫。

確保儲存所有工作。

現在應當能夠轉到瀏覽器，重新整理 Example.html 頁面，在名稱欄位中輸入一些文字，單擊 Enter 按鈕，然後看到伺服器返回的 “request was a GET” 訊息（如圖 6 所示）：

圖 6. 應用程式


完成的 Zero Ajax 應用程式

祝賀您！您現在已經完成了一個 Zero Ajax 應用程式。它可能不是您編寫過的最完整的 Web 應用程式，但是您不得不承認編寫這種應用程式確實很容易。

如果伺服器端上一切正常，那麼當然很好；但是，如果出現錯誤，應該怎麼辦呢？作為一個練習，我們來修改 PHP 指令碼，故意製造一個錯誤，看看如何除錯它。

除錯 PHP 程式碼

修改指令碼的第一行，讓它包含清單 10 所示的錯誤程式碼：


清單 10. 錯誤程式碼
                
$method = zget('request/method');

在上下文定義的前面現在少了一個反斜槓，所以肯定會出現錯誤。儲存更改，然後返回到瀏覽器中，重新整理 Example.html 頁面，然後觀察這一次單擊 Enter 時發生的情況。這時會彈出一條幫助訊息，它準確地指出指令碼中出現錯誤的程式碼行和發現的錯誤。該框將類似下面的圖 7，我在其中通過把關鍵字 “method” 拼錯生成了一個類似的錯誤（參見 圖 7）。


圖 7. 錯誤訊息
錯誤訊息

注：在前端處理程式程式碼中，您可以看到報告的錯誤沒有被標記為 type='error'，這種型別的錯誤通常發生在聯絡伺服器時。這裡的錯誤只是一個來自伺服器的響應，其中包含關於指令碼錯誤的詳細資訊。

另一個有用提示是 P8 引擎也記錄錯誤。可以在 php.ini 中將 log_errors 標誌設定為 On，並將 error_log 標誌設定為所選檔名。然後同樣的錯誤就會被寫入到該檔案中。在遇到真正的 PHP 語法錯誤時應該檢視日誌，我們現在就來試試。

修改 config 目錄中的 php.ini 檔案，將 mathod 改回 method，將 清單 9 的內容新增到 ExampleResponse.php 檔案中的 PHP 程式碼中的任意位置：


清單 9. 錯誤的 PHP 程式碼行
                
this is not a line of php

再次執行這個頁面時，應該會看到錯誤訊息，並且在錯誤日誌檔案中也會記錄相同的語法錯誤（在預設情況下，日誌檔案顯示在專案的根目錄中。可能必須右鍵單擊專案名並選擇 Refresh 才能看到它）。

在繼續之前，不要忘記刪除錯誤的 PHP 程式碼行！

跟蹤滑鼠

最後，為了增加趣味，我們向伺服器報告滑鼠的位置。伺服器的響應方式是將這個位置放到一個文字框中。如果在每次移動滑鼠時都傳送它的位置，那麼系統的使用效率可能較低，但是這演示了 Ajax 的互動性。

為了讓 Dojo 把頁面的主體識別為控制元件並跟蹤滑鼠移動，您必須給主體命名。您還必須新增新部件以顯示返回的結果。頁面的主體部分應當類似清單 10：


清單 10. 新部件
                





Type your name then press enter: 









Mouse Position:

接下來，在 init() 方法中新增程式碼，將滑鼠移動處理程式與事件關聯起來，然後儲存修改。init() 方法應當類似清單 11：


清單 11. 連結頁面主體中的滑鼠移動
                
function init()
{
   var domElement = document.getElementById('body');
    
    dojo.connect(domElement, 'onmousemove',	
		function (evt)
		{
    		var deferred = dojo.xhrGet({
        	url: "MouseResponse.php",
        	handleAs: "text",
       		content: {x:evt.pageX , y:evt.pageY},
        	timeout: 5000, //Time in milliseconds
        	handle: function(response, ioArgs){
            if(!(response instanceof Error)){
        		dojo.byId('pos').value = response;
       		}
        	return response;
        }
		});
	}
    );}
    
dojo.addOnLoad(init);

最後，在 public 目錄中新增一個滑鼠移動處理 PHP 指令碼，並像清單 11 中的程式碼一樣將它命名為 MouseResponse.php。把清單 12 的內容貼上到該 PHP 檔案中：


清單 12. 處理滑鼠移動的 PHP 後端

現在應當能夠執行該頁面，並看到位置更新，如圖 8 所示：

圖 8. 應用程式


應當在關閉伺服器之前關閉此頁面；否則，每次移動滑鼠時，都會收到錯誤訊息！

結束語

在本次練習中，您完成了以下操作：

  • 安裝了 Eclipse Development Environment for PHP。
  • 安裝了 Project Zero 環境以在 Web 2.0 中進行 PHP 開發。
  • 用簡單的 HTML 表單和 PHP 後端開發了一個應用程式。
  • 匯出了應用程式並從 Zero 命令列執行它。
  • 開發了第二個 PHP 應用程式，它用 JavaScript. 和 HTML 組合成前端。
  • 製造了一些錯誤並除錯錯誤。
  • 用一個額外的回撥函式和新的 Dojo 部件擴充套件了 Ajax 應用程式。

後續內容

現在您已經完成了一個小型 Ajax Zero 應用程式，可以使用 Dojo 庫和 PHP 後端指令碼開發更多的功能。為什麼不結合使用這些工具和 Data Zero 元件，並使用 Apache Derby 構建一個真正的資料檢索系統呢？Project Zero 提供的 Employee Demo PHP 示例是一個好起點。參考資料 部分中的 Project Zero Documentation 連結會將您帶到 Project Zero 演示程式。

如果希望瞭解關於 Zero Global Context 和 Resource (REST) Handling 等相關主題的更多資訊，請參閱 參考資料 中列出的 Project Zero Developer's Guide。

我們希望本教程中的內容可以幫助您開始學習 Project Zero。如果您希望加入 Project Zero 社群，請一定要訪問 projectzero.org。請經常訪問 developerWorks，檢視 Project Zero 庫的頻繁更新。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/14789789/viewspace-406673/，如需轉載，請註明出處，否則將追究法律責任。

相關文章