Skip Headers
Oracle® HTML DB User's Guide
Release 1.6

Part Number B14303-02
Go to Documentation Home
Home
Go to Book List
Book List
Go to Table of Contents
Contents
Go to Index
Index
Go to Master Index
Master Index
Go to Feedback page
Contact Us

Go to previous page
Previous
Go to next page
Next
PDF · Mobi · ePub

9 Controlling Page Layout and User Interface

This section describes different ways you can customize your application's user interface and page layout including customizing regions, editing item attributes, customizing templates, and incorporating cascading style sheets and images.

This section contains the following topics:

See Also:

"Adding Navigation" for more information on creating navigation bars, tabs, menus, lists, and trees

Understanding Page Layout

Oracle HTML DB renders pages by combining templates with application components defined by the developer and data in the database.

The overall framework or structure of a page is determined by the page template. For example, the page templates controls whether a page uses tabs and a navigation bar. It may also define whether a page includes a bar on the left side that serves as a placeholder for navigation or secondary content. Finally, a page template may include definitions of region positions, which enable precise control over placement of regions using HTML tables or style sheet definitions. The page template itself is composed of HTML combined with substitution strings which will be substituted with the appropriate Oracle HTML DB components at runtime.

As a developer, you add content on a page by creating regions. Each region may be a report based on a SQL query or a list of navigation links provided by an Oracle HTML DB list. You position a region either relative to other regions (that is, based on its sequence number and column), or by using a region position defined in the page template. The style of the region is also controlled by the region template. Like the page template, the region template defines the structure of the area that the region takes up on a page. It defines whether the region title is displayed and where it is displayed relative to the main content, or the body. A region may also define absolute positions for buttons.

Displaying Components on Every Page of an Application

Page zero of your application functions as a master page. The HTML DB engine renders all components you add to page zero on every page within your application. You can further control whether the HTML DB engine renders a component or runs a computation, validation, or process by defining conditions.

To create a page zero:

  1. Create a new page.

  2. Specify the page number as zero (0).

How Item Attributes Affect Page Layout

An item is part of an HTML form and can be a text field, text area, password, combobox, check box, and so on. You can alter the appearance of a page by changing the item attributes. For example, these attributes can impact where a label displays, how large an item will be, whether the item will display next to, or below, the previous item.

See Also:

"Creating Items"

To edit item attributes:

  1. Navigate to the Page Definition. (See "Viewing a Page Definition".)

  2. Under Items, click the item name.

    The Item Definition appears.

Table 9-1 describes how item attributes affect the layout of a page.

Table 9-1 Item Attributes Affecting Page Layout

Heading Attribute Description
Displayed Sequence Determines the order in which items are rendered within a region.
Displayed Region Defines the region in which the item displays. All items must be in a region.
Displayed Begin On New Line Determines whether this item displays on the same line as the previous item or whether it displays on the next line.
Displayed Begin On New Field Determines whether this item displays in the next column or in the same column as the previous item.
Displayed ColSpan Items are laid out in HTML tables. Defines the value to be used for the COLSPAN attribute of the table cell containing an item.
Displayed RowSpan Items are laid out in HTML tables. Defines the value to be used for the ROWSPAN attribute in the table cell that the item displays in.
Label Label Enter the label for this item. You may include HTML, JavaScript, and shortcuts. You can also use the substitution string #CURRENT_ITEM_NAME# to obtain the name of the item associated with this label.
Label Horizontal/Vertical Alignment Controls the placement as well as the horizontal and vertical alignment of the label. Labels can be displayed above, below or to the left of the item.
Label Template Specifies the label template. Use label templates to apply a consistent appearance to labels in your application.
Label HTML Table Cell Attributes Defines additional attributes for the cell containing this item's label (for example, nowrap="nowrap").
Label Post Element Texts Specifies additional attributes for the HTML table cell used to display each individual option in a radio group or set of check boxes. May include HTML, JavaScript, and shortcuts. You may reference the following substitution strings:
  • #CURRENT_FORM_ELEMENT# obtains the name of the HTML form element that this post element text is associated with.

  • #CURRENT_ITEM_NAME# obtains the name of the item that this post element text is associated with.

List of Values Columns Applies to radio groups and check boxes. Defines the number of columns to use to display the values defined in the List of Values. By default, all values display in one column.
Conditional Display Condition Type and Expressions Defines conditions and appropriate expressions that determine whether an item displays.

See Also: "Understanding Conditional Rendering and Processing"

Read Only Display Settings Read Only Condition Type Defines conditions and expressions that determine whether the item will be display as read-only. Use this attribute to display certain items to a set of users as updatable, while displaying that same set of items to others users as non-updatable. Reduces the need to code duplicate interfaces for different users.

Customizing Regions

A region is a area on a page that serves as a container for content. Each page can have any number of regions. You control the appearance of a region through a specific region template. The region template controls the look of the region, the size, determines whether there will be a border, a background color, and what type of fonts display. A region template also determines the standard placement for any buttons placed in region positions.

You can use regions to group page controls (such as items or buttons). You can create simple regions that do not generate additional HTML, or create elaborate regions that frame content within HTML tables or images.

Regions display in sequence within HTML table columns. You can also explicitly place regions in positions defined in the page template. You can also choose to display regions conditionally.

Topics in this section include:

Creating a Region

You create new regions by running the Create Region Wizard.

To create a new region:

  1. Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)

  2. Under Regions, click the Create icon.

    The Create Region Wizard appears.

  3. Select a region type and follow the on-screen instructions.

When you create a region you select a region type. The HTML DB engine interprets a region differently based the type you select. Table 9-2 describes available region types.

Table 9-2 Region Types

Region Type Description
HTML When you select HTML, the wizard prompts you to select one of the following:
  • HTML - Functions as containers for items and contain the HTML you provide. Any HTML you type may contain substitution strings.

  • Other, HTML Text (escape special characters) - Same as HTML region, but the HTML DB engine escapes special characters before they are rendered.

  • Other, HTML Text (with shortcuts) - Same as HTML region, but with support for shortcuts.

  • Other, Help Text - Enable you to provide page level help.

See Also: "Utilizing Shortcuts" and "Creating a Help Page"

Report Report regions can be defined by a SQL query you write, or by using a wizard to guide you through the steps needed to write a query.

See Also: "Creating Reports"

Calendar Calendar regions are used to contain a monthly calendar.

See Also: "Creating Calendars"

Chart Chart regions contain line, bar, or pie charts based on SQL queries.

See Also: "Creating Charts"

List List regions are used for navigation and may consist of links or images. Individual list entries can be conditionally displayed.

See Also: "Creating Lists"

Menu Menu regions are navigational controls consisting of predefined, hierarchically organized links.

See Also: "Creating Menus"

PL/SQL Dynamic Content Regions based on PL/SQL enable you to render any HTML or text using the PL/SQL Web Toolkit.
URL URL based regions obtain their content by calling a Web server using a predefined URL.

See Also: "Incorporating Content from Other Web Sites"

Tree Trees are a hierarchical navigational control based on a SQL query executed at runtime. It enables the user to expand an collapse nodes.

See Also: "Creating Trees"


See Also:

How Region Attributes Affect Page Layout

You can alter the appearance of a page by changing the region attributes.

To edit region attributes:

  1. Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)

  2. Under Regions, click the region name.

    The Region Definition appears.

Table 9-3 describes region attributes that affect the layout of a page.

Table 9-3 Region Attributes Affecting Page Layout

Attribute Description
Conditional Display, Condition Type and Expressions Defines conditions and appropriate expressions that determine whether the region displays. Conditions may reference session state, the currently logged in user, or HTML DB environment preferences (such as whether or not a page is in Print View mode).

See Also: "Understanding Conditional Rendering and Processing" and "Optimizing a Page for Printing"

