Building an Ajax Memory Tree

by Scott Spendolini

From: http://www.oracle.com/technology/pub/articles/spendolini-tree.html

Learn how to create an Ajax-based memory tree in Oracle Application Express, step by step.

By now, you've probably heard of Ajax, which is shorthand for Asynchronous JavaScript and XML. If you've used Google Maps, Yahoo Mail, or Flickr, then you've seen the possibilities for creating a rich, interactive UI.

Ajax is not a technology itself, but rather a combination of several technologies—HTML, CSS, JavaScript, and XML—delivered via a Web page. Essentially, Ajax extends client-server-like functionality to the Web.

In this article, you will learn how to build an Ajax-based memory tree in Oracle Application Express (formerly HTML DB), based on any table that contains hierarchical data. (The code for the tree is based on the sample application provided by Application Express development team member Carl Backstrom. ) I have added the word "memory" to the name here as, unlike with Carl's example, this tree will "remember" which nodes are expanded, contracted, and selected across page views. There is also a search function that will locate any node in the tree and expand it accordingly—something that is not possible with the tree component supplied with Application Express. As the tree makes use of Ajax to fetch nodes as they are expanded, it can easily scale to support a table with thousands or more rows.

Requirements

Access to an Oracle Application Express 2.0 workspace
You can quickly get access to such a workspace by either requesting a free workspace on http://apex.oracle.com, or by installing Oracle Database 10g Express Edition (XE) (Windows & Linux only). Note that prior versions (1.5 and 1.6) won't work.
A table with hierarchical data (ID, Parent ID, Name)
If you do not have a table with data formatted in this manner, you can use the EMP demo table.

Step 1: Create the Required Table, Sequence, and Trigger

First, sign into your Application Express workspace and create the required database objects for the tree. The TREE_TEMP table will track which nodes of the tree are expanded for each user. It will be automatically and asynchronously populated each time a user clicks on the + or - icons in the tree via JavaScript and an application-level process.

From the SQL Workshop:

Sign on with your Workspace Name, Username, and Password (Username and Password only if using Oracle Database XE).
Click on SQL Workshop.
Click on SQL Commands.
Copy and paste this code into the SQL region:
```
create sequence tree_temp_seq start with 1
```
and click on Run.

Copy and paste this code into the SQL region:

create table tree_temp
   (	temp_id number, 
	    app_user varchar2(100), 
	    app_session varchar2(100), 
	    pid number, 
	    id number, 
	    name varchar2(100), 
	    exp char(1), 
	    icon varchar2(10)
   )	
/

and click on Run.

Copy and paste this code into the SQL region:

create or replace trigger tree_temp_bi
   before insert on tree_temp
   for each row
   declare	
  	 l_temp_id number;
   begin
  	 select tree_temp_seq.nextval
   	  into l_temp_id
   	  from dual;
 	 :new.temp_id := l_temp_id;
   end;
/

and click on Run.

Step 2: Create the Required View

The Ajax memory tree is based on a view rather than a table. For example:

create or replace force view tree_view
 (pid, id, name)
as 	
select mgr pid, empno id, ename name from emp
/

The view you use must have only three columns and adhere to the following guidelines:

PID : The Parent ID of a node
ID : A unique identifier for a node
Name : Name to be displayed

The table must also have only one row where the PID is null. This will be the highest level node in the tree.

The tree you develop here will use the EMP table. Should you want to use your own table, adjust the CREATE VIEW procedure accordingly.

From the SQL Workshop:

Copy and paste the CREATE VIEW code into the SQL region and click on Run.

Step 3: Install the Ajax_MEMORY_TREE Package

Next, create the Ajax_MEMORY_TREE package. This package contains all the logic that controls the tree.

Copy and paste this code into the SQL region:

create or replace package ajax_memory_tree
is	
   procedure init;
   procedure render;
   procedure find_node (p_id in varchar2);
   procedure process_click;
   procedure contract;
   procedure expand;
end ajax_memory_tree;
/

and click on Run.

