Subscribe

Technology

Community

Features

Up Front

Comment

Share

Share

Browser-based

Build Web 2.0 Applications Declaratively

Use dynamic actions in Oracle Application Express 4.0 to define interactive client-side behavior.

By David Peake

November/December 2010

Business users want their Web-based applications to be as richly interactive as the Websites they use for personal activities such as shopping and banking. Many Web development teams incorporate client-side processing into their Web 2.0 applications by using Ajax (Asynchronous JavaScript And XML) techniques that require them to write extensive scripting code. Such code can be hard to maintain and debug, especially if it must run on different browsers. Dynamic actions in Oracle Application Express 4.0 give you a way to enable client-side processes without writing JavaScript code. Instead, you define actions declaratively on property pages, and the Oracle Application Express engine generates the required code.

In this column, you’ll build an application that uses dynamic actions to implement Ajax behavior. You can run through these steps on the hosted instance of Oracle Application Express 4.0 at apex.oracle.com. (You must request a free workspace to use this hosted instance.) You can also use a local instance of Oracle Application Express 4.0. This exercise uses the EMP and DEPT tables, which are available by default in the database.

Creating the Demonstration Application Start by creating a database application that enables users to view and edit employee data. Log in to Oracle Application Express and follow these steps to create the demonstration application:
  1. From the Oracle Application Express home page, select Application Builder.
  2. Click Create. For Application Type, select Database and From Scratch.
  3. For Name, enter Employees, and then click Next.
  4. For Page Type, select Report and Form. Enter EMP for Table Name, click Add Page, and click Create.
  5. On the summary page, click Create.
 

Now enhance the form you’ve just generated to include select lists for job and department. The following steps and subsequent instructions assume that you are using the tree view, not the component view, in Application Builder:

  1. From Application Builder, click the Page 2 – Emp icon to edit Page 2.
  2. Double-click P2_JOB to edit the item.
  3. For Display As, choose Select List.
  4. In the List of Values section, select No for Display Extra Values and Yes for Display Null Value.
  5. For Null Display Value, enter - Select Job -. In List of Values definition, enter select distinct JOB D, JOB R from EMP order by 1. Click the Apply Changes button at the top of the page.
  6. Edit the P2_DEPTNO item by double-clicking its name.
  7. For Display As, choose Select List. For Label, enter Department.
  8. In the List of Values section, select No for Display Extra Values and Yes for Display Null Value.
  9. For Null Display Value, enter - Select Department -. In List of Values definition, enter select DNAME D,DEPTNO R from DEPT order by 1. Click the Apply Changes button at the top of the page.
 

 

By defining these user-interface defaults for the application’s tables before generating pages, you give the tables consistent column attributes such as headings, the display format (including a list of values), and the display sequence.

Click Run and log in with your Oracle Application Express credentials to run the application. Navigate back to the report by clicking the first Emp link in the breadcrumbs. You can edit any record by clicking its Edit icon.

Defining a Standard Dynamic Action Now create a dynamic action that will enable the form’s commission field (called Comm) only for employees whose job title is salesman. Follow these steps:
  1. At the bottom of the form page, click Edit Page 2.
  2. Right-click P2_JOB, and select Create Dynamic Action.
  3. Select Standard. For Name, enter Commission for Salesman Only, and then click Next.
  4. For Value, enter SALESMAN. Click Next.
  5. Select Enable, and click Next.
  6. For Selection Type, choose Item(s) . In the list of items that appears, double-click P2_COMM, and click Create.
 

Run the application, and edit the record of an employee with any job other than salesman. In the form, you can see that the Comm field is disabled. To enable the Comm field, change the Job field’s value to SALESMAN.

Defining an Advanced Dynamic Action Now modify the Employee application to retrieve a department’s location as soon as the Department field is updated. The application will use Ajax to retrieve the value asynchronously without needing to submit the entire page to the server.

To create the advanced dynamic action, follow these steps:

  1. Click the Edit Page 2 button at the bottom of the form page.
  2. Right-click Items and select Create Page Item, as shown in Figure 1.

    Figure 1: Oracle Certified Master examination servers
     

    Figure 1: Creating a page item


  3. Select Display Only, enter P2_LOCATION for Item Name, click Next, click Next, click Next, and click Create Item.
  4. Right-click P2_DEPTNO, and select Create Dynamic Action.
  5. Select Advanced, enter Get Department Location for Name, and click Next.

    As you can see in Figure 2, you can choose among many types of events when you implement an advanced dynamic action. Select Change (the default). Leave the Condition field value as - No Condition -, because you want the change event to always fire.

    Figure 1
     

    Figure 2: Selecting the event type for a dynamic action

  6. Click Next, and select Component -> Set Value for Action.
  7. In the Settings region, which now appears, select SQL Statement for Set Type.
  8. For SQL Statement, enter select LOC from DEPT where DEPTNO = :P2_DEPTNO. For Page Items to Submit, enter P2_DEPTNO. Click Next.
  9. For Selection Type, choose Item(s) . In the list of items that then appears, double-click P2_LOCATION, and then click Create.
 

Now when you run the application and change the value for any employee’s department, you’ll see that the location is updated immediately, as shown in Figure 3.

o60 browser Figure 3
 

Figure 3: Change the department, see the result


Conclusion Dynamic actions in Oracle Application Express 4.0 enable developers to meet the demand for client-side functionality, where the application responds as soon as a value is changed or the user leaves a field. Dynamic actions are designed to make implementing such functionality declarative, which gives developers the potential to rapidly incorporate rich Web 2.0 user interactivity into their applications without writing any Ajax scripting code. By defining client-side behavior on declarative property pages, you speed development, simplify debugging, and reduce maintenance requirements.
Next Steps

READ more
Browser-Based

LEARN more about
Oracle Application Express

REQUEST an
Oracle Application Express 4.0 workspace

VISIT the
Oracle Application Express discussion forum

DOWNLOAD
Oracle Application Express
Oracle Database 11g Release 2


 

Photography byLuke Ellis-Craven,Unsplash

David Peake

David Peake is a principal product manager in Oracle’s Server Technologies division. He has been with Oracle since 1993.

Oracle

Integrated Cloud & Platform Services

Integrated Cloud and Platform Services