开发一个简单的职员查询应用

本篇我们来学习如何使用 WebBuilder 开发一个简单的职员查询应用。

了解集成开发环境

在系统主页，点击左侧功能菜单栏中的[开发套件]->[集成开发环境]，就进入了 WebBuilder 的集成开发环境（IDE）中。

IDE 的左侧为[文件浏览器]，在[文件浏览器]树内通常默认具有 3 个根节点：

• 模块：表示模块目录，wb/modules目录。
• 应用：表示当前应用的根目录。
• 系统：表示操作系统目录。

在 IDE 的顶部为菜单和工具条，在 IDE 的下方为多功能视图。当打开一个模块文件后，IDE 的右侧将出现控件树。

创建数据库查询模块

在 IDE 的文件浏览器内，选择[模块]根节点，并在工具栏上点击[添加目录]按钮添加目录[myapp]。

选择 [myapp] 目录，并点击[添加文件]按钮。在新建对话框中，在[名称]栏输入[select]，并勾选最下面的[在菜单列表中隐藏]选项，然后点击确定按钮创建[select.xwl]模块文件。把该文件作为数据库表查询模块。

在打开的[select.xwl]文件的模块编辑器内，双击[module]节点的[serverScript]属性，并在[serverScript]选项卡中编写脚本：Wb.sendRowx('select * from wb_staff');

按[Ctrl+S]保存[select]文件。

创建主界面模块

在 IDE 的文件浏览器内，选择 [myapp] 目录，并点击[添加文件]按钮。在新建对话框中，在[名称]栏输入[staff]，然后点击确定按钮创建[staff.xwl]模块文件。把该文件作为主界面模块。

在打开的[staff.xwl]文件的模块编辑器内，请依次执行以下操作：

1. 在右侧[控件树]中双击[General]->[viewport]控件添加该控件到模块内[module]节点。
2. 在模块内选择[viewport1]节点，并拖动[对象观察器]滚动条至[layout]属性，并选择该属性值为[fit]。
3. 在模块内选择[viewport1]节点，按住[Ctrl]键并双击[List View]->[grid]控件添加该控件到模块内[viewport1]节点。您也可以选择拖动控件的方式添加该控件。
4. 在模块内选择[grid1]节点，并拖动[对象观察器]滚动条至[url]属性。
5. 拖动左侧[文件浏览器]内的[select.xwl]文件至[对象观察器]的[url]属性。
6. 按[Ctrl+Q]或点击工具条上的运行按钮，将保存并运行staff.xwl文件，您可以看到运行的结果。

在系统主页[home]点击右上角菜单按钮，并点击[刷新菜单列表]菜单，也可以看到刚才编写的[staff]模块。

至此，您已经完成了一个简单的职员查询应用的开发。