Focusing on Templates in Oracle HTML DB - Body Section (Page 4 of 4 )
The Body section contains the HTML tags and substitution variables for the BODY section of the HTML document. This is the section through which the majority of your page will be created. You can define the location of your main body content and position up to eight different regions for your page. If you are using tabs and sub-tabs, their location will also be defined here. The following is a listing of code from a BODY section definition:
<body #ONLOAD#>
#FORM_OPEN#
<table width="100%" cellpadding="0" cellspacing="0" border="0" summary="">
<tr>
<td valign="top" class="t1Logo">#LOGO#</td>
<td valign="top" class="t1Logo">
<img src=#WORKSPACE_IMAGES#change_user2.gif />
</td>
<td align="right" valign="top">#NAVIGATION_BAR#</td>
</tr>
<tr>
<td>&APP_USER.</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" summary="">
<tr>
<td colspan="5" class="t1ParentTabHolder">
<table border="0" cellpadding="0" cellspacing="0" summary="" align="right">
<tr><td><br/></td>
#TAB_CELLS#
</tr>
</table>
</td>
</tr>
<tr>
<td class="t1topbarLeft" valign="top">
<img src="#IMAGE_PREFIX#themes/theme_1/ top_bar_far_left.png" alt="" />
</td>
<td align="right" class="t1topbarLeft" colspan="2" valign="top">
<img src="#IMAGE_PREFIX#themes/theme_1/ top_barleft2_1.png" alt="" /></td>
<td align="right" class="t1topbarLeft" valign="top">
<img src="#IMAGE_PREFIX#themes/theme_1/ top_barleft2_2.png" alt="" /></td>
<td class="t1topbarMiddle" valign="top">
<table height="100%" cellpadding="0" cellspacing="0" border="0" summary="">
<tr>
<td height="20"><br/></td>
</tr>
<tr>
<td valign="bottom" height="20">#REGION_POSITION_01#</td>
</tr>
</table></td>
<td valign="top">
<img src="#IMAGE_PREFIX#themes/theme_1/ top_bar_right.png" alt="" /></td>
</tr>
<tr>
<td class="t1PageLeft" colspan="3" align="left" valign="top">
#REGION_POSITION_02#
</td>
<td><br/></td>
<td class="t1PageRight" colspan="2">
<table summary="" cellpadding="0" width="100%" cellspacing="0" border="0">
<tr>
<td width="100%" valign="top" class="t1PageBody">
<div class="t1messages">
#GLOBAL_NOTIFICATION#
#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE#
</div>
#BOX_BODY# #REGION_POSITION_04##REGION_POSITION_05# #REGION_POSITION_06#
#REGION_POSITION_07# #REGION_POSITION_08#
</td>
<td valign="top">#REGION_POSITION_03#<br /></td>
</tr>
</table>
</td>
</tr>
</table>
This example contains a lot of HTML tags that you would expect to see in the body of a regular HTML page, but it also has a large number of substitution variables. This particular example defines a page that has a logo image, a navigation menu, one set of tabs, a side navigation bar, a breadcrumb-type menu, and a region for a report. Figure 6-8 shows a page based on this template.
The #ONLOAD# substitution variable in the <body> tag is used for JavaScript that will be executed when the page is first loaded. The value that will be substituted at run time is entered in the On Load JavaScript section of the Edit Page section, as shown here.
The #FORM_OPEN# substitution variable is placed where you would normally place the HTML <form> tag. If a page using this template is to be submitted, you must include this substitution variable in your template. There is no source for this substitution variable; HTML DB will generate the necessary code.
The next section of HTML code defines a table that contains the two logo images and the navigation bar. The first logo image is placed using the #LOGO# substitution variable, which
Figure 6-8. Template base page
derives its source from the Image and Logo Image Attributes fields in the Logo section of Application Attributes. We have already seen the use of the #IMAGE_PREFIX# for an image that came with HTML DB, but here we see another substitution variable, #WORKSPACE_IMAGES#, which allows you to use an image that is imported into your workspace. Simply include this substitution variable before the name of the image. For further details on managing image files, see Chapter 7. The #NAVIGATION_BAR# substitution variable specifies the location of the navigation bar. For more information about navigation bars, see Chapter 11. The source for the substitution variable comes from the navigation bar sub template definition (see the “Sub-template Definitions” section, later in this chapter).
Notice the use of both regular HTML style elements, such as <td height=”20”>, and Cascading Style Sheet classes, such as <table class=”t1Logo”>. Remember, the CSS was specified in the Header section of the template. Also note the use of the substitution variable &APP_USER. in <td> &APP_ USER.</td>, which retrieves the current username.
The next section of HTML code defines a table and a table row that displays the standard tabs. The substitution variable #TAB_CELLS# is used to position the display of the tabs. The value for this variable comes from the Standard Tab Attribute section of the page template (for further explanation, see the “Standard Tab and Parent Tab Attributes” section, later in this chapter). It is possible to position your tabs anywhere on the page you would like. The #TAB_CELLS# substitution variable can be placed in the Header, Body, or Footer section. If your page also contains parent tabs, you would place the #PARENT_TAB_CELLS# substitution variable in its own table row. This could be in the same table or a different table definition.
The next group of HTML, which includes three image definitions that use the #IMAGE_PREFIX# substitution variable and the #REGION_POSITION_01# substitution variable, make up the bar below the tab and the region used for the breadcrumb menu. The following group uses one image, and the #REGION_POSITION-02# substitution variable is used to define the region where the side navigation bar is located.
The next three substitution variables used are #GLOBAL_NOTIFICATION#, #NOTIFICATION_ MESSAGE#, and #SUCCESS_MESSAGE#. The #GLOBAL_NOTIFICATOIN# substitution variable gets its source from the Global Notification field in the Application Attributes. The substitution variable #NOTIFICATION_MESSAGES# will be replaced with a summary of inline error messages from item validation. When creating a validation, you may choose to display the error messages next to the associated items, all together in the #NOTIFICATION_MESSAGE# location, or in both places. The #SUCCESS_MESSAGE# substitution variable defines the location for the display of the page-level success and error messages.
In the remainder of the HTML code, a number of substitution variables are used, #BOX_BODY# and #REGION_POSITION_O3# through #REGION_POSITION_08#. The region position variables specify the locations for different regions within the page. You may create a template with up to eight different regions, #REGION_POSITION_01# through #REGION_POSITION_08#. When designing your template, you might use one region on the side of your page for a navigation section, another for a breadcrumb menu across the top, one in the center for the main content, and another at the bottom of the page. It does not matter in what order you place the region positions within your HTML code. Notice that #REGION_POSITION_03# is actually placed after all the other region positions.
The region positions are used in your page definition. As you define a page and create its regions, you specify, through a pick list, the template region position in which you would like your regions displayed. It is not necessary to use every template region position when creating a page that uses that template.
Please check back next week for the conclusion to this article.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
 This article is excerpted from the Oracle HTML DB Handbook, written by Lawrence Linnemeyer and Bradley Brown (McGraw-Hill, 2006; ISBN: 0072257687). Check it out today at your favorite bookstore. Buy this book now.
|
|
