Working with Themes and Templates

Most experienced programmers understand the advantages of separating the look and feel of an application from the application’s logic. Oracle uses HTML DB to accomplish this. This article introduces you to the themes and templates that HTML DB provides. It is excerpted from chapter 6 of the Oracle HTML DB Handbook, written by Lawrence Linnemeyer and Bradley Brown (McGraw-Hill, 2006; ISBN: 0072257687).

HTML DB utilizes various templates to implement the look and feel of an application. A theme is a collection of these templates. This arrangement allows for a single implementation point of an application’s look and feel and the segregation of visual elements from the application logic and database access. Development tasks can be divided up by skill sets; one developer can work on the look and feel of the user interface while another simultaneously works on the business logic and flow of the application. A centralized implementation of the visual elements also allows changes to the entire application to be made in a single location.

Templates are made up of HTML and substitution variables that allow the page to be dynamically generated at run time. An application is associated with a theme, which has a default set of templates that will be utilized throughout the application unless a different template is selected during development. Here are the different types of templates available:

  • Button templates
  • Calendar templates
  • Label templates
  • List templates
  • Menu templates
  • Page templates
  • Popup LOV templates
  • Region templates
  • Report templates

In this chapter, we will examine the use of themes, the different types of templates available, and the use of substitution strings in template definitions. Also, we will dig into great detail on page templates.

Themes

The look and feel of an application is controlled by the theme that is associated with the application. Themes are managed on the Themes page, which is accessible from the Themes link in the User Interface section of the Shared Components drop-down menu, as shown here.

The drop-down menu is activated by clicking the down arrow on the right side of the Shared Components navigation icon. If you click on the icon, it will navigate you to the Shared Components page, where you can click on the Themes link in the User Interface section.

From this page, you can create a new theme, edit existing themes, delete a theme, or switch the current theme for the application. The current theme for an application is indicated by a check mark in the Current column on the Themes page, as shown in Figure 6-1. You can easily switch the current theme for an application. Starting in version 1.6, you are allowed to copy templates from other applications within your workspace; previously, this had not been possible. From this page, you can also access the individual templates that belong to a theme by clicking on the magnifying glass icon in the View column for the theme. Note that the Themes page has two different displays: a summary display and a detail display. You switch between displays by selecting from the display LOV and clicking on the Go button. You can also display themes by icons, although this view is the least informative.


Figure 6-1.  Themes page

{mospagebreak title=Switching an Application’s Theme}

Clicking the Switch Theme button on the Themes page shown in Figure 6-1 takes you into a wizard that walks you through the steps necessary to change an application’s current theme. The Switch Theme button is not available if there is only one theme; you must create another before this button will appear.

The first page of the Switch Theme Wizard allows you to select a new theme. The second page verifies the compatibility of the selected theme with the application’s existing pages and objects. The last page asks for confirmation of the switch.

When switching templates, HTML DB accomplishes mappings from one theme to another through template class identifiers. Each template is assigned to a template class in the first section of the template edit page. For instance, a specific button template might be associate with the “Button” or “Button – Alternate 1” class identifier, among others. By checking the compatibility of themes, HTML DB ensures the new theme contains a template of the same class for every class of template being used. For example, if the application has a button that uses a button template with a “Button – Alternate 1” class identifier, HTML DB ensures that the new theme contains a Button template also associated with the “Button – Alternate 1” class.

If the new theme has two or more templates of the same class, you will see “Warning” in the Status column and a pick list in the To Template column on the Verify Theme Compatibility pages, as shown in Figure 6-2. The pick list allows you to select which template you want to map to in the new theme. Note that the columns are actually mislabeled; they are in fact To and From Template, not To and From Template Class. The To and From templates are matched by their corresponding template classes.

If one of the mappings fails, you will see “Error” in the Status column and you will not be allowed to proceed to the next page of the wizard. An error occurs if either a From template is not associated with a template class or a To theme does not have a template of the same class.

