AUIML Toolkit 入门

?

AUIML Toolkit 入门		? 英文原文

内容： AUIML 如何工作？ 使用 AUIML Toolkit 的好处 安装和运行工具包 创建和运行自己的 AUIML 面板 结束语 参考资料 作者简介 对本文的评价 相关内容： AUIML Toolkit (download) Introduction to XML Introduction to Web applications in WebSphere Studio Application Developer IBM developer kits for the Java platform (downloads) 新 alphaWorks 工具包加速 Java GUI 开发 ? 级别: 初级 Andy Arhelger （[email protected]） , 软件工程师, IBM Andy Hanson （[email protected]） , 软件工程师, IBM Anthony Erwin （[email protected]） , 软件工程师, IBM 2004 年 8 月 Abstract User Interface Markup Language 工具包是一种快速开发工具，可以帮助开发人员编写 GUI，以便将其作为 Swing 应用程序运行或者在 Web 上运行，而无需进行任何更改。在这篇循序渐进的文章中，该工具包的创建者 Andy Arhelger、Andy Hanson 和 Tony Erwin 将带您浏览他们的技术，并详细介绍在哪儿获得这些技术，以及如何安装和使用它们。 可以从 IBM alphaWorks 获得 Abstract User Interface Markup Language (AUIML) Toolkit（请参阅 参考资料），它包含生成用 XML 方言表示的面板定义的 Visual Builder。该生成器还生成了运行时代码存根，以便将数据传输到面板小部件、从面板小部件传输数据和进行事件处理。应用程序编程人员只需添加专门用于应用程序的业务逻辑，就可以驱动面板。然后可以将 AUIML 定义传送到某一个 AUIML Toolkit 运行时呈现程序，该呈现程序将显示 AUIML 中描述的面板，并管理数据传输和事件。 AUIML 如何工作？ AUIML 是一种 XML 方言，是面板、向导、属性表等组件的平台和技术无关的表示方法。AUIML 捕获用户界面组件的相对定位信息，并使用特定于平台的呈现程序显示这些组件。根据使用的平台或设备，呈现程序可以确定向用户提供用户界面和接收用户输入的最佳方式。AUIML XML 是使用基于 Eclipse 的 AUIML Visual Builder 创建的，AUIML Visual Builder 向开发人员提供了一种在 Java Swing 和 HTML Renderer 中快速构建和预览用户界面的方法。AUIML Visual Builder 还可以自动为用户界面创建数据 bean、事件处理程序和帮助系统骨架。因为 AUIML Visual Builder 插入到了 Eclipse 中，所以构建用户界面和应用程序代码是一个综合过程。 使用 AUIML Toolkit 的好处 使用 AUIML 的好处包括： 快速开发：使用 Visual Builder 的拖放界面以及用于管理数据传输和事件的自动生成代码可以快速创建 GUI。这项功能可以让您将精力集中在专门用于应用程序的业务逻辑上，而无需担心不同 GUI 窗口小部件的特定特性。 ? 跨环境应用程序：使用 AUIML Toolkit，被创建的应用程序可以在多个呈现环境中运行单一来源的数据。为了将 Swing 作为 servlet 或 portlet 运行和为了在 Web 中运行， AUIML Toolkit 工具包提供了呈现程序。可以在这两种环境中使用相同的二进制文件来驱动应用程序；只需要对二进制文件进行不同的部署即可。 ? 不受技术更改的影响：因为不用将应用程序代码直接写人运行该代码的环境的 API，所以在对核心技术进行更新时，AUIML 呈现程序承担了更新和修复工作。 ? 国际化：生成器自动将面板中放置的可转换字符串存储到 Java ResourceBundle 中。然后，可以很容易地生成这些 bundle 的 Locale 特定版本。 ? 输入验证：呈现程序提供了内置、区分区域的输入验证。该验证中的一些作业是完全自动的；例如，如果用户在数值字段中输入“abc”，呈现程序将捕获错误和显示适当的错误消息，无需担心应用程序代码。可以在生成器中定义各种简单的数据格式范围，例如 Max Value。呈现程序还将验证用户提供的数据置于该界限内，并在输入值超出范围时显示适当的错误消息。应用程序还可以进行更复杂的验证并显示错误。 ? 可访问性：AUIML Toolkit 利用 Swing 和 Web 的功能来支持可访问性。生成器内有一项检查可访问性的功能，可以检测面板中潜在的可访问性问题，并对如何可以更正这些问题进行了说明。 ? 双向 (BIDI) 支持：AUIML Toolkit 呈现程序利用其表现环境的 BIDI 支持，来显示习惯于从右向左读的语言（如希伯来语和阿拉伯语）的面板。 ? 帮助：Visual Builder 还生成存根 HTML 文件和其他工具，以便轻松地开发帮助系统。 安装和运行工具包 在这一节中，我们将介绍如何安装和运行工具包。不过，首先要确保平台满足适当的要求。下面的列表显示了运行 AUIML Toolkit 所需的操作系统和软件： 操作系统 AUIML Visual Builder：Windows 2000 或 XP。 AUIML 运行时环境：Windows 2000、XP 或 Red Hat Linux 9。 客户机浏览器：Internet Explorer 6.0、Mozilla 1.4 或 Netscape 7.1。 ? 软件 ? 对于 AUIML Visual Builder Eclipse 2.0 或 WebSphere Studio Application Developer 5.0.1。 对于 AUIML HTML 呈现程序：WebSphere Application Server 5.01 或 Tomcat 4.0、4.1 Java JDK 1.4。 ? 安装工具包 下载工具包（请参阅 参考资料），并将其解压缩到您的计算机。 按照下列步骤，将 Visual Builder 插件添加到 Eclipse 或 WebSphere Studio 中： 打开 Eclipse Install/Update 透视图。 ? 在 Feature Updates 视图中，导航到对 auiml.zip 进行解压缩的地方，然后转至 auiml/VisualBuilder/csa_5.0.0 目录，如图 1 中所示： 图 1. 安装 Visual Builder 插件 右击 eclipse 项，然后从弹出菜单中选择 Link Product Extension。 运行 Swing 示例 示例源代码位于 Toolkit/samples/com/ibm/ui/samples 目录中。在 Swing 环境中有两种运行示例的方法： 可以使用 .bat 示例文件。因为运行时间可以在不同的操作系统上运行，而 .bat 文件是特定于 Windows 的，所以我们不提供该文件。下面的代码显示了一个 .bat 文件，该文件将在 Windows 环境中运行 auiml/Toolkit/ 目录中的示例。您应该根据解压缩工具包的目录调整下列清单中指定的 auiml/Toolkit 目录。可以为其他操作系统修改这个文件。 ? set CONFIG=auiml/Toolkit/csa_runtime/config set SETTINGS=auiml/Toolkit/csa_runtime/settings set LIB=auiml/Toolkit/csa_runtime/lib set EXT=%LIB%/ext set SAMPLES=auiml/Toolkit/samples/lib/auiDemos.jar java -cp "%SAMPLES%;%CONFIG%;%SETTINGS%;%LIB%/auibase.jar;%LIB%/auifw.jar; %LIB%/auii18n.jar;%LIB%/auiswing.jar;%EXT%/jhall.jar; %EXT%/swing11spinner_Runtime.jar;%EXT%/uil.jar" com.ibm.ui.samples.SampleLauncher ? 还可以使用 Ant 运行示例。我们提供了 build.xml 文件来驱动 AUIML。先下载并安装 Ant（请参阅 参考资料），然后切换到 Toolkit/Samples 目录，并在命令行中输入 ant run。出现图 2 中所示的示例窗口。可以单击列表中的示例来启动该示例。 图 2. 运行示例 运行 WebSphere Studio 中的 HTML 示例 要运行 HTML 示例，需要将 auiwebdemos.war 文件部署到 Web 服务器中。可以将 WAR 文件部署到 WebSphere Application Sever 或 Tomcat 中。下面的指令专门用于将 WAR 部署到 Tomcat Web 服务器中，可以从 Apache Jakarta Web 站点（请参阅 参考资料）获得 Tomcat Web 服务器。将 WAR 部署到 WebSphere Application Sever 的过程与上述过程非常相似。 创建新的 Web 项目。 从菜单栏中选择 File > New > Project。 在 New Project 向导中，先从左边面板中选择 Web，然后从右边面板中选择 Dynamic Web Project，如图 3 中所示： 图 3. 创建 Web 项目 单击向导中的 Next。 输入项目名称 AuimlTest，然后单击 Finish。 ? 导入 WAR 文件。 右击 AuimlTest 项目，然后选择 Import 选项。 选择 WAR file，然后单击 Next，如图 4 中所示。 图 4. 选择导入源 导航到 auiwebdemos.war 文件，然后单击 Finish，如图 5 中所示： 图 5. 导入 WAR 文件 将项目与 Web 服务器相关联。 转至 Server Perspective，右击 Tomcat 服务器，然后选择 Add and Remove Projects 选项。 ? 选择 AuimlTest 项目，单击 Add 按钮，然后单击 Finish 按钮，如图 6 中所示： 图 6. 将项目与 Web 服务器相关联 启动 Web 服务器。 再次右击 Tomcat 服务器，然后选择 Start。 ? 运行 Web 示例。 启动 Web 浏览器，并输入 URL http://localhost:8080/AuimlTest/html/samplelauncher.jsp。将出现显示示例启动程序的窗口，如图 7 中所示： 图 7. Web 示例 使用 Eclipse 运行 Web 示例 因为 Eclipse 没有标准 Web 服务器，所以您必须安装标准 Web 服务器。您可以选择使用 WebSphere Application Server Express 或 Tomcat。这些指令都使用了 Tomcat，可以从 Apache Jakarta Web 站点（请参阅 参考资料）获得 Tomcat。 启动 Tomcat 服务器，然后打开 Tomcat Web Application Manager（位于 http://localhost:8080/manager/html）。 在 Install 部分，在“Upload a WAR file to install”框中输入路径 auiwebdemos.war（图 8）。 图 8. Tomcat 安装 单击 Install 按钮。您应该可以看到，auiwebdemos 文件已经列在应用程序列表中。 ? 打开浏览器，指向 http://localhost:8080/auiwebdemos/html/samplelauncher.jsp，以显示 AUIML Application Launcher 窗口，如图 9 中所示： 图 9. Tomcat 示例 创建和运行自己的 AUIML 面板 现在您已经成功运行了示例，下一个重要步骤是创建您自己的一个简单的 AUIML 面板。我们将介绍如何使用 Eclipse 的插件 Visual Builder 来创建面板。Visual Builder 可以让您拖放控件来轻松创建面板。 设计一个简单面板 可以使用 Visual Builder 来创建简单或复杂的面板。在开始设计面板时，应该有一个基本的概念，知道需要哪些控件，以及如何在面板中放置这些控件。而且，每个控件都有许多属性，可以设置这些属性来定制控件和指定初始值。例如，数值控件允许您指定最小值和最大值。可以使用该控件的属性设置这些值。现在我们将使用文本输入字段和几个按钮来创建一个简单的面板。 从 WebSphere Studio 或 Eclipse 中打开 Visual Builder 透视图。 ? 通过选择 File > New > AUIML file 创建一个新文件，并将其命名为 AuimlTest。 ? 在新 AuimlTest 文件的 Contents 视图中，右击 Panels 项，然后选择 Create Panel。现在将看到一个名为 Panel1 的新项，该项列在 Panels 下。图 10 显示了这个新面板： 图 10. 创建 AUIML 面板 您将获得包含 OK、Cancel 和 Help 按钮的空白 AUIML 面板，如图 11 中所示： ? 图 11. 第一个面板 单击控制面板上的 EditBox > String，然后单击 Panel1 中的右上网格。现在，面板应该如图 12 所示： 图 12. 包含 EditBox 的面板 转至 Properties 视图，并在 Caption 属性中输入 Some Text。现在，面板应该如图 13 所示： 图 13. 包含 EditBox 和文本的面板 每个控件都可以有一个与之相关的标题，这是基本面板所需要的。让我们也在面板中输入一个标题。 在 Contents 视图中，单击 Panel1 显示面板的属性。 ? 在 Panel1 的 Caption 属性中输入 Some Title。输入标题不会更改面板的 Visual Builder 视图。 ? 通过单击工具栏中 Preview 按钮旁边的箭头按钮来预览面板，并选择 IBM Swing。应该出现如图 14 中所示的窗口： 图 14. Swing 预览 单击工具栏中 Preview 按钮旁边的箭头，并选择 IBM HTML 4.0 (Desktop)。应该可以看到图 15 中的窗口： ? 图 15. HTML 预览 在菜单栏中，选择 File > Save 保存文件。 接着，我们将创建一个 Java 程序，以便在 Swing 环境中运行该面板。 在 Swing 中运行您的面板 要运行您的面板，请完成下列步骤： 在 Eclipse 或 WebSphere Studio 中切换到 Java 透视图。 ? 使用 main() 方法创建一个新的 Java 类文件，然后将其命名为 RunAuimlTest.java，如图 16 中所示： 图 16. 创建新的 Java 类 使用下列代码创建 RunAuimlTest： ? import com.ibm.ui.application.WebApplicationAdapter; import com.ibm.ui.framework.Capabilities; import com.ibm.ui.framework.DataBean; import com.ibm.ui.framework.IllegalUserDataException; import com.ibm.ui.framework.TaskActionEvent; import com.ibm.ui.framework.TaskActionListener; import com.ibm.ui.framework.TaskManagerException; import com.ibm.ui.framework.UserTaskManager; public class RunAuimlTest extends WebApplicationAdapter implements DataBean, TaskActionListener { static final String auimlFileName = "AuimlTest"; // Package qualified file name static final String auimlPanelName = "Panel1"; public static void main(String[] args) { RunAuimlTest runTest = new RunAuimlTest(); runTest.render(WebApplicationAdapter.MODE_VIEW); } public RunAuimlTest(){ } /* * @see com.ibm.ui.framework.DataBean#load() */ public void load() { } /* * @see com.ibm.ui.framework.DataBean#verifyChanges() */ public void verifyChanges() throws IllegalUserDataException { } /* * @see com.ibm.ui.framework.DataBean#save() */ public void save() { } /* * @see com.ibm.ui.framework.DataBean#getCapabilities() */ public Capabilities getCapabilities() { return null; } /* * @see com.ibm.ui.framework.TaskActionListener#actionPerformed (com.ibm.ui.framework.TaskActionEvent) */ public void actionPerformed(TaskActionEvent event) { } /* * @see com.ibm.ui.application.WebApplicationAdapter#render(java.lang.String) */ public void render(String arg0){ try { // Call load on the dataBean, which sets up the data to be returned // from the getter methods. this.load(); // We pass in the name of the auiml file, the panel name, the data bean and // we get the user context UserTaskManager utm = new UserTaskManager (auimlFileName,auimlPanelName,new DataBean[]{this},getUserContext()); // We implement TaskActionListener so add the listener to the utm utm.addTaskActionListener(this); utm.invoke(); // Displays the panel } catch (TaskManagerException e) { e.printStackTrace(); } } } 方法 load()、verifyChanges()、save() 和 getCapabilities() 来自 DataBean 实现，actionPerformed() 方法则来自实现 TaskActionListener。在主类中实现 DataBean 和 TaskActionListener 可能适用于简单的示例，对于更复杂的应用程序，则需要在单独的 Java 类中实现 DataBean。 可以设置 Visual Builder 来自动生成 DataBean() 方法存根。要进行此操作，需要在 Visual Builder 的目录视图中选择 auiml 文件。属性视图包含名为 Generate Data Beans 的属性，应该将该属性设为真。对于单个控件，可以指定 Binding 属性。该属性允许您将 DataBean getter 和 setter 与该控件捆绑在一起。当为控件指定绑定时，需要指定包、类名称和属性。类名称是 DataBean 类名称，而属性则被创建到 getter 和 setter 方法名称中。然后，在保存 auiml 文件时，如果 Visual Builder 没有找到与其相匹配的类，它会自动创建 DataBean 类，或者更新一个现有类。 ? 保存和编译代码。 您需要为 RunAuimlTest 应用程序创建一个运行配置，如图 17 中所示： 图 17. 运行配置 类路径需要包含必需的 auiml JAR 文件。图 18 显示了一个示例： 图 18. 运行类路径 运行 RunAuimlTest 程序时，应该可以看到我们讨论的测试面板，如图 19 中所示： 图 19. 运行面板 在 Web 中部署和运行应用程序 既然已经了解了在 Swing 中运行的新的 AUIML 应用程序，接下来我们将向您显示如何在 Web 应用程序服务器中运行该应用程序。要运行该应用程序，请执行下列步骤： 将 auiwebdemos.war 文件（位于 auiml/Toolkit/csa_runtime 目录中）解压缩到一个临时目录中。 ? 将文件 AuimlTest.auiml、AuimlTest.properties 和 RunAuimlTest.class 放入 WEB-INF/classes 目录中（应该在临时目录内创建该目录）。可以使用 WebSphere Studio 或 Eclipse 导出这些文件，也可以手工导出这些文件。（还可以将这些文件放入 WEB-INF/lib 内一个名为 myauiml.jar 的新 JAR 文件中。） ? 将临时目录压缩回名为 myapplication.war 的 WAR 文件。 ? 使用用于特定应用程序服务器类型的适当指令，将新的 WAR 文件部署到您选择的应用程序服务器中。 ? 通过将 Web 浏览器指向 http://localhost:8080/myapplication/WnServlet&Application=RunAuimlTest&WnUserID=anyuser 来调用 AUIML 应用程序（假设 Web 服务器在本地主机中运行）。您将看到如图 20 中所示的面板： 图 20. 在 Web 中运行面板 祝贺您，您已经使用两种非常不同的平台运行了同一应用程序，并且没有修改任何代码！ 注意，为了简便起见，我们让您使用了与 AUIML 一起提供的 WAR 示例文件作为基础。在实际实践中，您可能想从 aui_war_template.zip 文件开始，定制多个文件，其中包括 web.xml、portlet.xml/component.xml（如果部署到 portlet 或 ISC 环境）、Close.html、Logout.html、GeneralError.html 和 GeneralException.html。 结束语 在这里，您已经粗略地浏览了 AUIML 技术的一些功能。最重要的是，您已经了解了如何让同一代码在 Swing 和 Web 中都能运行 —— 这是一门相当好的技术，因为它使“Write Once, Run Anywhere”的概念达到了一个新的级别。不过，如果只看到这一点，那么您太低估 AUIML 了，因为它还可以提供更多的功能。 AUIML 确实是一个功能完善的开发包，它添加了极大的值，而不管您是否想在多个平台上运行应用程序。因为本文篇幅有限，所以我们不可能详细介绍 AUIML 的所有功能，但在这里，我们给出了一个如何使用 AUIML 使应用程序开发变得更容易的小示例： 可以使用 Visual Builder 进行快速原型制作。起初，可能因为 Visual Builder 是本文的一部分，您才暂时使用它，直到开始试验所有用户界面控件（以及每个控件的不同属性），您才能真正了解其功能。但是，Visual Builder 最显著的功能可能是您可以设计面板、向导或属性表，以及查看其在 Swing 和 Web 中的显示，而无需编写任何代码！ ? 将精力集中于业务逻辑的能力。使用 AUIML，可以将开发人员的大部分时间集中于应用程序的后端，而不是将时间浪费在低级别的用户界面窗口小部件 API 上。对于大多数重要的应用程序，DataBean 实现将是惟一需要编写的代码。 ? 内置数据验证。AUIML 提供了用于字符串、数值和日期/时间类型的控件。所以，如果在面板中放置数值字段，那么在运行应用程序时，就需要用户输入您在 Visual Builder 中指定的正确格式范围内的数字。如果用户输入的值不符合上述要求，AUIML 会提供适当的错误消息，并要求用户修复该问题。不必编写任何验证代码，就可以进行所有这类验证。 ? 内置国际化（包括 BIDI 支持）。一般，在运行多种语言时，您所需要担心的是转换特定于应用程序的文本。AUIML 会承担一些单调乏味的工作，比如根据终端用户场景规则来格式化/分析数字和日期/时间字段。 ? 满足高级需要的复杂用户界面窗口小部件： ? 表，提供筛选、排序和搜索数据等高级功能，无需其他代码。 ? 大型表，用来处理大型数据集。基本思想是，当用户需要部分数据集时，AUIML 框架会要求 DataBean 提供这部分数据集。例如，这意味着在用户开始使用应用程序之前，您不必加载有 100,000 个条目的完整日志文件。 ? 三个表，用来以分层格式显示表格式数据（如显示文件详细信息的目录浏览器）。 ? 向终端用户提供其运行应用程序所需信息的健壮的帮助系统。帮助系统只提供帮助文本。 正如您看到的，除了跨平台运行之外，AUIML 显然还有其他许多功能。我们鼓励您主动试验与 AUIML Toolkit 一起提供的那些示例，并访问 AUIML Information Center，以了解所有这些功能的详细信息。我们希望您觉得使用 AUIML 开发 Java 应用程序能够极大地节约时间。 参考资料 下载 AUIML Toolkit。 ? 如果不熟悉 XML，请访问 developerWorks XML zone，获得数百篇文章、一些工具和入门技巧。 ? 在“Introduction to Web applications in WebSphere Studio Application Developer”中，Java 开发人员 Tim deBoer 向您展示了如何创建一个简单的 Web 页面。 ? 请访问有关跨平台工具箱的网站，以获取用来开发用户界面的 cross-platform toolkit。 ? XMLFace 也是使用 XML 指定 GUI 应用程序的工具包。 ? 您可以考虑将 Eclipse 作为创建 AUIML 应用程序的环境。 ? 在 developerWorks Java 技术专区 中可以找到数百种有关 Java 技术的参考资料。 ? 请访问 Developer Bookstore，获取技术书籍的完整列表，其中包括数百篇 Java 相关主题 的图书。 ? 是否对无需通常的高成本入口点（entry point ）或短期评估许可证的 IBM 测试产品感兴趣？developerWorks Subscription 为 WebSphere、DB2 、Lotus 、Rational 和 Tivoli 产品提供了低成本的 12 个月单用户许可证，包括基于 Eclipse 的