Copy and paste the code in Listing 1 into the SQL region and click on Run.

Step 4: Create an Application Express Application

Now that the required database objects are created, the next step is to create the Application Express application. If you already have an existing Application Express application, you can create your Ajax Memory Tree there.

Click on Application Builder.
Click on Create >.
Select Create Application and click on Next >.
Enter a Name for your Application, such as Ajax Memory Tree, and click on Next >.
Add a Blank Page by clicking on Add Page and then clicking on Next >.
Select One Level of Tabs and click on Next >.
Select No for Copy Shared Components from Another Application and click on Next >.
Take the defaults for Authentication Scheme, Language, and Use Language Preference Derived From and click on Next >.
Select Theme 3 and click on Next >.
Click on Create to create your application.

Step 5: Create Regions and Items

Next, create regions and items required for the tree. There are three regions required on Page 1:

JavaScript & CSS
This region will hold the required JavaScript functions and a small in-line CSS or Style Sheet definition.
Ajax Memory Tree
This region will simply call the ajax_memory_tree.render procedure, which in turn, will render the tree on the page.
Current Node
This is a simple SQL Report that highlights the details of the selected node in the tree.

Click on 1 - Page 1 to edit Page 1 in your Application.
Create a new Region by clicking on the Add Region icon.
Select HTML and click on Next >.
Select HTML again and click on Next >.
Enter JavaScript and CSS for the Title, select No Template for the RegionTemplate, and click on Next >.
For the HTML Region Text Source, copy and paste the code from Listing 2 and click on Create Region.

This JavaScript comprises three functions that control the contracting and expanding of the tree, as well as the popup Find window:

popupNodeFinder
This function will simply open a new popup window based on Page 2 of the application.
html_TooglePlusMinus
This function, when called by getTreeNode, will toggle the + and - icon when clicked. It will also set the Application Express Item P1_BRANCH to the value of the item that was just clicked. Finally, it will asynchronously call one of the Application Level Processes—contractTree or expandTree—which, in turn, will update the tree_temp table.
getTreeNode
This function is the core of the Ajax Memory Tree. Each time a + or - icon in the tree is clicked, this is the function which gets called. When executed, it will first call html_TogglePlusMinus, which will change the icon and set P1_BRANCH. Next, it will call the Application Process processClick and pass in the value of P1_BRANCH. The processClick process will, in turn, call the ajax_memory_tree.process_click procedure, which renders the newly expanded node and its siblings.

The embedded style sheet portion of this region is used to denote the currently selected node. When a node is selected, the selected_node style is applied to that node, thus giving it a light green background. All other nodes are rendered with the unselected_node style.

Next, create the region for the tree. This region will simply contain a PL/SQL call to the ajax_memory_tree package.render procedure.

Create a new Region by clicking on the Add Region icon.
Select PL/SQL Dynamic Content and click on Next >.
Enter Ajax Memory Tree for the Title and click on Next >.
For the PL/SQL Source, enter ajax_memory_tree.render; and click on Create Region.

In order for the tree to function, four items must also be added to this page. These items will store information such as the root node of the tree, which node was clicked, and the current node of the tree.

Create a new Item by clicking on the Add Item icon.
Select Hidden and click on Next >.
Enter P1_TREE_ROOT for the Item Name, select Ajax Memory Tree as the Region, and click on Next >.
Click on Create Item.
Create a new Item by clicking on the Add Item icon.
Select Hidden and click on Next >.
Enter P1_SELECTED_NODE for the Item Name, select Ajax Memory Tree as the Region, and click on Next >.
Click on Create Item.
Create a new Item by clicking on the Add Item icon.
Select Hidden and click on Next >.
Enter P1_MESSAGE for the Item Name, select Ajax Memory Tree as the Region, and click on Next >.
Click on Create Item.
Create a new Item by clicking on the Add Item icon.
Select Hidden and click on Next >.
Enter P1_BRANCH_ID for the Item Name, select Ajax Memory Tree as the Region, and click on Next >.
Click on Create Item.
Create a new Item by clicking on the Add Item icon.
Select Display Only and click on Next >.
Select Display as Text (does not save state) and click on Next >.
Enter P1_FIND for the Item Name, select Ajax Memory Tree as the Region, and click on Next >.