To resolve these errors, note the template name, listed under the From Template column, for each one that has an “Error” status. Cancel out of the switch process. This returns you back to the main Themes page. Click on the small Theme Reports tab, just below the breadcrumb menu, and view the Application Templates report for the existing theme. The report lists each template in the theme by theme type along with its name and associated template class. Observe the template classes for the template name noted earlier. If there is no template class listed, that is part of the


Figure 6-2.  Theme compatibility

problem. You must edit your existing template and assign a template class to each template and then try the switch again. If a template class is listed for the template, you must have a template with a corresponding template class in your To theme. In the theme you wish to switch to, create a new (or edit an existing) template of the proper type and associate it with the same template class.

NOTE

When an application is converted from version 1.5 to 1.6 or 2.0, an initial theme will be created from the application’s templates. The templates will not be assigned a template class. If you want to switch templates, you will have to edit each template and assign it a template class.

Creating New Themes

Like the theme-switching process, the process to create a new theme is also accomplished through a wizard. Start the wizard by clicking on the Create Theme button on the Themes page, as shown earlier in Figure 6-1. The first screen of the wizard presents the three options for creating themes: From the HTML DB Repository, From Scratch, and From Export.

HTML DB comes with a repository of a dozen different themes. If you decide to create a theme based on one from the repository, you will be taken to a screen to select from one of the canned themes. After you have created the new theme, you can alter it in any way you would like. If you select the option to create a theme from an export, the wizard will take you through the process of importing an export file from another application. Exporting and importing of applications and their components is covered in Chapter 7. This is the method you would use to copy a theme from one application to another.

If you select to create a theme from scratch, you will be taken to a screen to name your new theme and then an empty theme will be created. This is the method you use if you want to create all your own templates or copy templates from other different themes. When you create new templates, you can copy them from templates in themes in other applications within your workspace. Before version 1.6, it was not possible to copy templates between applications. When you copy a template, you can subscribe to the original template. If changes are made to the original template, you can update the subscribed template. However, if you do update the subscribed template, any modifications you made will be lost. For more information, refer to the upcoming section, “Creating and Copying Templates.”

NOTE

Versions 1.6 and above allow you to share templates between applications in the same workspace.

Specifying a Theme’s Default Template

Within a theme you can specify a default template for each type of template. When an application uses a theme and a specific template is not specified for an object, that object will use the theme’s corresponding default template. Clicking the name of a theme listed on the Themes page, as shown earlier in Figure 6-1, will navigate you to the Create/Edit Theme page, shown in Figure 6-3. Here, you can select a default template for each type of template. For page- and region-type templates, you may specify several defaults based on the type of page or type of region. Notice there is no place to set a default template for Popup LOVs; this is because only one Popup LOV template is allowed per theme.


Figure 6-3.  Create/Edit Theme page

{mospagebreak title=Templates}

HTML DB uses templates to control the look and feel of an application. Templates are made up of HTML code and substitution variables. At run time, the HTML DB engine uses information from your object definitions to dynamically fill in information for the substitution variables and create the final HTML pages. The large number of template types available allows you to precisely control the way your application looks while centralizing the administration of the look and feel.

Template Types

HTML DB has nine different types of templates, as listed in the introduction of this chapter. The templates apply to all different types of objects. Objects that use templates go from more general type objects, like pages and regions, to more specific type objects, like lists and buttons.

Page Templates

Page templates control the look and feel of common items on a page, such as headers, footers, parent tabs, standard tabs, and navigation bars. As shown in Figure 6-3, a typical application needs three different page templates: Page, Error Page, and Printer Friendly Page. Although it is possible to use only one page template for an entire application, a more professional look and feel can be accomplished with a variety of templates.

Region Templates

Region templates control the look and feel of regions within a page. They control items such as region borders, titles, and the placement of buttons.

Report Templates

