使用 IBM WebSphere sMash DE 创建 Web 应用程序

简化 Web 应用程序的创建

IBM WebSphere® sMash Developer Edition 1.1 (DE) 提供一个称为 App Builder 的基于 Web 的开发环境,用于开发 Web 应用程序。学习如何使用这个工具创建一个简单的在线 RSVP 应用程序,用于提供 Atom 提要。

Yoav Rubin, 软件工程师, IBM

Yoav Rubin 拥有以色列特克尼奥恩技术学院计算机科学系信息系统工程专业的学士学位。在过去 8 年的时间里,他一直在 IBM Haifa Research Lab 担任软件工程师,主要从事可视化应用程序开发工具和复杂事件处理领域。他的主要兴趣有 Java 和 Web 2.0 技术、终端用户开发和可用性。



Gal Shachor, 高级技术人员, IBM

Gal Shachor 是一名在 IBM Haifa Research Lab 工作的 IBM 高级技术人员和研究人员,并从事各种与中间件和富 Internet 应用程序相关的主题。Gal 是 JSP Tag Libraries 一书和多篇技术文章的作者。



Brandon J.W. Smith, 软件工程师, IBM

Brandon J. Smith 拥有卡内基梅隆大学的硕士学位。他的兴趣点是 REST 数据服务、Web 范围数据库和云计算。



2009 年 9 月 28 日

简介

从头开始开发 Web 应用程序有时比较困难。开销(overhead)任务,如数据库设置和用户界面设计,需要不少的技巧集。为此,IBM 引入了带有 App Builder 的 Webshpere sMash DE,提供一套用于创建应用程序的工具,同时将许多单调的、有时甚至很困难的任务抽象化。这减少了您的脑力劳动,以便集中精力关注主要工作 — 一个可以正常运行和工作的 Web 应用程序。

RSVP 系统是我们经常需要使用的一个 Web 应用程序,它允许您邀请朋友参加一个活动并预先得知他们的意图和需要。本文将介绍如何创建这样一个应用程序并展示 App Builder 的好处。


场景

本文假设您的朋友的 50 岁生日即将来临,您想邀请一些朋友及其家人参加生日聚会。您是个大忙人,所以您想向所有受邀者发送一个简单的 RSVP 表单的链接,并在每个表单被提交时收到通知。


创建应用程序

从这个项目的 Web 站点(参见 参考资料)下载 IBM WebSphere sMash,然后按照该站点的指导将其正确安装在您的系统上。安装结束后,从命令提示发送以下命令启动 App Builder:

appbuilder open

App Builder 将被打开,您将看到图 1 所示的屏幕:

图 1. 初始屏幕
App Builder Welcome 屏幕的屏幕截图。一个标签为 “Actions” 的菜单有各种选项,其中 “Create new application” 以红圈标出。

