使用 GWT 实现基于 Ajax 的 Web 开发（5）应用实例：简单信息查询系统

look_w

应用实例：简单信息查询系统前面已经详细叙述了如何使用 GWT Designer 进行 UI 设计，如何使用 JSON 或 XML 传输数据，以及如何创建和使用 RPC 通信。本节将使用前面介绍的知识，完成一个简单雇员信息查询系统。雇员信息存储在数据库中。本系统将根据选中节点包含的条件查询相应雇员的信息，结果以表格的形式展现给用户。此系统包含两个页面：登陆页面和查询页面。登陆页面根据输入的用户名和密码验证当前用户是否合法；查询页面分为左右两部分，左边以树的形式包含多个查询结点，用户选择查询结点，将会在右边以表格的形式展现选中结点的查询结果。
使用 GWT Designer 进行界面设计本系统包含了两个页面，一个登录页面，一个信息查询页面。为了页面统一，在此创建了一个基类 CommonViewport。CommonViewport 包含了用于显示本系统名称的标题。后面创建两个页面后都将继承自 CommonViewport。这样就包含了显示标题的 Header。
登录页面的设计：
创建一个新类 LoginView，使其继承自 LayoutContainer。
右击选择 Open With | GWT Designer.
在 Empty LayoutContainer 中添加一个 verticalPanel。
在 verticalPanel 中添加 3 个 horizontalPanel。
在最上面的 verticalPanel 添加一个 Label 和一个 TextBox， 将 Label 的 text 属性改为 User Name:
在最中间的 verticalPanel 添加一个 Label 和一个 TextBox， 将 Label 的 text 属性改为 Password:
在最下面的 verticalPanel 添加一个 Button，将其 text 属性改为 Login
右击 Button 选择菜单：Add event handler | click(com.google.gwt.event.dom.client.ClickHandler) | onClick 生成
重命名组件使得代码可读性更强。
再创建一个新类 : LoginFrame，使其继承自 CommonViewport。
在其上添加一个 ContentPanel，放在中心位置。
修改 Collapsible 属性为 false， heading 为空。
在 ContentPanel 中添加一个 Flextable.
右击 Palette 中的 Custom，选择 Add Component， 然后选择 LoginView.
从 Custom 中选择 LoginView 添加到 Flextable 中，将其 Layout 属性选择为 CenterLayout.
重命名组件使得代码可读性更强。
完成后如图 5 所示。
图 5.登录页面信息查询页面的设计：
创建一个新类 : LoginFrame，使其继承自 CommonViewport。
在其上添加一个 ContentPanel，放在中心位置。再增加一个 ContentPanel 放在最左边。
设置左边的 ContentPanel 的属性如下：
LayoutData | collapsible  :  true;
LayoutData | floatable   :  true;
LayoutData | split       :  true;
collapsible             :  true;
设置中心的 ContentPanel 的属性如下：
collapsible             :  true;
在左边的 ContentPanel 上放一个 flexTable， 里面添加一个 Label，将其 text 属性改为 input search text:
在左边的 ContentPanel 上放一个 verticalPanel， 上面添加一个 treePanel. 完成后结果如图 6 所示。
图 6.信息查询页面重命名组件使得代码可读性更强。 至此，使用 UI Designer 设计 UI 的工作已经完成。后面要用添加一些 abstract 组件和一些需要动态绑定数据的组件，需要添加代码来完成。
添加代码，为 TreePanel 添加一个存储数据的模型 store， 同时为叶子节点指定图标。
至此，信息查询页面的设计已经完成，再次用 GWT Designer 打开它，其结果如图 7 所示。
图 7.信息查询页面