Report templates format the results of a database query. They control the look of headers and rows. Conditional row formatting can be used to dynamically change the look of a row based on the row’s content and whether it is an odd or even row.

List Templates

List templates control the look and feel of a shared group of links. You can control before and after list formatting as well as current and noncurrent link formatting.

Label Templates

Label templates control the look and feel of item labels. Typically label templates are used to distinguish between required and nonrequired fields.

Calendar Templates

Calendar templates control the look and feel as well as the placement of a calendar. They are typically made from an HTML table to control the placement of dates.

Menu Templates

Menu templates control the look and feel of menus. Menu templates are selected for creating a menu-type region.

Button Templates

Button templates are used to control the appearance of buttons. Buttons can be created using multiple images or with HTML. The use of templates is optional for buttons.

Popup LOV Templates

Popup LOV templates are used to control the look and feel of items of type POPUP. Only one Popup LOV template can be specified for an application; therefore, it is the only template type for which a developer does not specify a default.

Managing Templates

Templates are managed from the Templates page. To get to the Templates page, click on the magnifying glass icon in the View column on the Themes page. The Templates page allows you to see all templates for all themes within your application. The selection boxes at the top of the page, as shown in Figure 6-4, allow you to limit the templates displayed by selecting a theme, a template type, and whether the template is referenced in your application. This page tells you a lot about your templates, such as which ones are the defaults, how many references there are to a template, and whether the template is subscribed to a master template. From this page, you can also create a new template, edit any existing template, and even do a mass replacement of templates from another application.

{mospagebreak title=Editing an Existing Template}

To edit any existing template, simply click on the template name from the Templates page. This will take you to a type-specific template edit page. In order to edit templates, you need at least a good working knowledge of HTML. See the following sections for specifics on Page and Report templates. Due to space limitation, we are not able go into complete detail on all nine different types of templates. However, you will come to find that they are very similar when it comes to editing them. With a good working knowledge of HTML, an understanding of the substitution variables, and some hands-on experimentation, you should be able to fully understand each type of template. 


Figure 6-4.  Templates page

Creating and Copying Templates

Like themes, templates can either be created from scratch or copied from another location. With templates, you don’t copy from the HTML DB repository, but rather from other templates in other themes, including themes from other applications. Like with themes, template creation is accomplished through a multiscreen wizard. The first screen allows you to select the type of template you are going to create. On the next screen you choose to create the template either from scratch or as a copy of an existing template.

If you choose to create the template from scratch, you will be asked to name the template, select the theme it will belong to, and specify the template class. Upon confirmation, a nearly blank template will be created; it will include some very basic HTML along with the minimal substitution variables.

If you go the route of creating a template as a copy of an existing template, you select the application to copy from and then select the theme to copy from and the theme to copy to. At this point, the wizard will present to you a list of templates from the selected theme that are of the type you chose to copy, as shown in Figure 6-5. For each of the templates listed, you can choose to copy and subscribe, just copy, or not copy. If you subscribe to a template and changes are later made to the master template, you can update the subscribed template by entering the edit template page and clicking on the Refresh Template button found in the Template Subscription section of the edit template page. Be aware that any changes you make to the subscribing template will be lost when you refresh the template.


Figure 6-5.  Creating templates by copying


Figure 6-6.  Replacing templates

There is one other powerful feature available for copying templates. If you have copied templates from another application but did not subscribe when you copied, you can still refresh the template from the original. Actually, you can replace any utilized template in your current application with another template in another application. In the Tasks box on the right side of the Templates page is an option titled “Replace templates in this application with templates from another application.” If you follow this link, you will be asked to select the source application from which you would like to replace templates. You will then be presented with a list of the templates for your current application that are currently being utilized. For each of these templates, you can choose a replacement and select whether to replace or to replace and subscribe, as shown in Figure 6-6.

Please check back next week for the continuation of this article.

[gp-comments width="770" linklove="off" ]

chat