Header and Footer Text, Region Header Specifies HTML text to be displayed at the top of the region (just before the #BODY# content).
End User Customization Enables end user customization. To utilize this feature, you must include the #CUSTOMIZE# substitution string in the Header, Body, or Footer section of the page template.

See Also: "Enabling Users to Customize a Page"

User Interface Attributes, Column Determines which column the region displays in. If two regions are in the same display point, you can place them next to one other by setting the second region to display in column 2. Many regions can display in each column and the display order of the regions within the region display point and column is controlled by the region display sequence number.
User Interface Attributes, Template Determines the look of the region. Select from the region templates defined in the application. To view template attributes clicking on the template name on the Page Definition.

See Also: "About Themes and Templates"

User Interface Attributes, Sequence Specifies the display order of the regions within the page.
User Interface Attributes, Display Point Identifies where within the page the region displays. Regions are rendered in order of sequence number within a Display Point. Click the View icon to see the page layout and select a position.

The possible display points for a region are determined by the page level template (which is a page attribute). If no page level template is selected, the default page level template, defined in the Application Definition is used.

User Interface Attributes, Region HTML table cell attributes Defines additional attributes to be used in the HTML table cells when regions display in multiple columns. The attributes control the cells in the table used to lay out a regions in multiple columns.

Controlling Region Positioning

When you create a region, you must specify its position (or Display Point) on the page. You can choose either a default position (such as Page Template Body) or a user defined position in the template (such as Page Template Region Position 1.)

In addition to Display Point, you can specify which column the region will be placed in. When you place regions in multiple columns, Oracle HTML DB automatically renders the necessary HTML to produce a multiple column layout.

Specifying a Region Header and Footer

In addition to the body content of a region (which can be a report, a chart, or HTML with form elements), you can specify additional HTML to be placed above and below a region or in its header and footer. The region footer supports the following substitution strings:

  • #TIMING# shows the elapsed time in seconds used when rendering a region. You may use this for debugging purposes.

  • #ROWS_FETCHED# shows the number of rows fetched by the Oracle HTML DB reporting engine (the page size). You may use these substitution strings to display customized messages to the user. For example:

    Fetched #ROWS_FETCHED# rows in #TIMING# seconds.
    
    
  • #TOTAL_ROWS# displays the total number of rows that satisfy a SQL query used for a report.

  • #FIRST_ROW_FETCHED# and #LAST_ROW_FETCHED# displays the range of rows displayed. For example:

    Row(s) #FIRST_ROW_FETCHED# through #LAST_ROW_FETCHED# of #ROWS_FETCHED# displayed
    
    

Enabling Users to Customize a Page

You can use the End User Customization attribute to enable users to turn regions on and off in a running application.

To enable end user customization:

  1. Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)

  2. Under Regions, click the region name.

    The Region Definition appears.

  3. Scroll down to End User Customization and select one of the following:

    • Customizable and Not Shown By Default

    • Customizable and Shown By Default

  4. In Customized Option Name, enter the label that represents this region on the page to the user.

  5. Include the #CUSTOMIZE# substitution string in the Header, Body, or Footer section of the page template.

To utilize this feature, you must include the #CUSTOMIZE# substitution string in the Header, Body, or Footer section of the page template.

If at least one region supports end user customization, a link called Customize appears wherever you include the #CUSTOMIZE# substitution string in the page template. When users click this link, a window displays enabling them to turn on and off regions on the page.

Incorporating Content from Other Web Sites

Typically, pages in an application are based on data stored in an Oracle database. To incorporate content from other servers, you can create a region based on a URL to display content. For example, suppose you wanted to reference the current Oracle stock price. You could create a region of type URL based on a URL such as the following:

http://quote.yahoo.com/q?d=b&s=ORCL

You could then create a item called STOCK_SYMBOL and base your region on a stock price entered by the user. For example:

http://quote.yahoo.com/q?d=b&s=&STOCK_SYMBOL.

Sometimes (as is the case with the previous example) the HTML returned to the region is more than is needed. To restrict the HTML displayed you can use the following region attributes:

Note that the previous example may require that you set the Proxy Server application attribute. If you do not set the Proxy Server application attribute, you will get an error message. Oracle HTML DB uses the Oracle utl_http.request_pieces function to obtain the HTML generated from the given URL.

See Also:

"Editing Application Attributes" for more information on setting the Proxy Server application attribute

Managing Themes

Themes are collections of templates that can be used to define the layout and style of an entire application.The idea behind a theme is to provide a complete set of templates that accommodate every UI pattern that may be needed in an application. Templates are organized first by type (button, calendar, label, list, menu, page, popup LOV, region, and report) and then by template classes, identifying the purpose of the each template within that type. Each template type provides a group of standard classes and eight custom classes. These classifications enable Oracle HTML DB to map templates between themes, making it easy to quickly change the entire look and feel of an application.

Topics in this section include:

Accessing the Themes Page

You manage themes on the Themes page.

To access the Themes page from Shared Components:

  1. Navigate to the Workspace home page.

  2. From the Applications list, select an application.

  3. On the Application Builder home page, click Shared Components.

  4. Under User Interface, select Themes and Templates.

    The Themes page appears. The currently selected theme displays a check mark in the current column.

To access the Themes page from the Page Definition:

  1. Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)

  2. Select the theme title.

Changing Default Templates in a Theme

Each theme contains templates for every type of application component and region type. You can change the selected default templates for a theme on the Define Theme page.

You can override these defaults, by either selecting another template when you create new components or regions, or by changing the template on the component or region attributes page.

To review of change the default templates in a theme:

  1. Navigate to the Themes page:

    1. Navigate to the Workspace home page and select an application from the Application list.

    2. On the Application Builder home page, click Shared Components.

    3. Under User Interface, select Themes and Templates.

  2. In the Themes list, click the Edit icon adjacent to the theme name.

    The theme name displays at the top of the page.

  3. To change the theme name, enter a new name in the Name field.

  4. To change a default template, make a new selection from the appropriate list.

Table 9-4 describes the default templates available under the section Default Templates by Component.

Table 9-4 Default Templates by Component

Attribute Description
Page Identifies the default template for displaying pages. If a developer does not explicitly choose a template then the HTML DB engine uses the template specified here.

Once defined, this default template appears on the Edit Application Attributes page under the heading Application Template Defaults.

Error Page Optional. Specifies a page template to use for errors that display on a separate page as opposed to those that display inline. Leave this attribute blank if you do not wish to use a template designed to display errors.

Once defined, this default template appears on the Edit Application Attributes page under the heading Application Template Defaults.

Printer Friendly Page Identifies the template to be used when the HTML DB engine is in printer friendly mode. When calling the HTML DB to render a page, you have the option to identify a printer friendly attribute with values of YES or NO.

If you select YES, then the page displays using a printer friendly template. The HTML DB engine displays all text within HTML form fields as text. The printer friendly template does not need to have the #FORM_OPEN# or #FORM_CLOSE# tags. The objective is to be able to display information with few tables and in a format suitable for printing.

Once defined, this default template appears on the Edit Application Attributes page under the heading Application Template Defaults.

See Also: "Optimizing a Page for Printing"

Button Identifies the default button template used when creating a new button.
Calendar Specifies the default calendar template used when you create new calendar.
Label Identifies the default label template used when you create new label.
List Specifies the default list template used when you create new list.
Menu Identifies the default menu template used when you create new menu.
Region Specifies the default region template used when you create new region.
Report Identifies the default region template used when you create a report.

Table 9-5 describes the default templates available under the section Default Templates by Component.

Table 9-5 Region Templates by Region Type

Attribute Description
Charts Default chart template used when creating a chart.
Forms Default form template used when creating a form.
Lists Default region template used when creating a list.
Menus Default region template used when creating a menu.
Reports Default region template used when creating a report.
Tabular Forms Default region template used when creating a tabular form.
Wizards Default region template used when creating a new wizard component.

Creating a New Theme

You can create a new theme from scratch or select an existing theme from the HTML DB repository.

To create a new theme:

  1. Navigate to the Themes page:

    1. Navigate to the Workspace home page and select an application from the Application list.

    2. On the Application Builder home page, click Shared Components.

    3. Under User Interface, select Themes and Templates.

  2. Click Create Theme.

  3. Specify whether to select a theme from the HTML DB repository, or create a theme from scratch.

  4. If you select From the HTML DB Repository:

    1. Select a theme from the repository.

    2. Click Create.

  5. If you select From Scratch:

    1. On the Define Theme page, select default templates for the new theme.

    2. Click Create.

Switching an Active Theme

When you switch to a new theme, all components that are assigned a template are assigned to a corresponding template in the new theme. Application Builder accomplishes template mapping through the assignment of a template class identifiers.

To apply a theme to an application:

  1. Navigate to the Themes page:

    1. Navigate to the Workspace home page and select an application from the Application list.

    2. On the Application Builder home page, click Shared Components.

    3. Under User Interface, select Themes and Templates.

  2. Click Switch Theme.

    A Theme Compatibility report appears. When you switch to a new theme, Application Builder maps all components currently using a template to a template in the new theme.

  3. From the Switch to Theme list, select a new theme.

  4. Review the Status column to identify problematic mappings:

    • Check indicates the mapping was successful.

    • Warning indicates there are more than one template in the theme you are switching to with the identified class. The warning provides a select list to choose the appropriate template.

    • Error indicates that Application Builder was unable to map the class between the themes. Ensure that a class is identified for the templates in both themes.

  5. Click Next to continue.

  6. Click Switch Theme.

Copying a Theme

Each theme is identified by a numeric identification number (ID). When you create a copy of theme you specify a new theme ID. Copying a theme is useful if you wish experiment with editing a theme or to export a theme with a different ID.

To copy a theme:

  1. Navigate to the Themes page:

    1. Navigate to the Workspace home page and select an application from the Application list.

    2. On the Application Builder home page, click Shared Components.

    3. Under User Interface, select Themes and Templates.

  2. From the Tasks list, select Copy.

  3. From Copy From Theme, select the theme you wish to copy.

  4. From Copy to this Theme Identification Number, enter a new ID for the theme.

  5. Click Copy Theme ID.

