Creating an Application Using Oracle Database 10g Express Edition

Purpose

This tutorial shows you how to create an application using Oracle Database 10g Express Edition (XE).

Time to Complete

Approximately 30 minutes

Topics

This tutorial covers the following topics:

Overview
Prerequisites
Saving SQL for Use in Applications
Creating a Report Drill Down
Adding a Tabular Form
Editing Application Objects
Applying a New Theme
Summary
Learn More

Viewing Screenshots

Place the cursor over this icon to load and view all the screenshots for this tutorial. (Caution: This action loads all
screenshots simultaneously, so response time may be slow depending on your Internet connection.)

Note: Alternatively, you can place the cursor over an individual icon in the following steps to load and view only the screenshot
associated with that step. You can hide an individual screenshot by clicking it.

Overview

Oracle Application Express is installed in Oracle Database 10g Express Edition as the primary tool for managing the database and
building Web-based applications. Oracle Application Express is a rapid web application development tool for the Oracle database.
Using only a web browser and limited programming experience, you can develop professional applications that are both fast and
secure. The deployed applications require only a browser and access to an Oracle database running Application Express.

Back to Topic List

Prerequisites

Before you perform this tutorial, you should:

1. Download and install Oracle Database 10g Express Edition from OTN.

2. Open a SQL*Plus window and login as SYS or SYSTEM. Execute the following statement:

alter user hr identified by hr account unlock;

Back to Topic List

Saving SQL for Use in Applications

In this topic, you create a query that joins 3 tables using the Query Builder. Perform the following steps:

1. Select Start > Programs > Oracle Database 10g Express Edition > Go to Database Home Page.

2. To log in to XE, enter the following details, and click Login.

 Username: hr
Password: hr

3. To create your query, click the down arrow next to SQL > Query Builder and then select Create.

4. Select Departments.
5. Select Locations.

6. Select Countries.
7. You need to create a join between the tables so that you can query the data. Select
DEPARTMENTS.LOCATION_ID.

8. With the column selected, drag and drop your mouse on the LOCATIONS.LOCATION_ID column.
9. A line that joins DEPARTMENTS and LOCATIONS is displayed. Now you want to create another join between
LOCATIONS and COUNTRIES. Select LOCATIONS.COUNTRY_ID and drag it to COUNTRIES.COUNTRY_ID.

10. The join is created between LOCATIONS and COUNTRIES. Now you select the columns you want to select when
the query is run. Select the checkboxes in front of each of the following columns and then click Run.

DEPARTMENTS.DEPARTMENT_ID
DEPARTMENTS.DEPARTMENT_NAME
LOCATIONS.CITY
LOCATIONS.STATE_PROVINCE
COUNTRIES.COUNTRY_NAME
11. The results are shown. You want to save this query so you can use it in your application later in this tutorial. Click
Save.

12. Enter Department Locations for the name and click Save.
13. The query is now saved. Click Home to return to the XE Home Page.

Back to Topic List

Creating a Report Drill Down

Now you can create an Application using Application Builder that contains 2 reports and a form. Perform the following steps:

1. From the XE Home page, click the down arrow next to Application Builder > Create Application and then select
Create Application.

2. Enter HR Application for the Name and click Next.

3. Click the Report Page Type.

4. You want to use the query you created in the previous topic. Select SQL Query for Page Source, enter
Departments for the Page Name and click Query Builder.
5. Click the Saved SQL tab.

6. Select the saved SQL link Department Locations.

7. The Query definition is shown. Click Return.

8. The SQL is shown in the Query area. Click Add Page.

9. You are now going to create another page. Click the Report and Form Page Type.

10. Select Departments (1), then select the up arrow for Table Name.
11. Select the EMPLOYEES table.

12. Click Add Page.

13. Select the EMPLOYEES Page Name link for Page 2.

14. Select DEPARTMENT_NAME for the Link Column, select DEPARTMENT_ID for the Parent Report Column 1, select
the DEPARTMENT_ID for the Report Column, deselect Use Theme-Specific edit button and click Apply Changes.
15. Select the Departments Page Name link for Page 1.

16. Change the Show parameter for DEPARTMENT_ID to No and click Apply Changes.
17. You have created all the pages necessary at this point. Click Next > .

18. You want one set of tabs. Click Next >.

19. There are no shared components. Click Next > .

20. Accept the default Authentication and Language Type and click Next > .

21. Accept the default Theme and click Next > .

22. You are ready to create your application. Click Create.

23. Your application, Login page and 3 user-defined pages have been created. Click Run Application.
24. The login Page appears. Enter hr for the Username and Password and click Login.

25. The List of Departments (Report) is shown. Select one of the Department links.
26. A List of Employees (Report) for the Department is shown. Select the Edit icon in front of one of the Employees.

27. The information of the Employee (Form) is displayed.

 Back to Topic List

Adding a Tabular Form

