Understanding User Interface Basics

Understanding User Interface Basics

Introduces user interface design in DB2^® Web Query and describes the components of a typical user interface.
A user interface for a Web application is a collection of HTML files that display pages in a browser.
You can design a user interface by using the HTML Layout Painter to create HTML forms and procedures in one integrated process. For details, see Designing a User Interface for a Web Application With the HTML Layout Painter.

The HTML Layout Painter is accessible only through the DB2 Web Query Developer Workbench.

Parent topic:
IBM DB2 Web Query for System i Overview

User Interface Basics

A user interface is the means by which you enable communication between a user and your application.
A DB2 Web Query user interface allows a user to supply information, choose options, and run reports. A simple one typically consists of:

A launch page, which enables a user to run one or more reports.

An HTML display page, on which a report appears.

User interface design is one of the most creative phases of application development. Developer Workbench provides many tools that support it.

About a Launch Page

Suppose that managers on their company intranet periodically need a sales report for one of four regions. You:

Create the procedure, including a variable for the region so that the report can run with different values.

Create the launch page, from which a manager runs the report. The page prompts for the region of interest.

The following image shows a sample launch page.

If a manager selects Midwest and clicks Run, the report appears.

At minimum, a launch page is a simple form that contains a Run and Clear button, allowing the user to run a report. More often, it is a form, like the one shown, containing controls that prompt for user input.
Controls include text boxes, check boxes, radio buttons, drop-down menus, push buttons, and hyperlinks. A launch page usually displays default values or valid values to help the user provide input. The Reporting Server uses the input to process the procedure and return the desired output.
When a launch page is complete, deploy it to the Web server using the Deploy Wizard. Supporting files such as procedures are deployed to the Reporting Server. Once the files are stored on the appropriate servers, users can access the launch page by typing the URL in the browser.

Adding a Control to a Form

A control prompts a user for a value required by a procedure. You can add a single control, or a combination of controls, to a form on a launch page.
You must add a Submit button. Submitting a form calls DB2 Web Query and passes the supplied values to the procedure.

DB2 Web Query Controls

The following table describes types of controls.

Control

Enables a user to...

One-Line Text Box

Enter a single value for a variable, such as user name or password on a custom logon page.

Radio Button

Choose one value from a group.

Check Box

Choose multiple values.

Drop-Down List

Choose a value from a drop-down list.
You can add text to describe the values.

Multi-Select Drop-Down List

Choose multiple values from a drop-down list. Allows a user to report on several field values at one time.

Dynamic Multi-Select Drop-Down List

Choose multiple values from a drop-down list populated by field values retrieved live from a data source.

Text Area

Enter an ad hoc report request.

Submit Button

Run a report.
You must include a Submit button on a form. You may optionally include a button that clears the form of current values and restores the defaults.

Push Button

Trigger an action.

Hyperlink

Run a procedure using fixed values.

Types of Launch Pages

A launch page can be a single page or a frameset. A single page is a one-page display that is replaced by report output when a user submits a request. A frameset is a multiple-page display, and any page (frame) can be replaced by report output.

Ways to Create a Launch Page

A launch page calls the DB2 Web Query Client to pass the name of a report to run, with any required values.
You can create a launch page using the HTML Layout Painter. The HTML Layout Painter allows you to create a launch and display page in an integrated process within Developer Workbench. See Designing a User Interface for a Web Application With the HTML Layout Painter.

About an HTML Display Page

Report output from a Reporting Server appears on an HTML page in a browser. You have many design options for report display. For example, you can display a report on a page by itself or in a frame on a page, or you can design a custom page with multiple reports.
Your application will probably include different types of reports, which may influence the display pages you design. Some types of reports include:

Dynamic. A report created and formatted at the time a user requests it. This type of report displays the most current information from live data retrieval.

Drill-Down. A dynamic, multilevel report consisting of a parent (summary) component and a child (detailed) component.

Static. HTML file created and formatted before a user requests it. Ready for access without live data retrieval. Called by HTML code (A HREF).

You can create a report using the Report Assistant or Power Painter.

Control	Enables a user to...
One-Line Text Box	Enter a single value for a variable, such as user name or password on a custom logon page.
Radio Button	Choose one value from a group.
Check Box	Choose multiple values.
Drop-Down List	Choose a value from a drop-down list. You can add text to describe the values.
Multi-Select Drop-Down List	Choose multiple values from a drop-down list. Allows a user to report on several field values at one time.
Dynamic Multi-Select Drop-Down List	Choose multiple values from a drop-down list populated by field values retrieved live from a data source.
Text Area	Enter an ad hoc report request.
Submit Button	Run a report. You must include a Submit button on a form. You may optionally include a button that clears the form of current values and restores the defaults.
Push Button	Trigger an action.
Hyperlink	Run a procedure using fixed values.