For the Label, enter:

<a href="#" onClick="popupNodeFinder ()";><img 
src="/i/flashlight.gif" title="Find an Employee"></a>

For the Label Template, select Optional, and click on Next >.
Click on Create Item.

Next, you'll need to create a simple report region. This report will display the data from the currently selected node in the tree.

Create a new Region by clicking on the Add Region icon.
Select Report and click on Next >.
Select SQL Report and click on Next >.
Enter Current Node as the Title, select 2 as the Column, and click on Next >.

For the SQL Query, enter:

select * from tree_view where id = :P1_SELECTED_NODE

and click on Create Region.

Step 6: Create the Processes and Branch

In order to facilitate navigation and control of the tree, two page-level processes, three application-level processes, and a branch need to be created.

One of the page-level processes, Initialize the Tree, will only be called one time per session. This process will call theajax_memory_tree.init procedure, which will clear the stale session information from the tree_temp table for the current user and set the root node of the tree.

The other page-level process, Find Node, is only executed when the Find Node popup window is called. This process will call theajax_memory_tree.find_node procedure, passing in the node that the user selected. It will then render the tree with the specified node highlighted and the tree expanded accordingly.

Under Page Rendering - Processes, add a new process by clicking on the Add Process icon.
Select PL/SQL and click on Next >.
Enter Initialize the Tree as the Name and click on Next >.
For Enter PL/SQL Page Process, enter: ajax_memory_tree.init;
and click on Next >.
Leave the Success & Failure Messages blank and click on Next >.
For Condition Type, select Value of Item in Expression 1 is NULL, enter P1_TREE_ROOT for Expression 1, and click on Create Process.
Under Page Processing - Processes, add a new process by clicking on the Add Process icon.
Select PL/SQL and click on Next >.
Enter Find Node and click on Next >.
For Enter PL/SQL Page Process, enter: ajax_memory_tree.find_node(:P1_SELECTED_NODE);
and click on Next >.
Leave the Success & Failure Messages blank and click on Next >.
For Condition Type, select Request = Expression 1, enter FIND_NODE for Expression 1, and click on Create Process.

You need to create three application-level processes in order to support the asynchronous or Ajax portions of the tree. These processes will be called by JavaScript functions, which you previously added to the page.

For example, the JavaScript function getTreeNode will call the application-level process processClick and run it on Page 0 of the application:

htmldb_Get(null,&APP_ID.,'APPLICATION_PROCESS=processClick',0);
get.add('P1_BRANCH_ID',pValue);
gReturn = get.get();

Get more information on the htmldb_Get function here .

In the Breadcrumb Menu, click on Application X, where X is the Application ID of your application.
Click on Shared Components.
Under Logic, click on Application Processes.
Click on Create > .
Enter contractTree for the Name, select On Demand: Run this application process when requested by a page process and click onNext >.
Enter: ajax_memory_tree.contract; for the Process Text and click on Next >.
Click Create Process.
Click on Create > .
Enter expandTree for the Name, select On Demand: Run this application process when requested by a page process and click onNext >.
Enter: ajax_memory_tree.expand; for the Process Text and click on Next >.
Click Create Process.
Click on Create > .
Enter processClick for the Name, select On Demand: Run this application process when requested by a page process and click onNext >.
Enter: ajax_memory_tree.process_click; for the Process Text and click on Next >.
Click on Create Process.

Finally, you need to build an unconditional branch. This branch will redirect the application back to Page 1 unconditionally.

Edit Page 1 by clicking the Edit Page icon in the upper-right corner of the page.
Create a new Branch by clicking on the Add Branch icon.
Take the defaults and click on Next >.
Enter 1 for Page and click on Next >.
Click on Create Branch.

Step 7: Create Additional Pages