You can also create a Tabular Form on an existing page. Perform the following steps:

1. From the developer links at the bottom of the page, click Edit Page 3.
2. To create a new page, click Create > .

3. Make sure Region on this Page is selected, and click Next >.
4. To specify the component that is going to be added to the page, select the Form option. Click Next >.

5. Select the Tabular Form option, and click Next >.

6. Click Next >.

7. Select the up arrow to select a table.

8. Select the JOB_HISTORY (table) link.

9. Click Next >.

10. Shift-select all the columns and click Next >.

11. Select EMPLOYEE_ID for the Primary Key column 1 and click Next >.
12. Select the Existing sequence option. This results in a new Sequence selection list being displayed. From the
Selection drop-down list, select EMPLOYEES_SEQ and click Next >.

13. The columns on the form that are updateable are listed and selected. Click Next >.
14. Change the Region Title to Job History and make sure the Page is set to 3. Then, click Next >.

15. Accept the default buttons to be created. Click Next >.

16. Change When Cancel Button Pressed Branch to this Page to 2 and click Next >.

17. Review your choices and click Finish.

18. In order for this form to only show the tasks for a particular project, you need to add a where clause to the SELECT
statement in the Projects region. Click Edit Page .

19. Under Regions, click the Job History report link.

20. Click the Source link.

21. Add the following WHERE clause at the end of the SELECT statement. Then click the Top arrow.

WHERE EMPLOYEE_ID = :P3_EMPLOYEE_ID

22. Click Apply Changes.

23. To see the new page that displays all the projects, click the Run Page 3 ( )icon.

24. The Form is now shown with the list of Jobs an Employee has had.
 Back to Topic List

Editing Application Objects

Although the Master-Detail form is fully functional, the looks can be improved. Perform the following tasks in this topic:

Change the Date Format

Create a List of Values
Change the Job Id field to use the LOV

To do all this, perform the following steps:

1. Click the Show Edit Links link.

2. Click the Edit icon ( ) to the right of Hire Date.
3. Under the Page Item section, select Date Picker (DD-MON-YY) from the Display As drop-down list. Click Apply
Changes.

4. Refresh your browser. Notice that the Calendar icon appears next to the Hire Date field. Click the Calendar icon.
5. The calendar widget appears. Click Close.

6. Click the Edit Page 3 Link.

7. You can also create a Named LOV that is referenced by the Job Id field. By creating it as a Named LOV, it can be
used by other pages in the application too. Under the List of Values section on the right, click the Create icon ( ).

8. For Create List of Values, keep the default value From Scratch, and click Next >.
9. For Name, enter jobid. For Type, change to Dynamic. Then click Next >.

10. For the query , enter the following:

select job_title d, job_id r

from jobs
order by 1

Click Create List of Values.

11. To return to the page, click the Run Page 3 icon at the top right.
12. Click the Edit icon ( ) to the right of Job Id .

13. Click the LOV link.

14. Under the List of Values section, select JOBID from the Named LOV drop-down list. Click the Top icon ( ).
15. Under the Page Item section, select Select List from the Display As drop-down list. Click Apply Changes.

16. Click the Refresh button in your browse and notice that you know have a drop down list for Job Id. Select the arrow
to see the list of Jobs to choose from.
17. Click Hide Edit Links.
 Back to Topic List

Applying a New Theme

When you created the application, you selected the red theme. You can change the look and feel of the application by changing the
theme. You first create a new theme by selecting one from the Repository. To apply a new theme, perform the following steps:

1. Click the Edit Application link from the Developer Links at the bottom of the page.
2. Click the down arrow next to Shared Components > User Interface > Themes.
3. To create a new theme, click Create > .

4. Accept the default From the Repository and click Next >.

5. From the Theme options, select the Theme 10 option. Click Next >.
6. Click Create.

7. To switch to the Sand theme, click Switch Theme.

8. For Switch to Theme, make sure 10. Sand is selected. Click Next >.

9. Notice that the page displays the compatibility between the two themes. This utility checks whether there is a
template in the new theme to replace each of the templates in the current theme. The check marks in the Status
column indicate that the templates are compatible. Click Next >.

10. To confirm the theme switch, click Switch Theme.

11. To see the new theme, click the Run Page 3 icon ( ) at the top right of the page.

12. The color scheme has changed. Click the Departments breadcrumb.

13. Notice that the entire appearance of your application has changed.
 Back to Topic List

Summary

In this tutorial, you learned how to:

Create and modify a table

Create an application
Add and edit a Tabular form
Edit application objects and change the theme

Back to Topic List

Learn More

To learn more about Application Express Development and how to customize the application you built in this tutorial, refer to the
following:

Oracle® Database Express Edition 2 Day Plus Application Express Developer Guide
Oracle Application Express OTN Site

Back to Topic List

Place the cursor over this icon to hide all screenshots.