(单击查看 图片细节

首先通过单击 Create new application 链接(图 1 中圆圈位置)创建一个新应用程序。在新建应用程序对话框中,将应用程序命名为 Birthday RSVP 并单击 Create。结果类似图 2 中的屏幕截图。

图 2. 应用程序管理屏幕
My Applications 屏幕上的 Application Builder 的另一个屏幕截图。

(单击查看 图片细节

现在单击带有应用程序名称的链接(图 2 中的圆圈位置)切换到应用程序编辑视图,如图 3 所示:

图 3. 应用程序编辑
应用程序视图屏幕中的 Application Builder 的屏幕截图。

(单击查看 图片细节

创建数据模型

作为第一个组件,定义一个 Zero Resource Model (ZRM) — 这等同于一个关系数据库表,但在表上提供各种服务。特别是,ZRM 提供一个基本的 Atom 提要服务,本文稍后将用到该服务。

要创建这个数据模型,打开 New File 菜单(图 3 中红色圆圈位置),然后选择 Create a Zero Resource Model (not based on a form)。在弹出对话框中将这个模型文件命名为 invitation.json。App Builder 将打开模型编辑器,如图 4 所示。

图 4. 空的 ZRM 编辑器
带有 ZRM 的 Application Builder 的屏幕截图。

(单击查看 图片细节

在模型编辑器中单击选项菜单(图 4 中红色圆圈位置),将以下字段添加到模型:

  • 字符串字段 — 用于受邀者的姓名
  • Boolean 字段 — 标明受邀者是否携带配偶
  • 字符串字段 — 用于添加各种注释

完成后,编辑器如图 5 所示。

图 5. 带有字段的 ZRM Editor
图 4 中的编辑器页面的 Fields 列表现在填充了几个条目,分别命名为 string1、boolean1 和 string2。

(单击查看 图片细节

下面,通过单击属性图标(图 5 中的红色箭头标出)设置字段属性并设置每个字段的以下属性:

  • 对于第一个字符串字段,将其名称设置为 name,标签设置为 Enter your name,选中 Required 复选框。
  • 对于 Boolean 字段,将其名称设置为 withSpouse,标签设置为 Arriving with spouse
  • 对于第二个字符串字段,将其名称设置为 comments,标签设置为 Additional comments

现在模型完成了。ZRM 框架将自动创建一个支持数据库来存储这个模型定义的数据实例。ZRM 将默认使用 Derby 数据库,除非您配置为使用其他支持的数据库。本文将接受默认值 Derby 数据库。

通过切换到 Console 选项卡(图 3 中的黄色圆圈位置)并在命令提示中输入以下命令为这个资源创建数据库表格:

zero model sync

您将看到一条控制台消息,确认 Derby 数据库已经创建。

最后,为这个模型创建 HTTP 资源处理器。在 New File 菜单中,选择 Create a Resource Handler。将其命名为 invitation.groovy 并将它的内容设置为 ZRM.delegate()

您已经成功创建了数据模型。

创建表单

邀请表单是刚创建的数据模型的用户界面。因此,您可以基于该模型创建一个表单并将它配置为在一个特定事件发生时出现。

首先在 New File 菜单中选择 “create a Zero resource form based on a model”。将它命名为 rsvp.json 并将它的模型设置为 invitation.json,如图 6 所示。

图 6. 基于模型的新表单
“New form based on a model” 配置窗口

(单击查看 图片细节

这将打开表单编辑器。在表单编辑器中,将表单标题设置为 Welcome to the party,说明设置为 Please fill up this RSVP form。这个编辑器应该类似于图 7。

图 7. 表单编辑器
这个 Application Builder 窗口显示了一个表单,标题为 “Welcome to the party”,还带有一条消息 “Please fill up this RSVP form”。

(单击查看 图片细节

这个数据输入表单的创建过程到此结束。

创建邀请页面

现在您将创建一个 Web 页面来持有一个表单,受邀者将使用该表单来输入必要的信息。

首先在 New File 菜单中选择 Create an HTML file,将文件命名为 invitation.html

下面,添加一个 ZRM 表单元素,它可以在编辑窗口右侧的选项菜单中的 Zero 部分找到。通过右键单击表单属性进行编辑,在弹出菜单中选择 Properties。在 Relative URI to form model file: 字段中输入 ./zero/forms/rsvp.json。结果如图 8 所示。

图 8. HTML 页面编辑器
带有 “Welcome to the party” 覆盖表单的 HTML 页面编辑器

(单击查看 图片细节

这个数据输入 Web 页面的创建至此结束。

运行这个应用程序

剩下的工作就是运行这个应用程序,只需单击 Start(图 3 中的红色圆圈位置)即可。最后,将以下链接发送给所有受邀者:http://[your-server]:8080/invitation.html,

打开这个链接,将看到图 9 所示的页面。

图 9. 用户看到的表单
指向 “http://localhost:8080/invitation.html” 的浏览器的屏幕截图。屏幕中央是我们的表单,带有 Submit 和 Clear 选项。

(单击查看 图片细节

接收 Atom 提要

为了在每个 RSVP 表单提交时收到通知,将以下 URL 添加到您喜爱的提要阅读器中:http://[your-server]:8080/resources/invitation?format_as=atom。表单提交时,您将看到通知。


结束语

IBM WebSphere sMash 和基于 Web 的 App Builder 是一对强大的工具,它们使具有编程技巧的用户能够根据需要创建 Web 应用程序,并且只需要满足最基本的数据库和表单设计要求。本文只是这个功能的简单介绍。花点时间进行实践,您将看到这两个工具如何开始实现很早以前就作出承诺的零编程程序创建愿景。

参考资料

学习

获得产品和技术

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development, WebSphere
ArticleID=431159
ArticleTitle=使用 IBM WebSphere sMash DE 创建 Web 应用程序
publish-date=09282009