All the items and regions for the Ajax memory tree are placed on Page 1 of the application. However, two more pages required in order for the tree to function correctly.

Page 0 : In order for the Ajax components to work correctly, you need to create Page 0, which is a special page in Application Express. When the application- level processes run, they will run on Page 0. As Page 0 contains no logic, it is perfectly safe for the application processes to execute on that page, as no other business rules will be executed.
Search Page : Another standard page also needs to be created in order for the search functionality to work. This page can be any page number in Application Express. In this example, page 2 is used.

On the Page Definition page, click on the Create > button, which is immediately to the right of the Edit Attributes button.
Select New Page and click on Next >.
Select Blank Page and click on Next >.
Enter 0 for the Page and click on Next >.
Enter Page Zero for the Name and click on Next >.
Select No for Would you like to use tabs for this new page? and click on Next >.Click on Finish.
Click on Edit Page.
On the Page Definition page, click on the Create > button, which is immediately to the right of the Edit Attributes button.
Select New Page and click on Next >.
Select Blank Page and click on Next >.
Enter 2 for the Page and click on Next >.
Enter Find Node for the Name and click on Next >.
Select No for Would you like to use tabs for this new page? and click on Next >.
Click on Finish.
Click on Edit Page.

Step 8: Create Page 2 Regions

You need to create two regions on Page 2: one to hold the JavaScript needed to pass back the selected node to page 1, and another to hold a report on all items in the tree. You can customize this report later to include search functionality, should your tree contain more than just a few items.

Create a new Region on Page 2 by clicking on the Add Region icon.
Select HTML and click on Next >.
Select HTML again and click on Next >.
Enter JavaScript for the Title, select No Template for the RegionTemplate and click on Next >.

For the HTML Region Text Source, copy and paste this code:

<script language="JavaScript">
   	function passBack(passVal1, passVal2)
   	{
  	opener.document.getElementById("P1_SELECTED_NODE").value = passVal1;
   	opener.document.getElementById("P1_MESSAGE").value = passVal2;
   	window.opener.doSubmit('FIND_NODE');
   	close();
   	}
 </script>

and click on Create Region.

Create a new Region by clicking on the Add Region icon.
Select Report and click on Next >.
Select SQL Report and click on Next >.
Enter Search for a Node as the Title and click on Next >.
For the SQL Query, enter:
```
select id, name, '[select]' pick from tree_view 
```
and click on Create Region.

When a user selects a node to view, the JavaScript function passBack must be called. This will pass back the selected ID to the original page and submit it. It will also trigger the Find Node process to be run.

Click on the word Report next to your Report Region.
Edit the Pick column by clicking on the corresponding Edit Icon.
Scroll down to the Column Link section.
Enter #PICK# for the Link Text, select URL as the Target, and for the URL, enter
```
javascript:passBack('#ID#','The current node is now #NAME# .')
```
Scroll to the top of the page and click on Apply Changes.
Click on Apply Changes again.

Step 9: Test Your Ajax Memory Tree

At this point, you have all the components required for the Ajax memory tree. All that is left is to test your application.

In the Breadcrumb Menu, click on Application X, where X is the application ID of your application.
Click on Run Application.
Use the same username and password as you did to sign on to Application Express.
Expand and/or contract each node by clicking on the + or - icon. Also, click on the names in the tree and verify that the Current Node report changes.

Your application should look similar to this:

Congratulations, you have just built an Ajax-based tree in Application Express!

For another, shorter example of how to expand Oracle HTML DB with Ajax, please see my blog entry here.

Scott Spendolini ([email protected] ) is President and Founder of Sumner Technologies, LLC (www.sumnertech.com), a consulting firm specializing in Oracle Application Express.

Send us your comments

Building an Ajax Memory Tree

informix:ODBC 配置原理

ERP SOFTWARE FROM SAP A FOUNDATION TO EXECUTE YOUR BUSINESS STRATEGY

從 Microsoft Active Directory 到 IBM Lotus Domino Directory 的遷移與集成

2011年3月份工作計劃

Building an Ajax Memory Tree

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結