Deleting a Theme

You can only delete inactive themes. When you delete a theme, Application Builder only removes inactive templates.

To delete a theme:

  1. Navigate to the Themes page:

    1. Navigate to the Workspace home page and select an application from the Application list.

    2. On the Application Builder home page, click Shared Components.

    3. Under User Interface, select Themes and Templates.

  2. From the Tasks list, select Delete.

  3. From Remove Theme, select the theme you wish to delete.

  4. Click Remove Theme.

About Exporting and Importing Themes

You export a theme in the same way you export any related application file. Exporting a theme from one Oracle HTML DB development instance to another involves the following steps:

  • Export the theme using the Export Theme utility.

  • Import the exported file into the target Oracle HTML DB instance.

  • Install the exported file from Export Repository

Changing a Theme Identification Number

Each theme has a numeric identification number (or ID). You can use the Change Theme ID utility to change a theme ID to another number. Changing a theme ID is useful when you wish to export a theme with a different number and then import it into another application.

To change a theme identification number:

  1. Navigate to the Themes page:

    1. Navigate to the Workspace home page and select an application from the Application list.

    2. On the Application Builder home page, click Shared Components.

    3. Under User Interface, select Themes and Templates.

  2. From the Tasks list, select Change Identification Number.

  3. On the Change Theme ID page:

    1. Select a theme.

    2. Specify a new identification number.

    3. Click Next.

Viewing Theme Reports

Application Builder includes a number of reports designed to help you manage themes and templates.

Topics in this section include:

Viewing All Templates in a Theme

To view all templates that comprise a theme:

  1. Navigate to the Themes page:

    1. Navigate to the Workspace home page and select an application from the Application list.

    2. On the Application Builder home page, click Shared Components.

    3. Under User Interface, select Themes and Templates.

  2. On the Themes page click Theme Reports.

  3. From Report, select Application Templates.

  4. From the Theme list, select a theme.

  5. Click Go.

    A listing of templates displays listing the template type, template name, the associated theme, and template class.

  6. To edit a template, select the template name.

Viewing Theme Template Counts

Accessing the Theme Template Count report lists which template classes currently have templates created for them.

To view the Theme Template Count report

  1. Navigate to the Themes page:

    1. Navigate to the Workspace home page and select an application from the Application list.

    2. On the Application Builder home page, click Shared Components.

    3. Under User Interface, select Themes and Templates.

  2. On the Themes page click Theme Reports.

  3. From Report, select Theme Template Counts.

  4. From the Theme list, select a theme.

  5. If you are using custom classifications, select Show Custom.

  6. Click Go.

Viewing File References

Accessing the File References report displays a listing of all files associated with templates, shared components, or page components in the current application.

To view the File References report:

  1. Navigate to the Themes page:

    1. Navigate to the Workspace home page and select an application from the Application list.

    2. On the Application Builder home page, click Shared Components.

    3. Under User Interface, select Themes and Templates.

  2. On the Themes page, click Theme Reports.

  3. On the File References page:

    1. From Show, select the type of component to include in the report. If you do not make a selection, no results are returned.

    2. From Show Files, select one of the following:

      • With context displays the component, the theme identification number, the component name, the image (if applicable), and the page number. Select the page number to link to a Page Definition.

      • Without context displays only the file name and the image (if applicable).

    3. From File Extensions, select the type of extensions to search for.

    4. Click Go.

  4. To download a comma delimited file (.csv) version of this report, click Download CSV.

Viewing Class References

Accessing the Class References report displays a listing of classes associated with templates, shared components, or page components in the current application.

To view the Class References report:

  1. Navigate to the Themes page:

    1. Navigate to the Workspace home page and select an application from the Application list.

    2. On the Application Builder home page, click Shared Components.

    3. Under User Interface, select Themes and Templates.

  2. On the Themes page click Theme Reports.

  3. On the Theme Reports page:

    1. From Report, select Class References.

    2. From Theme, select a theme.

    3. Click Go.

  4. On the Class References page:

    1. From Show, select the components to check for a class reference. If you do not make a selection, no results are returned.

    2. From Show Class Names, select one of the following:

      • With context displays the component, the theme identification number, the component name, the image (if applicable), and the page number.

      • Without context displays only the referenced class.

    3. Click Go.

  5. To download a comma delimited file (.csv) version of this report, click Download CSV.

Viewing Template Substitution Strings

Use the Template Substitution Strings report to view all supported substitution strings by component.

To view the Substitution String report:

  1. Navigate to the Themes page:

    1. Navigate to the Workspace home page and select an application from the Application list.

    2. On the Application Builder home page, click Shared Components.

    3. Under User Interface, select Themes and Templates.

  2. On the Themes page click Theme Reports.

  3. On the Theme Reports page:

    1. From the Report list, select Template Substitution Strings.

    2. From the Theme list, select which themes to include in the report.

    3. Click Go.

  4. To link to a template definition, select the template name.

Customizing Templates

The HTML DB engine creates the user interface of an application based on a named collection of templates called a theme. Templates control the look and feel of these components in your application. If you need to create a custom template, it is generally simplest to start with an existing template and then modify it. Once you have created one or more default templates, you can modify those templates to fit your specific needs.

Topics in this section include:

About Cascading Style Sheets

A cascading style sheet (CSS) provides a way to control the style of a Web page without changing its structure. When used properly, a CSS separates visual attributes such as color, margins, and fonts from the structure of the HTML document. Oracle HTML DB includes themes that contain templates that reference their own CSS. The style rules defined in each CSS for a particular theme also determine the way reports and regions display.

Selecting a Default Page Template

You can specify a default page template in two ways:

  • Select a default page template within a specific theme

  • Select a specific page template on a page by page basis.

By default the HTML DB engine uses the Page template specified on the Themes page.

Selecting a Page Level Template within a Theme

To specify a default page template within a theme:

  1. Navigate to the Workspace home page.

  2. From the Applications list, select an application.

  3. On the Application Builder home page, click Shared Components.

  4. Under User Interface, select Themes and Templates.

    The Themes page appears.

  5. In the Themes list, click the Edit icon adjacent to the theme name.

  6. Under Default Templates by Component, make a selection from the Page list.

Selecting a Page Level Template for a Specific Page

To specify an page level template for a specific page:

  1. Navigate to the Workspace home page

  2. From the Applications list, select an application.

  3. Select a page name from the Pages list.

  4. Click Edit Attributes.

  5. Locate the first section Primary Page Attributes.

  6. Make a selection from the Page Template list.

Viewing Templates

You can view all available templates on the Templates page. Alternatively, you can view the templates used on a specific page on the Page Definition.

To view existing templates:

  1. Navigate to the Workspace home page.

  2. From the Applications list, select an application.

  3. On the Application Builder home page, click Shared Components.

  4. Under User Interface, select Themes and Templates.

    The Themes page appears.

  5. To view templates you can:

    • View all templates by selecting View Templates from the Tasks list.

    • View templates in a specific theme by selecting a theme name.

    The Templates page appears.

  6. You can narrow your search by selecting:

    • A specific theme from the Theme list

    • A template type from the Show list

    • A template status from the View list

  7. To view a template definition, click the template name. Or, to see a preview of a template, click Run in the Preview column.

Note:

Not all template types have the preview capability.

To view existing templates from the Page Definition:

  1. Navigate to the Workspace home page.

  2. From the Applications list, select an application.

  3. On the Application Builder home page, select a page from the Pages list.

    The Page Definition appears. Templates associated with the current page display under the Templates heading in the far right column.

  4. To view attributes of an existing template, click the template name.

Creating a New Template

If you need to create a custom template, it is generally simplest to start with an existing template and then modify it. Once you have created one or more default templates, you can modify those templates to fit your specific needs.

To create a custom template:

  1. Navigate to the Templates page.

    1. From the Workspace home page, select an application.

    2. On the Application Builder home page, click Shared Components.

    3. Under User Interface, select Themes and Templates.

      The Themes page appears.

    4. From the Tasks list, select View Templates.

      The Templates page appears.

  2. Click Create.

  3. Select the type of template you would like to create.

  4. Select a creation method:

    • From Scratch

    • As a Copy of an Existing Template

  5. Follow the on-screen instructions, being careful to associate your template with the correct theme.

Viewing Template Reports

Oracle HTML DB includes reports describing template utilization, subscriptions, and edit history.

To view template reports for the current application:

  1. Navigate to the Workspace home page.

  2. From the Applications list, select an application.

  3. On the Application Builder home page, click Shared Components.

  4. Under User Interface, select Themes and Templates.

    The Themes page appears.

  5. To view templates you can:

    • View all templates by selecting View Templates from the Tasks list.

    • View templates in a specific theme by selecting a theme name.

  6. To view template reports click the following buttons:

    • Utilization displays template utilization in the current application for all template types (page, report, region, label and list).

    • Subscriptions displays subscribed templates in your application.

    • History details recent changes to templates by developer and last update date.

