Build a Simple Employee Query Application

In this tutorial, we will learn how to use WebBuilder to create a simple employee query application.

Understand the Integrated Development Environment

On the system homepage, go to the left menu and click [Dev Kit] -> [Integrated Development Environment] to enter the WebBuilder IDE.

On the left side of the IDE is the [File Browser]. The File Browser tree has 3 default root nodes:

• Modules: Represents the module directory, wb/modules.
• App: Represents the root directory of the current application.
• System: Represents the operating system directory.

The top of the IDE contains the menu and toolbar. The bottom of the IDE shows the multi-function view. When you open a module file, the component tree appears on the right side of the IDE.

Create a Database Query Module

In the IDE File Browser, select the [Modules] root node, then click the [New Folder] button on the toolbar to create a folder named [myapp].

Select the [myapp] folder and click the [New File] button. In the dialog, enter [select] in the [Name] field, check [Hide in Menu List] at the bottom, then click OK to create [select.xwl]. This file will be your database query module.

In the module editor for [select.xwl], double-click the [serverScript] property of the [module] node, and write the script in the [serverScript] tab: Wb.sendRowx('select * from wb_staff');

Press [Ctrl+S] to save the [select] file.

Create the Main UI Module

In the IDE File Browser, select the [myapp] folder and click [New File]. Enter [staff] in the [Name] field, then click OK to create [staff.xwl]. This will be your main UI module.

In the module editor for [staff.xwl], follow these steps:

1. From the right [Component Tree], double-click [General] -> [viewport] to add it to the [module] node.
2. Select [viewport1] in the module, scroll the [Object Inspector] to the [layout] property, and set its value to [fit].
3. Select [viewport1], hold [Ctrl] and double-click [List View] -> [grid] to add it as a child of [viewport1]. You can also drag the component to add it.
4. Select [grid1] in the module, scroll the [Object Inspector] to the [url] property.
5. Drag [select.xwl] from the left File Browser into the [url] field in the Object Inspector.
6. Press [Ctrl+Q] or click the Run button on the toolbar to save and run staff.xwl. You will see the result.

On the system homepage [home], click the menu button in the top-right corner, then click [Refresh Menu List]. You will now see the [staff] module you just created.

Congratulations! You have completed a simple employee query application using WebBuilder.