现在您已经成功运行了示例，下一个重要步骤是创建您自己的一个简单的 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 ：
2 import com.ibm.ui.framework.Capabilities;
3 import com.ibm.ui.framework.DataBean;
4 import com.ibm.ui.framework.IllegalUserDataException;
5 import com.ibm.ui.framework.TaskActionEvent;
6 import com.ibm.ui.framework.TaskActionListener;
7 import com.ibm.ui.framework.TaskManagerException;
8 import com.ibm.ui.framework.UserTaskManager;
9 public class RunAuimlTest extends WebApplicationAdapter implements DataBean,
10 TaskActionListener {
11 static final String auimlFileName = "AuimlTest"; // Package qualified file name
12 static final String auimlPanelName = "Panel1";
13 public static void main(String[] args) {
14 RunAuimlTest runTest = new RunAuimlTest();
15 runTest.render(WebApplicationAdapter.MODE_VIEW);
16 }
17 public RunAuimlTest(){
18 }
19 /*
20 * @see com.ibm.ui.framework.DataBean#load()
21 */
22 public void load() {
23 }
24 /*
25 * @see com.ibm.ui.framework.DataBean#verifyChanges()
26 */
27 public void verifyChanges() throws IllegalUserDataException {
28 }
29 /*
30 * @see com.ibm.ui.framework.DataBean#save()
31 */
32 public void save() {
33 }
34 /*
35 * @see com.ibm.ui.framework.DataBean#getCapabilities()
36 */
37 public Capabilities getCapabilities() {
38 return null;
39 }
40 /*
41 * @see com.ibm.ui.framework.TaskActionListener#actionPerformed
42 (com.ibm.ui.framework.TaskActionEvent)
43 */
44 public void actionPerformed(TaskActionEvent event) {
45 }
46 /*
47 * @see com.ibm.ui.application.WebApplicationAdapter#render(java.lang.String)
48 */
49 public void render(String arg0){
50 try {
51 // Call load on the dataBean, which sets up the data to be returned
52 // from the getter methods.
53 this.load();
54 // We pass in the name of the auiml file, the panel name, the data bean and
55 // we get the user context
56 UserTaskManager utm = new UserTaskManager
57 (auimlFileName,auimlPanelName,new DataBean[]{this},getUserContext());
58 // We implement TaskActionListener so add the listener to the utm
59 utm.addTaskActionListener(this);
60 utm.invoke(); // Displays the panel
61 } catch (TaskManagerException e) {
62 e.printStackTrace();
63 }
64 }
65 }
66
方法 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. 运行面板
