本文共 10871 字,大约阅读时间需要 36 分钟。
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 是 WebSphere sMash 的开发社区,并将继续为开发人员提供免费的应用程序开发平台,以及最新的构建、最新的特性和社区支持。
花一些时间浏览和熟悉 。可以加入 Project Zero 社区、为这个项目做贡献,或参与论坛,在各个开发阶段对项目进行评价。本文只要求您的计算机上安装了合适的 Java™ Development Kit (JDK)。您还应当熟悉 PHP 和 JavaScript. 的概念。
Project Zero 为快速简便地开发交互式 Web 应用程序提供了开发环境。这个项目的目的是为 Web 开发提供一个完整的基础设施,让应用程序开发人员可以将注意力集中在业务逻辑上。为了展示 Project Zero 的入门是多么简单,本教程将指导您先创建一个空目录,安装所需的所有开发工具,然后使用 PHP 作为后端脚本语言开发一个 Ajax Web 2.0 样例。将使用 Eclipse 作为开发环境。
本教程提供了所需的所有操作说明,但是在 Project Zero 站点上可以找到下载和安装 Project Zero for PHP 的完整说明(请参阅 )。
现在,让我们遵循此列表中的步骤安装 Project Zero for PHP:
现在已经设置了开发环境,可以开始安装 Eclipse 插件,从而支持在 Project Zero 中使用 PHP 进行开发,操作步骤如下:
现在可以添加一个新的远程站点,用于搜索软件更新:
现在已经安装了 Project Zero for PHP 环境。系统提示重新启动 Eclipse,之后环境就可以使用了。现在来创建一个简单的 PHP 应用程序。
开始开发您的首个应用程序的第一步是在 Eclipse 中创建一个新的 Zero 项目,操作步骤如下:
由于选择了 Project Zero PHP application,因此 Zero 已经知道您将使用 PHP,所以它在项目的 config 目录中放置一个适当的 php.ini 文件。清单 1 中给出这个 INI 文件的内容片段。清单 1 中的代码行让 PHP 装载 Zero 扩展。
extension = zero.php.ZeroExtensionextension = zero.php.JSONExtensionextension = zero.php.LoginServiceExtensionextension = zero.php.ACFExtensionextension = zero.data.php.QueryExtensionextension = zero.php.XMLExtensionextension = zero.php.NetworkExtensionextension = 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,但是它实际上不包含任何 PHP;它仅仅是 HTML,所以使用扩展名 .html 也可以。在这个表单中可以包含 PHP 脚本,但是您将创建另一个名为 action.php 的表单来处理数据发送。注意,代码行 form. action='action.php' 将告诉服务器由哪个脚本处理这一操作。
现在在 public 目录中创建第二个 PHP 文件 action.php,粘贴清单 3 中的代码并保存文件:
Processing your entry The request was a $method"; $keys = zlist('/request/params', true); echo " Here is the data: "; echo "
| $keys[$i] | "; $value = zget($keys[$i]); if (is_array($value)) { for ($j=0;$j"; echo ""; } echo " |
清单 3 中的代码混合了 HTML 代码和 PHP 代码。PHP 代码输出一些 HTML,但是使用了在原表单中输入的值。这个表单的 Project Zero 部分如下:
$method = zget('/request/method');$keys = zlist('/request/params', true);...$value = zget($keys[$i]); |
清单 4 的第一行使用 zget(),这个方法是 Zero 运行时的一部分,是通过在 php.ini 文件中添加 Zero 扩展导入 PHP 中的。此方法将从全局上下文中获得一个值。第二行显示 zlist() 的使用,其中全局上下文中的条目是键/值对列表,该输入适用于 “/request/params”。包含清单第 3 行的循环将遍历接收到的键,获得相应值,并把它作为数组或字符串输出。
这两个表单组成了一个完整的 Zero 示例应用程序。在 Eclipse 中右键单击项目名并选择 Run as > Project Zero Application;在本地主机的 8080 端口上启动一个 Web 服务器。现在可以启动浏览器并访问 http://localhost:8080/MyFirstForm.php,应当会看到输入表单。输入一些数据,例如 This is my zero project 并单击按钮。现在应该会看到输出表单,其中的表格显示输入的数据(参见 ):
可以单击浏览器中的 Back 按钮返回输入表单,输入不同的数据,再次单击 post a message 时会显示新的数据。单击控制台窗口中的红色方块符号,就可以停止应用程序。
理解 Project Zero 的关键是,了解在 Global Context(也就是 get() 方法执行查找的地方)中可以查询和设置哪些数据元素,以及如何使用其他插件(例如 data zero)在数据库中存储和检索数据。
|
在导出项目之前,必须单击控制台选项卡上面的标题中的红色方块来停止 Zero 服务器。在停止服务器之后,按照以下步骤导出应用程序:
这个 .zip 文件只是一种传输项目的方法。如果希望从命令行运行它,则需要安装命令行 Zero 运行时并将项目解压缩到它的 apps 目录中。
现在,要将这个应用程序部署到 Zero 服务器上,按照 Project Zero 文档中的说明(请参阅 )访问命令行 Zero 运行时。需要按照 CLI 安装说明运行 “zero seed”,这会选择 Zero 核心库。文档小节的其余内容将讨论安装示例和创建 apps 目录,所以可以继续安装示例以供稍后使用,也可以自己用 Windows® Explorer 创建 apps 目录。完成这些步骤之后,返回本练习的当前位置。
|
现在,按照以下步骤运行应用程序:
既然已经创建了一个简单的 PHP 应用程序,接下来就该看看用 JavaScript. 和 Dojo 添加 Ajax 功能有多么简单了。首先执行以下步骤:
在这个应用程序中,还要使用 Dojo,所以需要告诉 Zero 执行以下步骤:
|
现在,让我们为应用程序创建一个 JavaScript. 和 HTML 前端。
在 public 目录中,创建一个名为 Example.html 的新文件。粘贴清单 5 中的代码并保存文件:
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 |
所示的代码目前根本没有与服务器进行交互;它仅仅在单击 Enter 按钮时弹出 “The button was pressed” 消息。代码没有在按钮内使用传统的 onClick,而是使用 Dojo 事件系统注册一个在装载页面时调用的方法。
现在,应该试着运行此应用程序以确保此应用程序的 Dojo 部分运行正常:
接下来,添加一些代码将单击按钮事件发送给 Zero,并通过一个小 PHP 脚本接收并处理它:
看起来应该很熟悉,它与本教程中的第一个示例很相似。它只是获得消息并返回内容以供显示。
接下来,返回到 Example.html 并添加 enterPressed 函数以与先前创建的 ExampleResponse 绑定在一起:
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 所示):
祝贺您!您现在已经完成了一个 Zero Ajax 应用程序。它可能不是您编写过的最完整的 Web 应用程序,但是您不得不承认编写这种应用程序确实很容易。
如果服务器端上一切正常,那么当然很好;但是,如果出现错误,应该怎么办呢?作为一个练习,我们来修改 PHP 脚本,故意制造一个错误,看看如何调试它。
修改脚本的第一行,让它包含清单 10 所示的错误代码:
$method = zget('request/method'); |
在上下文定义的前面现在少了一个反斜杠,所以肯定会出现错误。保存更改,然后返回到浏览器中,刷新 Example.html 页面,然后观察这一次单击 Enter 时发生的情况。这时会弹出一条帮助消息,它准确地指出脚本中出现错误的代码行和发现的错误。该框将类似下面的图 7,我在其中通过把关键字 “method” 拼错生成了一个类似的错误(参见 )。
注:在前端处理程序代码中,您可以看到报告的错误没有被标记为 type='error',这种类型的错误通常发生在联系服务器时。这里的错误只是一个来自服务器的响应,其中包含关于脚本错误的详细信息。
另一个有用提示是 P8 引擎也记录错误。可以在 php.ini 中将 log_errors 标志设置为 On,并将 error_log 标志设置为所选文件名。然后同样的错误就会被写入到该文件中。在遇到真正的 PHP 语法错误时应该查看日志,我们现在就来试试。
修改 config 目录中的 php.ini 文件,将 mathod 改回 method,将 的内容添加到 ExampleResponse.php 文件中的 PHP 代码中的任意位置:
this is not a line of php |
再次运行这个页面时,应该会看到错误消息,并且在错误日志文件中也会记录相同的语法错误(在默认情况下,日志文件显示在项目的根目录中。可能必须右键单击项目名并选择 Refresh 才能看到它)。
在继续之前,不要忘记删除错误的 PHP 代码行!
最后,为了增加趣味,我们向服务器报告鼠标的位置。服务器的响应方式是将这个位置放到一个文本框中。如果在每次移动鼠标时都发送它的位置,那么系统的使用效率可能较低,但是这演示了 Ajax 的交互性。
为了让 Dojo 把页面的主体识别为控件并跟踪鼠标移动,您必须给主体命名。您还必须添加新部件以显示返回的结果。页面的主体部分应当类似清单 10:
Type your name then press enter: Enter Mouse Position: |
接下来,在 init() 方法中添加代码,将鼠标移动处理程序与事件关联起来,然后保存修改。init() 方法应当类似清单 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 文件中:
现在应当能够运行该页面,并看到位置更新,如图 8 所示:
应当在关闭服务器之前关闭此页面;否则,每次移动鼠标时,都会收到错误消息!
在本次练习中,您完成了以下操作:
现在您已经完成了一个小型 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 社区,请一定要访问 。请经常访问 developerWorks,查看 Project Zero 库的频繁更新。
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/14789789/viewspace-406673/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/14789789/viewspace-406673/