jMaki 小工具使用介绍

本教程对 NetBeans IDE 中用 jMaki 框架进行 web 应用开发进行了介绍。 jMaki 是一个将各种常见和实用的网站功能封装成易于发布、可定制的基于 Ajax 的浏览器小工具的轻量级框架。 这些小工具可定制性很强，并且自身能够实现实用的功能，同时也能够以松散的方式和其他小工具组合起来发挥作用。 这些小工具可在您的 web 应用中收集并展现来自远端服务的数据。它们也可以为用户提供一种友好的方式来查找和操作这些数据。

您可以将一个小工具想象成一组采用 Ajax 技术的 web 应用功能的预制集合。 Ajax 在 RIA (Rich Internet Applications) 应用的创建中将 (X)HTML、 JavaScript、 CSS 和 XmlHttpRequest 协议结合起来。 RIA 应用可以提供桌面应用级的交互途径，没有整个页面的刷新所产生的等待和困惑，取而代之的是更新一小部分显示数据。

jMaki 的基础是 JSON (JavaScript Object Notation)，一种轻量级的，人、机可读的数据描述格式，这种格式基于一个 JavaScript 的子集。 JSON 使得我们可以在项目中 通过一个类似 HTML 的标记来使用 jMaki 小工具。 jMaki 小工具采用各种免费的预编译的 JavaScript 库，例如 Dojo、Script.aculo.us，以及那些来自Adobe (Spry)、 Google、 Yahoo 和 Flickr 的JS库 您也可以创建自己的 jMaki 小工具。

本教程采用 NetBeans IDE 6.1 发行版

持续时间: 30 分钟

内容

• 安装 jMaki 插件
• 创建一个使用 jMaki 的项目
• 添加并配置一个 jMaki 小工具
  • 创建一个数据文件
  • 将数据连接到小工具
• 运行项目
  • 向数据集中添加新条目
• 小结
• 更多尝试
• 更多信息

要开始本教程，您需要下面的软件和资源。
软件或者资源	所需版本
NetBeans IDE	Web and Java EE 安装 版本 6.1
jMaki Ajax 支持插件	1.7.3

先决条件

本教程需要您已经了解如下技术或者具有以下技术的编程经验：

• JavaScript 编程
• NetBeans IDE

在您开始之前

安装 jMaki 插件

提示: 在 NetBeans IDE 中安装 jMaki 插件的步骤在本文中略写。如果您需要更多有关安装插件的步骤指导，可以访问 添加一个 Web 框架支持。

1. 在 NetBeans IDE 中, 选择菜单 工具 > 插件。
2. 在弹出的窗口中选择可用插件标签
3. 在左面的列表中选择 jMaki Ajax 支持插件。
4. 点击安装，出现向导。
5. 点击下一步并接受许可证。
6. 点击安装。插件将被下载。
7. 点击立即重启 IDE ， 并点击完成。
8. 当 IDE 重启后，jMaki 插件和相关组件将被安装。

创建一个使用 jMaki 的项目

1. 在 NetBeans IDE 中， 选择菜单 文件 > 新建项目。 新建项目向导将会出现。
2. 选择 Web, 在后从新建项目窗口中选择 Web Application 点击下一步。
3. 为您的项目起一个名字，我们将我们的项目命名为 jMakiWebApp。 注意，一个项目文件夹将自动为我们命名好。确认您所需的项目位置被设定，然后单击下一步。

4. 在 服务器与设置下，我们使用 GlassFish v2 应用服务器，Java EE 版本应设为 JavaEE 5。点击下一步。

5. 选择 jMaki Ajax Framework。一组 CSS 布局集合将出现在下方，将为您的 web 页面提供基本的设计选择。我们选择列表中的第二项，叫做 Standard No Sidebars。
6. 点击完成。

一个新项目将被创建，并打开文件 index.jsp ，该页面已经包含了一个由 HTML 标记的基本页面结构。

注意右边出现的组建面板，里面列出了可用的 jMaki 小工具库，准备用在你的项目中。

添加并设置一个 jMaki 小工具

1. 在组件面板的 jMaki Dojo 栏内找到名为 Editable Table 的小工具。这个小工具是 Dojo JavaScript 库的一部分。它封装并提供了一个支持列排序和单元格编辑功能的表， 这个表在我们将小工具添加到项目中时就已经创建。
2. 将小工具拖放到 index.jsp 窗口内的 <div> 和 </div> 标签之间的"Main Content Area"处，(你可以删除 Main Content Area 这段文本。 这个文本只是告诉您内容要添加的位置。)
3. 选择 源 > 格式化 (Alt+Shift+F) 来整理代码。

注意： 当您完成拖放，一个dojo 目录出现在项目中的 resources 目录下。 在 dojo 目录下是一个叫做 etable 的目录，里面有配置文件以及为这个 Editable Table 小工具实例准备的其他资源。

