DHTML Lists
A new type of list, the DHTML List, was
added in Version 2.0 of HTML DB. This type of list creates a
menu or tree type list. Many examples of the DHTML Image lists
already exist and have likely been seen by the readers. The
icon drop down lists are a DHTML Image list.
DHMTL Lists are created just like any other
list with entries and targets. DHTML menus also have sublists.
The sublists will appear when the icons are pressed. Users have
seen this action using the HTML DB DHMTL buttons.
If using images, the DHMTL List (Image)with Sublist option must be chosen. The images must
be specified in the Lists that will be used as the source of the
List region. The image can be any image the developer wants to
use. The template has two image specifications: one for the
button; and the other for the right side drop down menu. These
specifications can be changed if necessary to add the
developer’s own graphics. It is not necessary to be limited to
the button that Oracle has provided. If one wants to provide
their own graphics, simply change the subtemplates in the
Template Definition. The following subtemplates will have to
be modified: The List Template Current, List Template Current
with Sub List Items, List Template Noncurrent, and List Template
Noncurrent with Sub List Items.
The following steps can be used to modify
the template:
1.
From the page definition, click on the DHTML List (Image)
with Sublist in the Templates box or access this template
through the Shared Components.
2.
In the template, look for the Template Definition section
as shown in Figure 11.8.
3.
Now modify the templates as desired. For example, the
List Template Current will be equal to the following when
installed.
<div class="dhtmlMenuItem"><a
href="#LINK#"><img src="#IMAGE_PREFIX#themes/generic_list.gif" #IMAGE_ATTR#
/></a><img src="#IMAGE_PREFIX#themes/generic_open.gif"
width="22" height="75" /><a href="#LINK#" class="dhtmlBottom">#TEXT#</a></div>
Careful examination of the HTML code will
reveal two references to images. The first reference is to the
left side of the icon drop down, generic_list.gif, the second is
the right side of the button, generic_open.gif. These two
images are plain gray boxes, but they do not have to be! The
source of the button image can be changed to whatever the
developer wants it to be! For instance, the src was changed to
use the image specified in the List definition. The Template
Definition could be changed to be like the following:
<div
class="dhtmlMenuItem"><a href="#LINK#"><img src="#IMAGE#" #IMAGE_ATTR#
/></a><img src="#IMAGE_PREFIX#themes/generic_open.gif"
width="22" height="75" /><a href="#LINK#" class="dhtmlBottom">#TEXT#</a></div>
The src of
the image can be anywhere that you specify.