Editing Templates

Once you create a custom template, you can quickly edit it from either the Templates page or from the Page Definition.

To edit an existing template from the Templates page:

  1. Navigate to the Templates page.

    1. From the Workspace home page, select an application.

    2. On the Application Builder home page, click Shared Components.

    3. Under User Interface, select Themes and Templates.

      The Themes page appears.

    4. From the Tasks list, select View Templates.

      The Templates page appears.

  2. Locate the template you wish to edit and select the template name. You can narrow your search by selecting:

    • A template type from the Show list

    • A template status from the View list

  3. Follow the on-screen instructions.

As you edit templates, you can make changes in one window and run your application in another by selecting Return to Page. Selecting this check box, keeps the page you are editing current after you click Apply Changes.

Button Templates

Button templates enable application developers to customize the look and feel of a button. To build a button, you can use multiple images or HTML tags. Using button templates is optional.

Button Template Attributes

This section describes specific sections of the Button Template page.

Button Template

Template Name identifies the name that identifies the template. Use the Translatable check box to indicate if the template contains text strings which require translation. Theme indicates the theme to which the template is a member.

Template Class identifies a specific usage for the template. When you switch to a new theme, all templates in one theme are mapped to corresponding templates in another theme. Application Builder accomplishes this template mapping through the assignment of a template class.

Template Subscription

Use Template Subscription to apply an existing template to the current application. When you select an existing template, you become a subscriber to that template.

To load a new copy of a master template, click Refresh Template.

Template Text

Defines the button template that displays. You have the option of including standard application substitutions. For example, &ITEM_NAME values can be substituted at rendering time. Button templates support the following substitution strings:

  • #LABEL# is replaced with a button label.

  • #LINK# is replaced with a URL. The URL then calls a #doSubmit# or a redirect JavaScript which submits the page (that is, setting the request value), or simply redirects it to the supplied URL.

Comments

Use this attribute to record developer comments.

Calendar Templates

Calendar templates control the appearance and placement of a calendar. Calendar templates frequently use HTML tables to arrange dates. You place calendar attributes using substitution strings such as #DD# and #MONTH#. A list of supported substitution strings appears on the right side of Calendar Template Attributes page. Note that template substitution strings must be in upper case and begin and end with a pound sign (#).

Calendar Template Attributes

This section describes specific sections of the Calendar Template page.

Calendar Template Identification

Name identifies the name that identifies the template. Theme indicates the theme to which the template is a member.

Template Class identifies a specific usage for the template. When you switch to a new theme, all templates in one theme are mapped to corresponding templates in another theme. Application Builder accomplishes this template mapping through the assignment of a template class.

Template Subscription

Use Template Subscription to apply an existing template to the current application. When you select an existing template, you become a subscriber to that template.

To load a new copy of a master template, click Refresh Template.

Month Attributes

Enter formats for the month title, day of the week, month open, and month close.

Week Attributes

Enter HTML to open and close a week.

Day Attributes

Enter HTML to format the days which occur during the work week (that is, Monday through Friday).

Non-Day Attributes

A non-day is not part of the current month. For example, suppose the first of a month is a Monday, but the week starts on a Sunday. Since Sunday is not be part of the current month, Sunday would be a non-day. Use these attributes to format a non-days.

Weekend Attributes

Enter HTML used to format days which occur on the weekend.

Label Templates

Label templates are designed to centrally manage HTML markup of page item labels. Each item can have an optional label. You can control how these labels display using label templates. For example, you could create a label template called "Required Field" which references an image (such as an asterisk) to indicate to the user that the field is required.

Label templates enable you to define a before and after text string that gets prepended and appended to the item.

Label Template Attributes

This section describes specific sections of the Label Template page.

Label Template Attributes

Template Name identifies the name that identifies the template. Use the Translatable check box to indicate that the template contains text strings which require translation. Theme indicates the theme to which the template is a member.

Template Class identifies a specific usage for the template. When you switch to a new theme, all templates in one theme are mapped to corresponding templates in another theme. Application Builder accomplishes this template mapping through the assignment of a template class.

Template Subscription

Use Template Subscription to apply an existing template to the current application. When you select an existing template, you become a subscriber to that template.

To load a new copy of a master template, click Refresh Template.

Template Definition (normal display)

In Before Label enter HTML to display before the item label. Before Label supports the substitution strings #CURRENT_FORM_ELEMENT#; #CURRENT_FORM_ID#, and #CURRENT_ITEM_NAME#.

In After Label, enter HTML to display after the item label.

Label Template Attributes (error display)

In On Error Before Label enter HTML to precede the item label when a application displays an inline validation error message for the item.

In On Error After Label enter HTML to be appended to the item label when a application displays an inline validation error message for the item. This attribute supports the substitution strings #CURRENT_FORM_ELEMENT#, #CURRENT_FORM_ID#, and #CURRENT_ITEM_NAME#.

Template Comments

Use this attribute to record developer comments.

List Templates

A list is a shared collection of links. You control the appearance of a list through list templates. Using template attributes, you can also define a list element to be either current or non current for a specific page.

See Also:

  • Online help for more information on using specific sections of the Edit List Template page

  • "Creating Lists"

List Template Attributes

This section describes specific sections of the List Template page.

Template Identification

Name identifies the name that identifies the template. Use the Translatable check box to indicate that the template contains text strings which require translation. Theme indicates the theme to which the template is a member.

Template Class identifies a specific usage for the template. When you switch to a new theme, all templates in one theme are mapped to corresponding templates in another theme. Application Builder accomplishes this template mapping through the assignment of a template class.

Template Subscription

Use Template Subscription to apply an existing template to the current application. When you select an existing template, you become a subscriber to that template.

To load a new copy of a master template, click Refresh Template.

Before List Elements

Enter HTML that displays before any list elements. You can use this attribute to open an HTML table or HTML table row.

List Element Display

Defines current and noncurrent list templates.

  • List Template Current. Enter HTML or text to be substituted for the selected (or current) list template.

  • List Template Noncurrent. Enter HTML or text to be substituted for the unselected (or noncurrent) list template.

After List Elements

Enter HTML that displays after displaying all list elements. You can use this attribute to close a HTML table opened in the Before List Elements attribute.

Comments

Use this attribute to record developer comments.

Menu Templates

A menu template controls the display of menus. You select a menu template when you create a region.

Breadcrumb Style Menu Navigation

Breadcrumb style menus usually indicate where the current page is relative to other pages in the application. In addition, users can click a specific page to instantly view it. Oracle HTML DB includes breadcrumb paths beneath the standard tabs (or second level navigation tabs) at the top of each page as shown in the following example:

Figure 9-1 Breadcrumb Style Menu

Description of bc_menu.gif follows
Description of the illustration bc_menu.gif

See Also:

  • Online help for more information on using specific sections of the Edit Menu Template page

  • "Creating Menus"

Menu Template Attributes

This section describes specific sections of the Menu Template page.

Menu Template Identification

Name identifies the name that identifies the template. Use the Translatable check box to indicate that the template contains text strings which require translation. Theme indicates the theme to which the template is a member.

Template Class identifies a specific usage for the template. When you switch to a new theme, all templates in one theme are mapped to corresponding templates in another theme. Application Builder accomplishes this template mapping through the assignment of a template class.

Menu Template Subscription

Use Template Subscription to apply an existing template to the current application. When you select an existing template, you become a subscriber to that template.

To load a new copy of a master template, click Refresh Template.

Menu Template Style)

Select one of the following menu template styles:

  • Parent to Leaf (breadcrumb style) displays the current page menu option, its parent to the left, and so on until the root node is reached.

  • Parent Menu displays all menu options for the current pages parent menu (that is, one level up from current menu).

  • Current Menu displays all menu options in sequence with a common parent.

  • Child Menu displays all menu options that are children of the current page parent menu (that is, peers of the current menu).

Menu Option Control

Table 9-6 describes available Menu Option Control attributes.

Table 9-6 Menu Option Control attributes

Attribute Description
Before First Defines text that displays before the first menu option.
Current Page Menu Option Defines the look of a menu option that corresponds to the current page. This attribute supports the following substitution strings:
  • #NAME# specifies the short name of the menu option

  • #LINK# specifies the anchor target of the menu option

  • #LONG_NAME# specifies the long name of the menu option

Non Current Page Menu Option Defines the look of a menu option that does not correspond to the current page. This attribute supports the following substitution strings:
  • #NAME# specifies the short name of the menu option

  • #LINK# specifies the anchor target of the menu option

  • #LONG_NAME# specifies the long name of the menu option

After Last Defines text that displays after the last menu option.

Template Attributes