您刚插入的代码类似于一种内建的 (X)HTML 标签，以尖括号开始并结束，以斜杠置于右尖括号的前面。value 属性中 就是普通的 JavaScript 数组，以 JavaScript 的一个叫做 JSON 的子集的格式出现。

创建数据文件

让我们来看看 /resources/dojo/etable/ 目录里面。我们要在这里创建一个新的空白文档来保存用于提供给这个小工具使用的数据。

1. 右键单击 etable 目录并选择 新建 > 其他。
2. 在出现的向导窗口中，从左边的分类中选择 其他 。
3. 从右边的文件类型列中选择 JSON 文件 点击下一步。
4. 键入 books 作为文件名。 (NetBeans 将为我们添加 .json 文件扩展名。)
5. 点击完成。
6. 一个叫做 books.json 的文件已经创建好并被打开。将下面的文本复制到 books.json 中，替换其中所有已存在的文本。

{
	columns : [
		{ label : 'Title', id : 'title'},
		{ label : 'Author', id : 'author'},
		{ label : 'ISBN', id : 'isbn'},
		{ label : 'Description', id : 'description'}
	],
	rows : [
		{
			title : 'Book Title 1',
			author : 'John Smith', 
			isbn: '4413', 
			description : 'Some long description'
		}, 
		{ 
			title : 'Book Title 2', 
			author : 'Adam Jones', 
			isbn : '4412', 
			description : 'Another long description'
		}, 
		{ 
			title : 'Book Title 3', 
			author : 'Emily Watkins', 
			isbn : '4411', 
			description : 'Yet another description'
		}
	]
}

7. 选择 文件 > 保存以保存您的工作。

将数据连接到小工具

现在让我们回到文件 index.jsp。我们已经注意到 value 属性包含一个由引号括起来的 JSON 数组。我们将替换 <a:widget ... />标签中value 属性中的数据，以便更好的展示 您先前添加的 Editable Table 小工具的列排序功能。我们将通过用service 属性替换 value 属性的办法来演示 jMaki 小工具可以被连接到一个服务，而不是 重新键入一段新的数组。

注意：服务既可以包括可执行代码也可以包括数据。而我们的服务将简单的返回数据数组，用这些数据我们将更好的展示 Dojo Editable Table 组件的功能。 我们的新 service 属性将简单的告诉我们的 web 应用在哪里找到 web 应用。要指向我们刚创建的服务，只需键入 books.json 的根路径。

1. 从标签内的value属性开始，一直选择到封闭斜杠-尖括号"/>".

2. 删除所选内容，在当前位置填入以下内容：

service="/resources/dojo/etable/books.json"

3. 保存。

运行项目

现在我们要开始测试我们的项目了。

1. 选择 运行 > 运行主项目。
2. 切换到您的浏览器来查看我们运行的项目。

请观察，如果您点击每一列的表头，您可以对表行按照所选的列进行排序。您也可以通过再次点击该表头对其进行反向排序。 每一列都是独立可排序的，提供相同数据的各种视图。

再请注意，表中的每个单元格都是可以编辑的。您可以双击一个单元格，然后用新的信息来替换他们。

注意： 当前可编辑的单元格只作为一个演示。除非 web 应用连接到一个额外的服务支持，否则新的信息不会被保存， 并且对单元格信息的修改不会影响到列的排序。刷新页面将会使表格恢复原来的数据。从浏览器界面将数据的改变进行保存不再本快速入门教程的讨论范围之内。

Adding New Items to the Data Set

Let's add another item to our list to see how it affects the output. Go back to the books.json file.

1. 粘贴下面的代码到行组的第二个元素后面。当心。 JavaScript 数组中的逗号的位置是很重要的，如果弄错就可能导致运行失败。 直接把代码粘贴到'Another long description'},后面的最后一个逗号后面，但是在{ title : 'Book Title 3',之前：

{ 
	title : 'Book Title 4', 
	author : 'Christine Aubrey', 
	isbn : '4410', 
	description : 'And another description'
},

2. 格式化代码并保存更改。
3. 返回您的浏览器并选择刷新。

注意： 您不必再次运行项目，简单的刷新页面就足够显示更新的内容了。

小结

在本教程中，您已经学习了向您的 web 应用项目中添加 jMaki 小工具的基本步骤。您还学习了有关 .json 对象的格式以及如何放置并在您项目的其他文件中连接他们。

Doing More

组件面板中还有更多 jMaki 小工具供您体验。他们当中的每一个都包含一组类似于我们的 Dojo Editable Table 小工具的资源和配置文件的集合。

更多信息

• 访问 jMaki 项目主页.
• 访问 JSON 主页.
• 更多 Ajax 教程请访问 javapassion.com。