Release 2.2
Part Number A77075-01
 Library |
 Product |
 Contents |
 Index |
| Oracle WebDB Tutorial Guide Release 2.2 Part Number A77075-01 |
|
Estimated completion time: 1 hour
This chapter shows you how to use Oracle WebDB to build components. Components are Web pages with content based on data stored in the Oracle database. Some components, such as reports, display data in a graphical format. Others, such as forms, provide interfaces that end users can use to change data. You can create the following components in WebDB:
There is a separate component build wizard for each type of component. Each wizard creates PL/SQL stored procedures. When executed, the stored procedures dynamically create the HTML and JavaScript code to display the component.
In this chapter, you'll learn how to build forms, reports, and charts using Oracle WebDB's component build wizards. You'll also learn how to build Lists of Values which you can use in your components and share with other developers.
This chapter includes the following sections:
| Section | |
|---|---|
In Section 2.2, "Building a Table" you created a table (TUTORIAL_TABLE) to contain information about a company's employees. End users in the company's Human Resources department need to be able to add new employees to this table. Your next development task is to build a form that the Human Resources staff can use to perform this part of their job.
.
The page displayed is divided into three panels. For this exercise you will use the Create a New Form panel.
You can build the following types of forms:
In this exercise, you will build a form based a table (TUTORIAL_TABLE).
You can build components in the schema that owns the database objects on which the component is to be based, or in a schema that has been granted explicit database object privileges on the objects on which the component is to be based.
TUTORIAL_FORM.
to display the Tables or Views page.
to display the Form Layout Selection page.
Clicking Unstructured enables you to supply your own HTML code for the form.
to display the Formatting and Validation page.
to create the form and display the Manage Component page.
In the Manage Component page, you can choose from the following options:
For components with a parameter entry form, such as reports, choosing this option displays the parameter entry from. For more information see Section 3.5, "Building a Report".
Note:
You can now use the form to query, insert, update, or delete data into TUTORIAL_TABLE.
| Field | Value |
|---|---|
|
Empno |
|
|
Ename |
|
|
Job |
|
|
Sal |
|
|
Deptno |
|
Click Insert.
As you can see, the form you created, while functional, is not particularly sophisticated. However, you can easily edit the form to improve the appearance and add more functionality.
You can improve the usability of a form by making some changes to the basic appearance. For example, you can add color to make the form more visually appealing, or provide meaningful labels so the end user can easily see what each field in the form is for.
In this page, you can specify options that control the appearance of the form. You can also choose the columns you want to display as fields in the form and for each field you can specify a selectable List of Values, a default value, a display format, and choose a JavaScript application for validating the field in the form.
The page is divided into two. The left side of the page shows the columns that will be displayed as fields in the form. You can perform actions on the fields in the form, such as deleting them, changing their order on the form, or editing their options. The right side of the page is where you edit the options for the currently selected form or field.
Adding color is one way of improving the basic appearance of a form and improving the overall end user experience.
By default, WebDB uses the column name as the label for the field in the form. Let's change the labels in the form to something more descriptive.
if you need to go back to a previous page of the wizard. Do not click your browser's Back button.
Employee Id.
Last Name.
You can change the font of labels to something that's easier to read.
You can also change the color and size of labels.
WebDB keeps a copy of previous versions of your components. If you want to go back to an earlier version, simply click the appropriate Version(s) Status link. Once you have finished editing a component and are happy with the final version, you can click Manage and use the Drop option to delete the old versions of the component.
Good user interface design requires that any important information about a form should be displayed on the form itself. You should also provide help text to give end users additional guidance if they need it.
tab to display the Text Options page. In this page, you can specify text that you want to appear at the top or bottom of the form. You can also add help text and specify a template.
Employees.
<H3>Use this form to add, edit or delete employee information.</H3>
<FONT COLOR="red">Red text indicates that the field is mandatory and you must enter a value.</FONT>
<H3>To add a new employee:</H3> Fill in the fields on the form and click <B>Insert</B>.
In this page, you can also specify the overall look and feel of the page on which the form is displayed by choosing a template. WebDB provides some templates to get you started, but you can also create your own with your company logo, color scheme, and text. For more information about templates, see the WebDB online help.
You can use PL/SQL to add more functionality to your forms. For example, you might want to display a custom header, or create a temporary table.
tab to display the Advanced PL/SQL code page. In this page, you can specify PL/SQL code that runs at different points during the execution of the HTML code that creates the form.
htp.print(sysdate);
This will print today's date at the top of the page on which the form is displayed.
To enable end users to run a component, you need to provide the following:
Members of the Human Resources department need to be granted execute privileges on TUTORIAL_FORM before they can run it.
This is the URL your end users need to run the form.
The URL consists of:
webserver.com:port/dad/your_schema.TUTORIAL_FORM.show
where:
When end users attempt to display the page containing the component, they will be prompted for their user name and password. To be able to use the component, the end user must have execute privileges on the component.
The page displayed is divided into two panels. In this exercise you will use the Grant Additional Privileges panel.
to display a list of the users and roles to which you can grant execute privileges.
If HR_TUTORIAL is not listed, ask your DBA to create this role for you using the instructions in Appendix A, "Tutorial Setup Instructions".
Note:
HR_TUTORIAL is displayed in the User / Role field.
HR_TUTORIAL is displayed in the Existing Grants panel.
Members of the HR_TUTORIAL role are now able to run TUTORIAL_FORM.
To revoke execute privileges from a user or role, make sure the check box next to the user or role is checked and click Revoke.
The Human Resources department has also requested a report that they can use to view employee information.
.
The page displayed is divided into three panels. For this exercise you will use the Create a New Report panel.
The Create Reports Wizard produces a SQL query based on the information you provide as you step through the pages of the wizard. If you are familiar with SQL you can also create a report by writing the SQL query yourself.
TUTORIAL_REPORT.
to display the Tables and Views page.
to create the report and display the Manage Component page.
You can edit your report in the same way as you edited the form in Section 3.3, "Editing a Form". For example, you can change the report display options, add text, and add PL/SQL code. You can also use the report edit options to produce more sophisticated reports, such as summary reports, break reports, and parameterized reports. The following exercises show you how to create these advanced reports.
The Human Resources department would like the total salary to be displayed on the report, so they can easily see how much is being spent on salaries.
tab to display the Columns Formatting page. In this page, you can specify column alignment, a display format, and whether to add a summary of a column's values.
The Human Resources department has requested that the report be grouped by the different departments, to make it easier to view employees by department. You can create a break report to do this.
tab to display the Display Options page. In this page, you can specify options that control the appearance of the report.
For best results, you should also order the report by the columns you have chosen to break on.
The Human Resources department has submitted another enhancement request for the report. They want to be able to display the report data for a single specified department. You need to create a parameter that they can use to specify the department.
tab to display the Parameter Entry Form Display Options page. In this page, you can specify parameters that will be used to specify the data displayed in the report.
Department.
The parameter entry form prompts the end user for values to use to display the report. The Department parameter you created is the first field on the parameter entry form. Note that end users can also change the break column and order by settings for the report.
10 in the field.
The Human Resources department has also requested a chart that shows the total salary for each department.
.
The page displayed is divided into three panels. For this exercise you will use the Create a New Chart panel.
The Create Charts Wizard produces a SQL query based on the information you provide as you step through the pages of the wizard. If you are familiar with SQL you can also create a chart by writing the SQL query yourself.
TUTORIAL_CHART.
to display the Tables or Views page.
to display the Table/View Columns page.
The values of the Label column are displayed along the axis of the chart.
The values of the Value column are used to calculate the size of the bars in the chart.
The group function groups the Value column values by unique Label column values, and performs an operation on each group of values. In this case, the group function sums the salaries of each department.
to create the chart and display the Manage Component page.
A shared component is a component element such as a link, List of Values, or image that can be used by multiple developers when creating forms, reports, and other WebDB components. You can create the following shared components in WebDB:
Because these component elements are shared, they only need to be created once and will look and behave consistently across components. WebDB Developers can create shared components in a schema on which they have Build In privileges. To use a shared component, developers must have Build In privileges in the schema that owns the shared component.
In the following exercises you'll learn how to create Lists of Values and use them in components. In Chapter 4, "Building Applications by Linking Components" you'll learn how to create and use links.
End users can use Lists of Values (LOV) to select from a list of possible values rather than type values in fields on forms and component parameter entry forms. There are two types of LOV:
The DEPTNO column in TUTORIAL_TABLE can have a value of 10, 20, or 30. Let's create an LOV so that when the Human Resources staff need to enter a department number they can choose from a list.
.
The page displayed is divided into three panels. For this exercise you will use the Create a List of Values panel.
TUTORIAL_LOV.
| Display Value | Return Value | Display Order |
|---|---|---|
|
Accounting (10) |
10 |
1 |
|
Research (20) |
20 |
2 |
|
Sales (30) |
30 |
3 |
Once you have created an LOV, you can test it to check how it will appear in a component.
If TUTORIAL_LOV is not listed:
In the previous exercise you created an LOV. In this exercise you will use the LOV in the form and report that you created in Section 3.2, "Building a Form Based on a Table" and Section 3.5, "Building a Report".
Let's add the LOV to the DEPTNO field in TUTORIAL_FORM.
to display the Component Building page.
The Component Building page offers another way of finding components. Here you can search across different types of component.
TUTORIAL.
WebDB searches for all components containing the text "TUTORIAL" and lists them at the bottom of the Component Building page. You can use the check boxes to restrict the search further by specifying which type of components to search for.
next to the LOV field to list the available LOVs. You can only use LOVs stored in schemas on which you have Build In privileges.
Let's add the LOV to the Department parameter field in the TUTORIAL_REPORT parameter entry form.
to display the Component Building page.
TUTORIAL.
tab to display the Parameter Entry Form Display Options page.
next to the LOV field to list the available LOVs.
The LOV looks the same as the LOV in TUTORIAL_FORM: the same values are listed in the same order. This improves the usability and consistency of an application, because the end user does not have to learn a different interface before being able to use the report. If you did not use a shared component in this situation, the LOV might be ordered differently or use different names for the departments, which could confuse the end user.
In this chapter, you learned how to:
In Chapter 4, "Building Applications by Linking Components" you will create menus and links to build applications from the individual components you have created.
|
 Copyright © 1996-2000, Oracle Corporation. All Rights Reserved. |
|