Use Menu Link Attributes to specify hypertext link attributes for a menu option.

Use Between Levels to specify text that displays between each level of a breadcrumb menu. For example, suppose your breadcrumb menus has three levels this text would be displayed at the "X" in the example that follows:

main X cars X porsche X 911

In Max Levels specify the number of levels when displaying menus in a breadcrumb style.

Comments

Use this attribute to record developer comments.

Page Templates

Page templates define the appearance of a page. Each template consists of a header template, a body template, a footer template, and a number of subtemplate definitions. If you do not specify a page template as a page level attribute, then the HTML DB engine uses the default page template defined on the Define Theme page.

Page templates combine static HTML with substitution strings which are replaced at runtime. You use substitution strings to indicate the existence and placement of a component within a page template. You can further specify how a component should display using subtemplates.

Topics in this section include:

Supported Page Template Substitution Strings

Table 9-7 describes the available page template substitution strings. Note that all template substitution strings must be in upper case and begin and end with a pound sign (#).

Table 9-7 Page Template Substitution Strings

Substitution String Description
#APP_VERSION# May be used in the Header or Footer sections of the page template. You define the value of #APP_VERSION# in the Version attribute on the Edit Application Attributes page

See Also: "Application Definition"

#BOX_BODY# Identifies where the Body displays. If the Body is null, then #BOX_BODY# will be used instead.
#CUSTOMIZE# May be used in the Header, Body, or Footer sections of the page template.

The End User Customization section of the Region Definition enables you to turn on end user customization. To utilize this feature, you must also include the #CUSTOMIZE# substitution string in the page template.

If at least one region supports end user customization, a link called Customize appears wherever the #CUSTOMIZE# substitution string appears in the page template. When users click this link, a window displays enabling them to turn on and off regions on the page.

See Also: "How Region Attributes Affect Page Layout"

#FORM_CLOSE# If a #FORM_OPEN# is included, then you must include a #FORM_CLOSE# in the header, body, or footer template. #FORM_OPEN# must appear before the #BOX_BODY# and #FORM_CLOSE# must appear after the #BOX_BODY# substitution string.
#FORM_OPEN# Specifies where the HTML open form tag <form> is placed. You must include this substitution string in order to submit a form.

You do not need to code your own form open, the HTML DB engine does it for you.

#GLOBAL_NOTIFICATION# Displays the Global Notification attribute. Global notifications are intended to communicate system status, such as a pending system downtime. You can also use HTMLDB_APPLICATION.G_GLOBAL_NOTIFICATION to set this value if you wish to set it programmatically

See Also: "Global Notifications" for more information on the Global Notification attribute

#HEAD# Used after the <head> open tag, but before the </head> close tag. You can optionally define the contents of #HEAD# for each page (for example, to reference additional style sheets or JavaScript libraries).
#LOGO# Identifies an application logo.

In the Logo section of the Edit Application Attributes page, you can identify an image and image attributes for an application logo. To utilize this feature, you must also include the #LOGO# substitution string in the Header or Body the page template.

See Also: "Logo"

#NAVIGATION_BAR# Defines the existence of navigation bar icons. A navigation bar will appear on every page in your application that uses a template which includes this substitution string.You can expand this substitution string using the Navigation bar subtemplate.

See Also: "Subtemplate Definitions" for more information on Navigation Bar subtemplate

#NOTIFICATION_MESSAGE# Enables developers to communicate messages to the user. Defines where a summary of inline error messages is displayed. Inline error message that can be displayed next to a field, or inline in the notification area or both.
#ONLOAD# May be used in the Header and Footer section of the page template and should be placed inside the <body> html tag. For example:
<body #ONLOAD#>

Use this string as substitute in a JavaScript call to be executed when a page is loaded by the Web browser. The JavaScript to be called can vary for each page.

#PARENT_TAB_CELLS# Identifies the display of parent tabs. Parent tabs require standard tabs. If your application only has one level tabs, you do not need this substitution string.

See Also: "Standard Tab Attributes" for more information on defining Parent Tab Attributes

#REGION_POSITION_NN# Identifies the exact placement of regions within a page. If no region is specified (for example, #REGION_POSITION_01#) then #REGION_POSITION_01# will be replaced with nothing.
#SUCCESS_MESSAGE# Defines where in the page success and error message appear. If the page process runs without raising an error, then this text displays.

You can customize the display of the success message for each template by adding HTML to be displayed before and after the success message.

#TAB_CELLS# Identifies the display of standard tabs.

See Also: "Standard Tab Attributes" for more information on defining Standard Tab Attributes

#TITLE# Defines the page title. Typically included within HTML title tags.

Page Template Attributes

This section describes specific sections of the Page Template page.

Template Identification

Name identifies the name that identifies the template. Use the Translatable check box to indicate that the template contains text strings which require translation. Theme indicates the theme to which the template is a member.

Template Class identifies a specific usage for the template. When you switch to a new theme, all templates in one theme are mapped to corresponding templates in another theme. Application Builder accomplishes this template mapping through the assignment of a template class.

Template Subscription

Use Template Subscription to apply an existing template to the current application. When you select an existing template, you become a subscriber to that template.

To load a new copy of a master template, select Refresh.

Header, Body, and Footer Definitions

Each template consists of a header, a body, a footer, and subtemplate definitions. Use substitution strings to include dynamic content. All template substitution strings must be in upper case and begin and end with a pound sign (#). See online help for specific information as to which substitution strings are supported.

Header is the first section of the page template. Enter HTML that defines the <Head> section of the HTML document. Regions that display or processes and computations that execute AFTER HEADER, will display or execute immediately after this section in the template is rendered.

Body is the second section in the page template and is rendered after the header and before the footer section. Enter HTML that defines the <Body> section of the HTML document. At a minimum, you must include the #BOX_BODY# substitution string.It is strongly recommended you also include #FORM_OPEN# and #FORM_CLOSE#.

Footer is the third section in the page template that displays after the body.

Default Display Points

Breadcrumb Display Point applies to generated components that use Breadcrumb style menus and defines where these Breadcrumb style menus are placed on the page. Sidebar Display Point applies to generated components that use Sidebars and defines where Sidebars are placed on the page.

Subtemplate Definitions

Use Subtemplate Definitions to specify how a component should display. Available subtemplate definitions include:

  • Success Message. Expands the #SUCCESS_MESSAGE# substitution string. You can define a success message either programmatically, or as an attribute of a process. If a success message exists and if the page template includes the #SUCCESS_MESSAGE# substitution string, then this subtemplate is used to render the message.

  • Navigation Bar. Controls the display of navigation bar icons. Enter HTML or text that to be substituted when the #NAVIGATION_BAR# substitution string is referenced in the template header, body or footer. Use the #BAR_BODY# substitution string to identify where each navigation bar icon should display.

  • Navigation Bar. Entry Enter HTML or text that to be substituted into the navigation bar #BAR_BODY# substitution string for each navigation bar entry. Use the following substitution strings to compose the navigation bar entry sub template.

  • Notification. Enter HTML or text that to be substituted when the #NOTIFICATION_MESSAGE# substitution string is referenced in the template header, body or footer. Use the substitution string #MESSAGE# to indicate where in the Notification Message the body of the message will appear.

Standard Tab Attributes

You must populate this attribute if your application includes standard tabs. Standard tabs may be placed in the header, body, or footer sections of the page template using the #TAB_CELLS# substitution string. The page template Header/Body/Footer defines the HTML table and rows. This subtemplate defines how these tabs display by defining the specific cell. Available attributes include:

  • Current Tab. Enter HTML or text that to be substituted for the currently selected standard tab. Whether or not a tab is current is determined by standard tab attributes. Use the #TAB_TEXT# substitution string to position a tab's label and link within the template.

  • Non Current Standard Tab. Enter HTML or text that will be substituted for the unselected standard tabs. Use #TAB_TEXT# to position a tab's label and link within the template.

  • Non Current Tab Font Attributes. This attribute is part of the Standard Tab subtemplate. This value replaces the #TAB_FONT_ATTRIBUTES# substitution string.

See Also:

"Creating Tabs"
Parent Tab Attributes

You must populate this attribute if your application includes two levels of tabs. Enter HTML or text that will be substituted for the selected parent tabs. Parent tabs may be placed in the header, body, or footer section of the page template using the #PARENT_TAB_CELLS# substitution string. Parent tabs only display in conjunction with standard tabs. Available attributes include:

  • Current Parent Tab. Enter HTML or text that will be substituted for the selected parent tabs. Whether or not a tab is current is determined by the page that displays and the standard tab set the page uses. Use #TAB_TEXT# to position a tab's label and link within the template.

  • Parent Current Tab Font Attributes. This attribute is part of the Parent Tab subtemplate and expands the #PARENT_TAB_CELLS# substitution string. A "current tab" is a tab that is current for the current page. This attribute controls the font used to display the parent tab text.

  • Non Current Parent Tab. Enter HTML or text that will be substituted for the unselected parent tabs. Use #TAB_TEXT# to position a tab's label and link within the template.

  • Parent Non Current Tab Font Attributes. This attribute is part of the Parent Tab subtemplate and expands the #PARENT_TAB_CELLS# substitution string. A "non current tab" is a tab that is not current for the current page. This attribute controls the font used to display the parent tab text.

See Also:

"Creating Tabs"
Image Based Tab Attributes

Use this subtemplate for tabs that are entirely based on images. Available attributes include:

  • Current Image Tab. Enter HTML to be used to indicate that an image based tab is currently selected. Include the #TAB_TEXT# substitution string to show the displayed name of the tab.

  • Non Current Image Tab. Enter the HTML to be used to indicate that an image tab is not currently selected. Include the #TAB_TEXT# substitution string to show the displayed name of the tab.

Multi Column Region Table Attribute

If the HTML DB engine displays regions in multiple columns in the same region position then HTML DB will render an HTML table. This attribute enables you to control the attributes of the <table> tag.

Error Page Template Control

Use this attribute only when a page template will be designated as an error template. Use #MESSAGE# to place the error message and #BACK_LINK# to display a link back to the previous page. A template can be designated as an error template by editing the application attributes. For example:

#MESSAGE#

<br>

<a href="#BACK_LINK#">back</a>

Configuration Management

You can use build options to enable or disable functionality. Most application attributes have a build option attribute.

Build Options have two possible values: INCLUDE and EXCLUDE. A component that is excluded is not considered part of the application definition at runtime.

Comments

Use this attribute to record developer comments.

Popup LOV Templates

Popup LOV template controls how popup lists display for all items defined as POPUP. You can only specify one popup LOV template for each theme.

Popup List of Values Template Attributes

This section describes specific sections of the Popup List of Values Template page.

Application Identification

Theme indicates the theme to which the template is a member. Template Class identifies a specific usage for the template. When you switch to a new theme, all templates in one theme are mapped to corresponding templates in another theme. Application Builder accomplishes this template mapping through the assignment of a template class. Use the Translatable check box to indicate that the template contains text strings which require translation.

Template Subscription

Use Template Subscription to apply an existing template to the current application. When you select an existing template, you become a subscriber to that template.

To load a new copy of a master template, click Refresh Template.

Form Icon

Use Popup Icon to specify an icon to display to the right of a form field for items of type POPUP. By default, the HTML DB engine uses a list.gif image. Use Popup Icon Attr to defines image attributes (such as height and width) for the Popup Icon

Search Field

Use these attributes to specify how a Search field displays. Table 9-8 describes available Search Field attributes.

Table 9-8 Search Field Attributes

Attribute Description
Before Field Text Defines text to display before the popup list of values search field displays.
Filter Width Display the text field using this width.
Filter Max Width Display the text field widget using this maximum width.
Filter Text Attribute Display the text field using these attributes. This will be included within the HTML input tag.
After Field Text Display this text after displaying the search field, the search button, and the close button.

Buttons

Use these attributes to define the button name and attributes for Find, Close, Next, and Previous button.

Window

Popup lists of values are executed using JavaScript. Use these attribute to control the values of scrollbars=, resizable=, width=, and height=. For more information on default values see online help.

Pagination

Defines how row count results display.

Result Set

Use these attributes to define text or HTML to display before and after a result set.

Page Attributes

Use these attributes to define popup pages. For more information see online help.

Region Templates

Region templates control the appearance and placement of region attributes. Region templates frequently use HTML tables to arrange content.

Region templates apply style elements to regions. Region templates display substitution strings. The only required substitution string, #BODY#, identifies where the source of the region should be placed. All other substitution strings are optional. You can use these substitution strings to indicate the existence and placement of a page control (such as a button) within the region.

Region Template Attributes

This section describes specific sections of the Region Template page.

Region Template Identification

Name identifies the name that identifies the template. Use the Translatable check box to indicate that the template contains text strings which require translation. Theme indicates the theme to which the template is a member.

Template Class identifies a specific usage for the template. When you switch to a new theme, all templates in one theme are mapped to corresponding templates in another theme. Application Builder accomplishes this template mapping through the assignment of a template class.

Template Subscription

Use Template Subscription to apply an existing template to the current application. When you select an existing template, you become a subscriber to that template.

To load a new copy of a master template, click Refresh Template.

Region Template

##BODY# is the only required substitution string. It identifies where the source of the region should be placed. All other substitution strings are optional. The following are valid substitution strings:

  • #TITLE#

  • #EXPAND#

  • #CHANGE#

  • #BODY#

  • #FORM_OPEN#

  • #FORM_CLOSE#

When you create a button in a region position, the positions you have defined will appear in a select list. Use the following substitution strings to define positions for placement of buttons in a region:

  • #EDIT#

  • #CLOSE#

  • #CREATE#

  • #EXPAND#

  • #HELP#

  • #DELETE#

  • #COPY#

  • #NEXT#

  • #PREVIOUS#

Form Table Attributes

Page items display within regions. Items are rendered as HTML form elements in an HTML table. With this template property, you can define attributes that will be placed in the <table> tag. For example:

class="instructiontext"

Comments

Use this attribute to record developer comments.

Report Templates

Report column templates provide you with control over the results of a row from a SQL query. This type of template defines a cell not an entire row

Each report template identifies column names using the syntax #1#, #2#, #3# and so on. You can also name columns using column name substitution syntax such as #ENAME# or #EMPNO#. You can reference any item from your application within your template. For example, to reference an item called ABC. in your template, you could include the exact substitution string &ABC.. The actual value of ABC. would be provided by an end user editing an item in your application named ABC.

Topics in this section include:

About Generic Column Templates and Named Column Templates

Oracle HTML DB includes two types of report templates:

  • generic column templates

  • named column templates

Generic Column Templates

A generic column template determines the appearance of a report by defining the look of the column once. This look is then repeated as many times as is necessary based on the number of columns specified in the report's definition. This type of templates is limited to reports that have a standard row and column structure. Additional style may be applied to a report using this type of template through use of conditions.

The following example demonstrates how to have each column use a specific style:

<td class="tabledata" align="#ALIGN#">#COLUMN_VALUE#</td>

This example assumes your page template includes a CSS containing the class tabledata. This example also demonstrates the use the substitution strings #ALIGN# and #COLUMN_VALUE#. If you actually ran this report, these substitution strings would be replaced with values generated by the results of a SQL query.

If your query uses an expression in the select list, it is a good idea to create an alias for the columns to avoid runtime errors. For example, suppose your query was as follows:

SELECT ename, (sal + comm) * 12 FROM emp

You could rewrite the query to alias the columns as follows:

SELECT ename, (sal + comm) * 12 yearly_comp FROM emp

Named Column Templates

Named column templates allow for more flexibility in report design. However, because they reference columns by name, they can only be used by reports that are based on those columns. For example:

<tr><td>#ENAME#</td><td>#SAL#</td></tr>

Although named column templates offer a great deal of flexibility, you may need to create a new template for each query. You can also include a position notation. The following example demonstrates how to use following HTML and substitution strings:

<tr><td>#ENAME#</td><td>#SAL#</td></tr>

<tr><td>#1#</td><td>#2#</td></tr>

Report Column Template Attributes for Generic Column Templates

This section describes specific sections of the Report Column Template page for Generic Column Templates.

Report Template Identification

Template Name identifies the name of the template. Use the Translatable check box to indicate the template contains text strings which require translation. Template Type indicates the type of template. Named Column templates reference column names in the template. Generic Column Templates reference #COLUMN_VALUE# in the template.

Theme indicates the theme to which the template is a member. Template Class identifies a specific usage for the template. When you switch to a new theme, all templates in one theme are mapped to corresponding templates in another theme. Application Builder accomplishes this template mapping through the assignment of a template class.

Template Subscription

Use Template Subscription to apply an existing template to the current application. When you select an existing template, you become a subscriber to that template.

To load a new copy of a master template, click Refresh Template.

Before Rows

In Before Rows enter HTML that displays once at the beginning of a report template. Opening an HTML table is a common use of this attribute as shown in the following example:

<table>

You can identify column headers using the syntax #1#, #2#, #3#. For example:

<th>#1#</th><th>#2#</th><th>#3#</th>

You can include pagination above a report by including the substitution string #TOP_PAGINATION#. This substitution string generates HTML which starts with an opening <tr> tag and ends with a closing </tr> tag. For example, to include an open table tag and #TOP_PAGINATION# substitution string you would enter the following:

<table>#TOP_PAGINATION#

You can also include the substitution string #CSV_LINK# to include support for exporting your report to CSV format, a format compatible with most spreadsheet programs.

Column Headings

Use Column Heading Template to colorize each column header cell. Note that the text of this attribute must indicate where the cell heading text will be colorized. For example:

<th #ALIGNMENT#>#COLUMN_HEADER#</th>

If you do not want any column headings, enter the following:

OMIT

If you do use this attribute, HTML DB engine applies the default column heading template.

Before Each Row

In Before Each Row enter text to display before all columns in the report. Use this attribute to open a new HTML row. Before Each Row supports the following substitution strings:

  • #ROWNUM#

    Use this substitution strings to specify the current row

  • #COLCOUNT#

    Use this substitution strings to specify the number of columns

  • #HIGHLIGHT_ROW#

    Use this substitution strings to specify the number of highlighted rows.

Column Templates

Column templates define the look of each column. You can define up to four column templates, each of which can conditional. For example, you can have different background colors for even and odd rows, or highlight rows which meet a PL/SQL defined condition.

In each Column Template, you define the look of each column. Column Templates support the substitution strings described in Table 9-9.

Table 9-9 Column Template Substitution Strings

Substitution String Description
#ALIGNMENT# Determines the column alignment. Specified by the user.
#COLCOUNT# Count of the number of columns.
#COLNUM# Defines the current column number.
#COLUMN_HEADER# Defines the column header.
#COLUMN_VALUE# Replaced with the value of the column.
#ROWNUM# Specifies the current row number.

Consider the following example:

<td #ALIGNMENT#>#COLUMN_VALUE#</td>

If you actually ran this report, these substitution strings would be replaced with values generated by the results of a SQL query.

By creating conditions, you can create a report that displays columns differently depending on whether the specified condition is met. To specify a column template be used conditionally, select a condition type from the Column Template Condition list. Valid values include:

  • Use Based on PL/SQL Expression. Conditionally format columns based on data in that row.

  • Use for Even Numbered Rows. Conditionally format even numbered rows.

  • Use for Odd Numbered Rows. Conditionally format odd numbered row.

If you select Use Based on PL/SQL Expression, the next step is to enter a PL/SQL expression in Column Template Expression field. For example, the following expression displays a value in bold if the value is greater than 2000:

#SAL# > 2000

Note that you could also use the substitution string #ROWNUM#. For example:

#ROWNUM# > 2000

After Each Row

In After Each Row enter HTML that displays after all columns in the report display. This attribute is often used to close an HTML table row. For example:

</tr>

After Rows

Use After Rows to specify text that should display after the last row. A common use of this attribute is to close the HTML table tag. For example:

</table>

The After Rows attribute supports the following substitution strings:

  • #PAGINATION#

    Replaced with a pagination attribute.

  • #COLCOUNT#

    Substituted at runtime with the number of columns defined in the report.

Row Highlighting

Use Background color for checked row to control the background color of a report row when the row selector is checked. Use Background color for current row to control the background color of a report row when the user moves the mouse over the row.

Pagination Subtemplate

The Pagination Subtemplate section contains attributes for editing the Pagination Template, Next Page Template, Previous Page Template, Next Set Template, and Previous Template. Pagination Subtemplates support the substitution strings #PAGINATION_NEXT#, #PAGINATION_NEXT_SET#, #PAGINATION_PREVIOUS# and #PAGINATION_PREVIOUS_SET#. Table 9-12 describes these templates.

Table 9-10 Pagination Subtemplate Attribute

Pagination Subtemplate Attribute Description
Pagination Template Applies to the entire pagination subtemplate. For example:
<span class="instructiontext">#TEXT#</span>

You can use the substitution string #TEXT# to specify where you want the pagination subtemplate to display.

Use the other Pagination Subtemplate attributes to modify individual items.

Next Page Template Enter HTML to modify how the Next Page portion of the pagination subtemplate appears. For example:
<a href="#LINK#">next</a>

Previous Page Template Enter HTML to modify how the Previous Page portion of the pagination subtemplate appears. For example:
<a href="#LINK#">previous</a>

Next Set Template Enter HTML to modify how the Next Set portion of the pagination subtemplate appears. For example:
<a href="#LINK#">next set</a>

Previous Set Template Enter HTML to modify how the Previous Set portion of the pagination subtemplate appears. For example:
<a href="#LINK#">previous set</a>


Comments

Use this attribute to record developer comments.

Report Column Template Attributes for Named Column Templates

This section describes specific sections of the Report Column Template page for Named Column Templates.

Identification

Template Name identifies the name of the template. Use the Translatable check box to indicate the template contains text strings which require translation. Template Type indicates the type of template. Named Column templates reference column names in the template. Generic Column Templates reference #COLUMN_VALUE# in the template.

Theme indicates the theme to which the template is a member. Template Class identifies a specific usage for the template. When you switch to a new theme, all templates in one theme are mapped to corresponding templates in another theme. Application Builder accomplishes this template mapping through the assignment of a template class.

Subscription

Use Subscription to apply an existing template to the current application. When you select an existing template, you become a subscriber to that template.

To load a new copy of a master template, click Refresh Template.

Row Templates

Row templates define the look of each column. You can define up to four row templates, each of which can conditional.

In each Row Template, you define the look of each row. Row Templates support the substitution strings described in Table 9-11.

Table 9-11 Row Template Substitution Strings

Substitution String Description
#ALIGNMENT# Determines the row alignment. Specified by the user.
#COLCOUNT# Count of the number of columns.
#COLNUM# Defines the current column number.
#COLUMN_HEADER# Defines the column header.
#COLUMN_VALUE# Replaced with the value of the column.
#ROWNUM# Specifies the current row number.

By creating conditions, you can create a report that displays rows differently depending on whether the specified condition is met. To specify a row template be used conditionally, select a condition type from the Column Template Condition list. Valid values include:

  • Use Based on PL/SQL Expression. Conditionally format columns based on data in that row.

  • Use for Even Numbered Rows. Conditionally format even numbered rows.

  • Use for Odd Numbered Rows. Conditionally format odd numbered row.

If you select Use Based on PL/SQL Expression, the next step is to enter a PL/SQL expression in Column Template Expression field. For example, the following expression displays a value in bold if the value is greater than 2000:

#SAL# > 2000

Note that you could also use the substitution string #ROWNUM#. For example:

#ROWNUM# > 2000

Column Headings

Use this template to colorize each column header cell. The text of this attribute must include help to indicate where the cell heading text should be colorized. If you do not enter a Column Heading Template, then a default column header template is applied. If you do not want any column headings, then enter OMIT. For example:

<th #ALIGNMENT#>#COLUMN_HEADER#</th>

Before first and after last row text

In Before Rows enter HTML that displays once at the beginning of a report template. Opening an HTML table is a common use of this attribute as shown in the following example:

<table>

You can identify column headers using the syntax #1#, #2#, #3#. For example:

<th>#1#</th><th>#2#</th><th>#3#</th>

You can include pagination above a report by including the substitution string #TOP_PAGINATION#. This substitution string generates HTML which starts with an opening <tr> tag and ends with a closing </tr> tag. For example, to include an open table tag and #TOP_PAGINATION# substitution string you would enter the following:

<table>#TOP_PAGINATION#

You can also include the substitution string #CSV_LINK# to include support for exporting your report to CSV format, a format compatible with most spreadsheet programs.

Use After Rows to specify text that should display after the last row. A common use of this attribute is to close the HTML table tag. For example:

</table>

The After Rows attribute supports the following substitution strings:

  • #PAGINATION#

    Replaced with a pagination attribute.

  • #COLCOUNT#

    Substituted at runtime with the number of columns defined in the report.

Row Highlighting

Use Background color for checked row to control the background color of a report row when the row selector is checked. Use Background color for current row to control the background color of a report row when the user moves the mouse over the row.

Pagination

The Pagination section contains attributes for editing the Pagination Template, Next Page Template, Previous Page Template, Next Set Template, and Previous Template. Pagination Subtemplates support the substitution strings #PAGINATION_NEXT#, #PAGINATION_NEXT_SET#, #PAGINATION_PREVIOUS# and #PAGINATION_PREVIOUS_SET#. Table 9-12 describes these templates.

Table 9-12 Pagination Subtemplate Attribute

Pagination Subtemplate Attribute Description
Pagination Template Applies to the entire pagination subtemplate. For example:
<span class="instructiontext">#TEXT#</span>

You can use the substitution string #TEXT# to specify where you want the pagination subtemplate to display.

Use the other Pagination Subtemplate attributes to modify individual items.

Next Page Template Enter HTML to modify how the Next Page portion of the pagination subtemplate appears. For example:
<a href="#LINK#">next</a>

Previous Page Template Enter HTML to modify how the Previous Page portion of the pagination subtemplate appears. For example:
<a href="#LINK#">previous</a>

Next Set Template Enter HTML to modify how the Next Set portion of the pagination subtemplate appears. For example:
<a href="#LINK#">next set</a>

Previous Set Template Enter HTML to modify how the Previous Set portion of the pagination subtemplate appears. For example:
<a href="#LINK#">previous set</a>


Comments

Use this attribute to record developer comments.

About Using JavaScript in Column Templates

You can conditionally display HTML depending upon values in the database using JavaScript. The following example displays an HTML row only if the GROUP_DESC query column is not null.

<script language="javascript">
IF ( "#GROUP_DESC#" != "" )
document.writeln( "<TR>;
<TD BGCOLOR=#336699>;</TD>
</TR>
</TR>
<TD>#GROUP_DESC#</TD>
                </TR>" );
        </TR>" );


See Also:

  • Online help for more information on using specific sections of the Edit Report Template page

  • "Customizing Regions"

Optimizing a Page for Printing

You can optimize a page for printing by creating a specific Print Mode template and specifying that template in the User Template Defaults section of the Edit Application Attributes page. Generally, a Print Mode template optimizes a page for printing. For example, this template might:

If the theme you select does not include a printer friendly template, you can create a Print Mode template by creating a new page template.

Setting a Print Mode Template for an Application

You enable your Print Mode template by selecting it in Default Templates by Component section of Define Theme page.

To enable Print Mode mode:

  1. Navigate to the Workspace home page.

  2. From the Applications list, select an application.

  3. On the Application Builder home page, click Shared Components.

  4. Under User Interface, select Themes and Templates.

    The Themes page appears.

  5. In the Themes list, click the Edit icon adjacent to the theme name.

  6. Make a new selection from Printer Friendly Page.

  7. Click Apply Changes.

Using f?p Syntax to Toggle to Print Mode

Once you create a Print Mode template and select it as an application attribute, you can use f?p syntax to toggle to Print Mode. Including the ninth f?p syntax argument (PrinterFriendly) renders the page in printer friendly mode (optimize printed output). For example, you could include this argument when coding a link, or creating navigation bar icon.

Using Custom Cascading Style Sheets

A cascading style sheet (CSS) provides a way to control the style of a Web page without changing its structure. When used properly, a CSS separates visual attributes such as color, margins, and fonts from the structure of the HTML document. Oracle HTML DB includes themes that contain templates that reference their own CSS. The style rules defined in each CSS for a particular theme also determine the way reports and regions display.

Topics in this section include:

Uploading Cascading Style Sheets

You upload cascading style sheets to your workspace using the Cascading Style Sheet (CSS) Repository. Uploaded cascading style sheets (CSS) are available to any application created in your workspace. The cascading style sheets are written to the file system, so you can reference them in your HTML source code.

To upload cascading style sheets to your workspace:

  1. Navigate to the Workspace home page.

  2. From the Applications list, select an application name.

  3. On the Application Builder home page, click Shared Components.

    The Shared Components page appears.

  4. Under Files, select Cascading Style Sheets.

    The CSS Repository appears.

  5. To upload a new CSS, click Create and follow the on-screen instructions.

  6. To edit an existing CSS, click the Edit icon in the CSS Repository.

Referencing an Uploaded Cascading Style Sheet in the Page Template

You can reference an uploaded cascading style sheets within the Header section of the page template. You use the Header section to enter the HTML that makes up the <HEAD> section of the HTML document.

To reference an uploaded cascading style sheets:

  1. Navigate to the Workspace home page.

  2. From the Applications list, select an application.

  3. On the Application Builder home page, click Shared Components.

  4. Under User Interface, select Themes and Templates.

    The Themes page appears.

  5. From the Tasks list, select View Templates.

  6. Select the name of the page template you wish to edit.

  7. The Header, use a <link> tag within the head section to reference the appropriate style sheet.

    To reference an uploaded file that is associated with a specific application, you would use the substitution string #APP_IMAGES#. For example:

    <html>
    <head>
        <title>#TITLE#</title>
        #HEAD#
        <link rel="stylesheet" href="#APP_IMAGES#sample2.css" type="text/css">
    </head>
    ...
    

    To reference an uploaded file that is associated with a specific workspace, you would use the substitution string #WORKSPACE_IMAGES#. For example:

    <html>
    <head>
        <title>#TITLE#</title>
        #HEAD#
        <link rel="stylesheet" href="#WORKSPACE_IMAGES#sample3.css" type="text/css">
    </head>
    ...
    

Uploading Images

You can upload images to your workspace using the Image Repository.

To upload images to your workspace:

  1. Navigate to the Workspace home page.

  2. From the Applications list, select an application name.

  3. On the Application Builder home page, click Shared Components.

    The Shared Components page appears.

  4. Under Files, select Images.

    The Image Repository appears.

  5. To upload a new image, click Create.

  6. Follow the on-screen instructions.

Referencing Images

When you install Oracle HTML DB, the installer creates a virtual directory for images. This virtual directory points to the actual path on the file system that contains uploaded images. By default, you reference this virtual directory using the prefix:

/i/

When you create an application, you need to verify this prefix on the Edit Application Attributes page:

To verify the Image Prefix for an application:

  1. Navigate to the Workspace home page.

  2. From the Applications list, select the application name.

  3. On the Application Builder home page, click Edit Attributes.

  4. When the Edit Application Attributes page appears, locate the Image Prefix field.

    By default, this attribute is defined as /i/. Contact your administrator for more information on the name of this virtual directory for your installation.

When you embed an image in static text (for example, in page or region headers or footers) you can reference the image using the substitution string #IMAGE_PREFIX#. For example, to reference the image go.gif you would use the following syntax:

<img src="#IMAGE_PREFIX#go.gif">

Alternatively, you can also reference an image using a fully qualified URL. For example:

<img src="http://g-images.amazon.com/images/G/01/associates/navbar2000/logo-no-border(1).gif">

Uploading Static Files

You can upload static files to your workspace using the Static File Repository.

To upload static files to your workspace:

  1. Navigate to the Workspace home page.

  2. From the Applications list, select an application name.

  3. On the Application Builder home page, click Shared Components.

    The Shared Components page appears.

  4. Under Files, select Static Files.

    The Static Files Repository appears.

  5. To upload a file, click Create.

  6. Follow the on-screen instructions.

Creating a Multiple Column Layout

A region is an area of a page that uses a specific template to format HTML content. You use regions to group page controls. To create a multiple column layout, you create two regions that display in adjacent cells of the same table.

You can create a multiple column layout by either:

Creating Regions in Multiple Columns

You create new regions using the Create Region Wizard. To create a two column page, you create two regions. Oracle HTML DB replaces #BOX_BODY# within a two column table and displays the regions in two separate cells.

To create a two column page by creating regions:

  1. Navigate to the Workspace home page.

  2. From the Applications list, select an application.

  3. From the Pages list, select a page.

    The Page Definition appears.

  4. Create the first region:

    • Under Regions, click Create.

      The Create Region Wizard appears.

    • Select a region type.

    • From the Column field, select 1.

    • Follow the on-screen instructions.

  5. Create the second region:

    • Under Regions, click Create.

      The Create Region Wizard appears.

    • Select a region type.

    • From the Column field, select 2.

    • Follow the on-screen instructions.

Creating a Multiple Column Page Template

Page templates define the appearance of individual pages, including the placement of page controls and components. Each page template is divided into three sections: Header, Body, and Footer. The most basic template must include the substitution string #BOX_BODY# in the Body attribute. When the page is rendered, the HTML DB engine replaces #BOX_BODY# with HTML to display the regions on that page.

You can create a multiple column page by defining a page template that contains a multiple column table. You then explicitly place regions within specific table cells.

The following example demonstrates how to create a two column page and specify a region position using the #REGION_POSITION_XX# substitution string in each column. You would enter this code in the Body section of the page level template.

<body #ONLOAD#>
  #FORM_OPEN#
  <table style="width:100%">
    <tr>
      <td style="width:50%;padding:5px;">#REGION_POSITION_01#</td>
      <td style="width:50%; border-left:2px #bbbbbb dashed; padding:5px;">#REGION_POSITION_02#</td>
    </tr>
  <br />
  #BOX_BODY#
  #FORM_CLOSE#
</body>

Once you create this page level template, the newly defined positions would be available as Display Point options when you run the Create Region Wizard.

Rendering HTML Using Custom PL/SQL

If you need to generate specific HTML content not handled by Oracle HTML DB forms, reports, and charts, you can use the region type PL/SQL. To generate HTML in this type of region, you need to use the PL/SQL Web Toolkit. You can reference session state using bind variable syntax. Keep in mind that when you generate HTML in this way you do not get the same consistency and control provided with templates.

See Also:

To give you more control over HTML dynamically generated within a region, you can use PL/SQL. For example, to print the current date you could create a region with the following source:

htp.p(TO_CHAR(SYSDATE,'Day Month DD, YYYY'));

This next example accesses tables:

DECLARE
   l_max_sal NUMBER;
BEGIN
   SELECT max(sal) INTO l_max_sal FROM emp;
   htp.p('The maximum salary is: '||TO_CHAR(l_max_sal,'999,999.00'));
END;