As Published In
Oracle Magazine
September/October 2007

DEVELOPER: Browser-Based


Express Web 2.0

By David Peake

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

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 to oracle.com/technetwork/products/database/application_express/html/web2.0.html.

Step-by-Step Instructions for Adding Tooltips

The following steps demonstrate how to integrate Ajax-powered tooltips into an Oracle Application Express application. The o57browser.zip 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 apex.oracle.com . 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 o57browser.zip 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="">

<tr>
<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>
</tr>

<tr>
<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>
</tr>

<tr>
<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>
</tr>
</table>

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 o57browser.zip download for this column). Select SQL Workshop -> SQL Scripts -> Upload , click Browse , choose the aria_detail.sql file, and click Upload . 

Next Steps



 READ more about Oracle Application Express

DOWNLOAD
Oracle Application Express
packaged applications
sample content for tooltips

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: 

 
onmouseover=
"ARIA_DETAIL(this, '#PERSON_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#">
#MANAGER_NAME#</a> 

with 

<td valign="top">
<a href="f?p=&APP_ID.:2:&SESSION.::NO::PERSON_ID:#MGR_PERSON_ID#"
onmouseover="ARIA_DETAIL(
this,'#MGR_PERSON_ID#')">
#MANAGER_NAME#</a>

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

Conclusion

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. 



David Peake
(david.peake@oracle.com) is a principal product manager in Oracle's Server Technologies division. He has been with Oracle since 1993.

Send us your comments