Project Zero、WebSphere sMash和PHP入门

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 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 <?php $method = zget('/request/method'); echo " The request was a $method"; $keys = zlist('/request/params', true); echo " Here is the data: "; echo " Key Values

$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 依赖项

图 3b. 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: 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 后端

<?php $method = zget('/request/method'); echo " The request was a $method "; $keys = zlist('/request/params', true); echo "\n Here is the data: "; for ($i=0;$i

清单 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: 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 后端

<?php $keys = zlist('/request/params',false); for ($i=0;$i

现在应当能够运行该页面，并看到位置更新，如图 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/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/14789789/viewspace-406673/