Express Web 2.0

Create dynamic interfaces that minimize page refresh with Oracle Application Express.

By David Peake

September/October 2007

The term Web 2.0 refers to a second generation of Web-based applications that emphasize online collaboration, participation, and interactivity. This includes social networking sites, wikis, and communication tools.

For Web application developers, Web 2.0 is also synonymous with technologies that underpin modern, dynamic, rich-client Web applications that mimic personal computer applications and can improve the user experience in browser-based applications. These technologies include Asynchronous JavaScript and XML (Ajax), partial page refresh (PPR), Dynamic HTML (DHTML), Flash, and JavaScript. They enable a Web page to request an update for some part of its content and to alter that part in the browser, without needing to refresh the whole page. These techniques are not a replacement for underlying protocols such as HTTP but an additional layer of abstraction on top of them.

Oracle Application Express is designed to help facilitate the creation of Web 2.0 applications. More specifically, it is designed to take much of the complexity out of building scalable dynamic applications by providing a declarative database-centric framework. Some Web 2.0 technologies, such as PPR, Flash, and many JavaScript-enabled controls, are built into the latest release of Oracle Application Express.

The following are some of the Web 2.0 features and capabilities of Oracle Application Express:

  • PPR reporting is incorporated into the report templates so that only the report changes when the next set of data is retrieved—no other page components are refreshed.

  • Flash charting enables sophisticated charting capabilities and display attributes, including animations.

  • Tooltips enable page elements to include tooltips—using Ajax—that are invoked when the mouse moves over the item.

  • Expanding trees are based on hierarchical elements, such as a company's organizational structure, and with Ajax, they load only the initial hierarchy and later populate nodes when they are expanded.

  • Detail frames use Ajax to enable the dynamic display of detail information within a master report.

  • Dynamic menus use Ajax to provide a context-sensitive list of actions to the user.

  • Cascading select lists narrow the choices available during the cascade through subsequent select lists.

For more details on Web 2.0 features in Oracle Application Express, including sample applications and additional code snippets, go

Step-by-Step Instructions for Adding Tooltips

The following steps demonstrate how to integrate Ajax-powered tooltips into an Oracle Application Express application. The file provides the SQL and the images used to develop the tooltips in this column.

Step 1. Download and unzip the Aria employee lookup application , and install it in your local Oracle Application Express instance or in the public instance at . Select Application Builder -> Import -> Application , click Browse , select the aria_people_search_installer-0.91.sql file from the downloaded application files, and click Next .

Step 2. Download, unzip, and install the images and JavaScript file from the file . Select Shared Components -> Files -> Images , click Create , browse to an image file, select the Aria application from the Application list, and click Upload . Repeat the upload process for each image. To install the aria.js file, select Shared Components -> Files -> Static Files , click Create , browse to the aria.js file, select the Aria application from the Application list, and click Upload .

Step 3. Add the code to create the tooltip structure, including the image layout. In the application builder and the Aria application, click Page 0 to display the page definition. In the Regions section, click the Create icon, and then click HTML (on two successive screens). Enter a title, select No Template from the Region Template list, select After Header from the Display Point list, and click Next . Enter the HTML from Listing 1 as the region source, and click Create Region .

Code Listing 1: Code for creating a tooltip structure, including image layout

<script src="#WORKSPACE_IMAGES#aria.js" type="text/javascript"></script>
<table border="0" cellspacing="0" cellpadding="0" id="rollover" 
style="position:absolute;display:none;" summary="">
<td valign="middle" rowspan="3"><img src="#WORKSPACE_IMAGES#point.png" /></td>
<td><img src="#WORKSPACE_IMAGES#top1.png" width="10" height="11" alt="" /></td>
<td style="background-image:url(#WORKSPACE_IMAGES#top2.png)"></td>
<td><img src="#WORKSPACE_IMAGES#top3.png" width="10" height="11" alt="" /></td>
<td style="background-image:url(#WORKSPACE_IMAGES#middle1.png)">
<img src="#WORKSPACE_IMAGES#middle1.png" width="10" height="1" /></td>
<td style="background:#FFF;"><div id="rollover_content"></div></td>
<td style="background-image:url(#WORKSPACE_IMAGES#middle2.png)">
<img src="#WORKSPACE_IMAGES#middle2.png" width="10" height="1" /></td>
<td><img src="#WORKSPACE_IMAGES#bottom1.png" width="10" height="11"></td>
<td style="background-image:url(#WORKSPACE_IMAGES#bottom2.png)"></td>
<td><img src="#WORKSPACE_IMAGES#bottom3.png" width="10" height="11"></td>

Step 4. Create an on-demand application process named Person_Detail. Select Shared Components -> Logic -> Application Processes , click Create , enter Person_Detail in the Name field, select On Demand: Run this application process when requested by a page process from the Process Point list, and click Next . In the Process Text field, enter aria_detail; , click Next , and click Create Process .

Step 5. Install the aria_detail procedure (provided as part of the download for this column). Select SQL Workshop -> SQL Scripts -> Upload , click Browse , choose the aria_detail.sql file, and click Upload .

Step 6. Create two application-level items named TEMP_ID and TEMP_PAGE_ID, respectively. Select Shared Components -> Logic -> Application Items . Click Create , enter the name for the item, and click Create .

Step 7. Add the following JavaScript snippet to any element that should display a person detail, where PERSON_ID is a valid employee ID:


For example, to create the tooltip shown in Figure 1, in the application builder, click Page 1 , click Report (in the Regions section), click Column Attributes , and click the icon (edit) next to the REVERSE_NAME column alias. Under Column Link , enter the JavaScript snippet in the Link Attributes field, and click Apply Changes .

To create the tooltip shown in Figure 2, select Shared Components -> User Interface -> Templates , and under the Report Type, click Person_Detail . In the Row Template 1 text field, replace

<td valign="top">
<a href="f?p=&APP_ID.:2:&SESSION.::NO::PERSON_ID:#MGR_PERSON_ID#">


<td valign="top">

Finally, run the application to see your tooltips in action. Figure 1 shows an example tooltip appearing over a name in a list of results. Figure 2 shows an example tooltip appearing over a manager name in a detail result.

figure 1
Figure 1: A tooltip over a name in a list of results
figure 2
Figure 2: A tooltip over a name in a detail result


Oracle Application Express is a very easy-to-use, rapid development tool optimized for building Web 2.0-enabled applications. The underlying framework provides built-in declarative Web 2.0 capabilities and several "hooks" and APIs to enable developers to readily incorporate Web 2.0 functionality.

Next Steps

 READ more about Oracle Application Express

Oracle Application Express
packaged applications
sample content for tooltips


Photography byLuke Ellis-Craven,Unsplash