Skip Headers
Oracle® Application Express Application Builder User's Guide
Release 4.2 for Oracle Database 12c

E17961-10
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

13.1 Managing Themes

Themes are collections of templates that you can use 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 and then by template class. Template types include breadcrumb, button, calendar, label, list, page, popup list of values, region, and report. The template class identifies the purpose of the each template within a given type. Each template type provides a group of standard classes and eight custom classes. These classifications enable Oracle Application Express to map templates among themes, making it easy to quickly change the entire look and feel of an application.

Oracle Application Express ships with an extensive theme repository. You can add themes to the theme repository as follows:

Topics:

13.1.1 Accessing the Themes Page

You manage themes on the Themes page. You can access the Themes page from the Shared Components page or from the Page Definition.

Tip:

You can change the selected default templates for a theme on the Create/Edit Theme page. See "Editing a Theme".

To access the Themes page:

  1. On the Workspace home page, click the Application Builder icon.

  2. Select an application.

  3. Click Shared Components.

  4. Under User Interface, select Themes.

    The Themes page appears. A check mark in the Is Current column indicates which theme is selected.

  5. Click the theme name.

    The Create/Edit Theme page appears.

13.1.2 Editing a Theme

A standard theme contains templates for every type of application component and region type. When you edit a theme you can change theme name, edit the default templates for components and regions, alter the page transition, change the icon that displays for Date Picker items, and specify if custom images are supported. The sections that follow describe each section Theme Create/Edit page.

To review or edit a theme:

  1. Navigate to the Themes page. See "Accessing the Themes Page".

  2. Click the theme name.

    The Create/Edit Theme page appears

    The Create/Edit Theme page is divided into sections. You can access these sections by scrolling down the page, or by clicking a navigation button at the top of the page. When you select a button at the top of the page, the selected section appears and all other sections are temporarily hidden. To view all sections of the page, click Show All.

    Note the application ID and the Theme Identification Number display at the top of the page.

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

  4. To change a default template for a component, scroll down to Component Defaults. Make a selection from the appropriate list.

    Table 13-1 describes the default templates available under Component Defaults.

    Table 13-1 Component Default Templates

    Attribute Description

    Page

    Identifies the default template for displaying pages. If a developer does not explicitly choose a template, then the Application Express engine uses the template specified here.

    See Also: "Display Attributes" for information about overriding the page template on the Page Attributes page

    Error Page

    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 want to use a template designed to display errors.

    Printer Friendly Page

    Identifies the template to be used when the Application Express engine is in printer friendly mode.

    See Also: "Optimizing a Page for Printing"

    Breadcrumb

    Identifies the default breadcrumb template used when you create a breadcrumb.

    Button

    Identifies the default button template used when you create a button.

    Calendar

    Specifies the default calendar template used when you create a calendar.

    Label

    Identifies the default label template used when you create a label.

    List

    Specifies the default list template used when you create a list.

    Region

    Specifies the default region template used when you create a region.

    Report

    Identifies the default region template used when you create a report.

    Header Toolbar

    Identifies the default template used for the header toolbar.

    Footer Toolbar

    Identifies the default template used for the footer toolbar.


  5. To change a default template for a region, scroll down to Region Defaults. Make a selection from the appropriate list.

    Table 13-2 describes the default templates available under the Regions Defaults.

    Table 13-2 Region Defaults

    Attribute Description

    Breadcrumbs

    Default region template used when you create a breadcrumb.

    Charts

    Default chart template used when you create a chart.

    Forms

    Default form template used when you create a form.

    Lists

    Default region template used when you create a list.

    Interactive Reports

    Default region template used when you create an interactive report.

    Reports

    Default region template used when you create a report.

    Tabular Forms

    Default region template used when you create a tabular form.

    Wizards

    Default region template used when you create a new wizard component.


  6. For Calendar Icon Details:

    1. Icon Name - Specify the name and location of image to be used when items of type Date Picker are displayed, for example:

      /i/new_cal.bmp
      
    2. Icon Name - Identify the image attributes for the Calendar Icon, for example:

      width="16" height="16" alt="Display Calendar"
      
  7. For Custom Image, specify whether to use the default theme image or enable support for a custom theme image. Select Yes or No.

  8. Click Apply Changes.

13.1.3 Creating a Theme

Once you create a theme, it displays on the Themes page. You can create a theme from scratch or select an existing theme from the repository.

To create a theme:

  1. Navigate to the Themes page. See "Accessing the Themes Page".

  2. Click Create.

  3. Select a creation method:

    • From the Repository - View and select a theme from the repository.

    • From Scratch - Create a theme from scratch.

    • From Export - Create a theme to import from the export repository.

  4. Follow the on-screen instructions.

  5. To learn more about a specific field, click the field label.

    When help is available, the cursor changes to an arrow and question mark when you pass the cursor over an item. See "About Field-Level Help".

13.1.3.1 About the Themes Page

Once you create a theme, it appears on the Themes page. You can change the appearance of the page by using the Search bar at the top of the page. Available controls include:

  • Select columns to search - Resembles a magnifying glass. Click this icon to narrow your search. To search all columns, select All Columns.

  • Text area - Enter case insensitive search criteria (wildcard characters are implied) to search by name and then click Go.

  • Go button - Executes a search or applies a filter.

  • View Icons - Displays each theme as a large icon. To edit a theme, click the icon.

  • View Report - Displays each theme as a line in a report. To edit a theme, click the name.

  • Actions menu - Use the Actions menu to customize the report view. See "About the Actions Menu".

13.1.4 Switching an Active Theme

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

When switching an active theme, remember:

  • You can only switch to a theme if the theme exists. For example, before you can switch to a theme available in the repository, you must first create it. See "Creating a Theme".

  • If the wizard locates multiple matches (that is, when several templates share the same template type and templates class), the wizard defaults to a template matching type, class, and name. If no match is found, you must select another template with the same type and class.

  • If no matching template is found (that is, no template with the same type and class exists) then you are prompted to select a template with the same type but with a different class. Then, a warning displays explaining this issue might lead to problems with page functionality, or issues with the page display.When no template of the same template type exists, then the theme cannot be switched. You are blocked from switching themes.

To switch an active theme:

  1. Navigate to the Themes page. See "Accessing the Themes Page".

  2. Click Switch Theme.

    The Switch Theme page appears.

    Tip:

    If you do not have at least two themes installed, click Create Theme. You can create a theme from scratch or simply select an existing theme from the repository. See "Creating a Theme".
  3. For Identify Theme:

    1. Currently Active Theme - Select the current theme for the application.

    2. Switch to Theme - Select the new theme for the application.

    3. Click Next.

  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 from which to choose the appropriate template.

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

      Note:

      Failure to resolve warnings may result in a loss of functionality and applications that do not display well.
  5. Click Next to continue.

  6. Click Switch Theme.

13.1.4.1 Updating an Older Application with a New Theme

Oracle Application Express ships with a variety of themes. Many of these themes have been updated and include a new more modern style.

If you import or upgrade and application from a previous Oracle Application Express release, the appearance of the application does not change. To obtain the newer theme, you must:

  1. Switch to another theme. See "Switching an Active Theme".

  2. Re-create the theme you want to use from the repository. "Creating a Theme".

  3. Switch to that new theme. "Switching an Active Theme"

13.1.5 Copying a Theme

Each theme is identified by a numeric identification number (ID). When you copy a theme, you specify a theme ID. Copying a theme is useful when experimenting with editing a theme or to export a theme with a different ID.

To copy a theme:

  1. Navigate to the Themes page. See "Accessing the Themes Page".

  2. On the Tasks list, click Copy Theme.

  3. On Copy Theme:

    1. Copy From Theme - Select the theme you want to copy.

    2. Copy to this Theme Identification Number - Enter a new ID for the theme.

    3. Click Next.

  4. Click Copy Theme.

13.1.6 Deleting a Theme

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

Tip:

Themes are tied to an application. If you modify a theme, those changes only apply to the application being edited. If you delete a theme, any template modifications are lost. To keep template modifications, you must export the theme. See "Exporting Themes".

To delete a theme:

  1. Navigate to the Themes page. See "Accessing the Themes Page".

  2. On the Tasks list, click Delete Theme.

  3. From Remove Theme, select the theme you want to delete and click Next.

  4. Click Delete Theme.

13.1.7 Managing Workspace Themes

Workspace administrators manage the theme repository for a workspace. Workspace administrators can add a theme to the repository, making it available to all developers within a workspace, or delete it.

Topics:

See Also:

"Managing Public Themes" in Oracle Application Express Administration Guide

13.1.7.1 Adding a Theme to the Theme Repository

To add a theme to the Theme repository:

  1. Navigate to the Themes page. See "Accessing the Themes Page".

  2. From the Tasks List, click Manage Workspace Themes.

  3. Select Create and click Next.

  4. For Application Theme to Copy, select the desired theme and click Next.

  5. For Identify Name, enter a theme number, name, and optional description and then click Next.

  6. Click Create Workspace Theme.

13.1.7.2 Viewing an Existing Workspace Theme

To view an existing workspace theme:

  1. Navigate to the Themes page. See "Accessing the Themes Page".

  2. From the Tasks List, click Manage Workspace Themes.

  3. Click View Existing and click Next.

    The Workspace Themes page appears.

    Tip:

    You cannot edit a workspace theme directly. To modify a workspace theme, you must create an application using the theme, modify it, and then manually add it to the workspace theme repository. See "Modifying a Workspace Theme".

13.1.7.3 Deleting a Workspace Theme

To delete a workspace theme:

  1. Navigate to the Themes page. See "Accessing the Themes Page".

  2. From the Tasks List, click Manage Workspace Themes.

  3. Click Delete and click Next.

  4. Select the workspace theme to be deleted and click Delete Theme.

13.1.7.4 Modifying a Workspace Theme

You cannot edit a workspace theme directly. To modify a workspace theme, you must create an application using the theme, modify it, and then manually add it to the workspace theme repository.

To modify a workspace theme:

  1. Create an application using the theme you want to modify. "About Creating a Database Application".

  2. Modify the theme. See "Editing a Theme".

  3. Delete the existing workspace theme. See "Deleting a Workspace Theme".

  4. Add the modified theme to the workspace theme repository. See "Adding a Theme to the Theme Repository".

13.1.7.5 About Exporting a Workspace Theme

You export a theme in the same way you export any related application files. Exporting a workspace theme involves the following steps:

  1. Create an application using the theme. "About Creating a Database Application".

  2. Export the application. See "Exporting an Application".

  3. Import the exported file into the target Oracle Application Express instance. See "Importing an Application, Page or Component Export".

  4. Install the exported file from the Export Repository. See "Installing Export Files".

13.1.8 About Exporting and Importing Themes

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

  1. Create an application using the theme. "About Creating a Database Application".

  2. Export the theme using the Export Theme utility. See "Exporting Themes".

  3. Import the exported file into the target Oracle Application Express instance. See "Importing Export Files".

  4. Install the exported file from the Export Repository. See "Installing Export Files".

13.1.9 Changing a Theme Identification Number

Each theme has an identification number (ID). You can use the Change Theme ID utility to change a theme ID to another identification number. Changing a theme ID is useful when you want 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. See "Accessing the Themes Page".

  2. On the Tasks list, click Change Identification Number.

  3. For Theme Number:

    1. Identify Theme - Select a theme.

    2. Change to this Theme Identification Number - Specify an identification number.

    3. Click Next.

  4. Confirm your changes and click Change Theme ID.

13.1.10 Viewing Theme Reports

Application Builder includes several reports designed to help you manage themes and templates.

Topics:

13.1.10.1 Viewing All Templates in a Theme

To view all templates that comprise a theme:

  1. Navigate to the Themes page. See "Accessing the Themes Page".

  2. Click Reports.

  3. On the Theme Reports page:

    1. From Report, select Application Templates.

    2. From Theme, select a theme.

    3. Click Go.

    A list of templates appears with the template type, template name, the associated theme, and template class.

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

13.1.10.2 Viewing Theme Template Counts

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. See "Accessing the Themes Page".

  2. Click Reports.

  3. On the Theme Reports page:

    1. From Report, select Theme Template Counts.

    2. From Theme, select a theme.

    3. Click Go.

  4. If you are using custom classifications, select Show Custom and click Go.

13.1.10.3 Viewing File References

The File References report displays a list 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. See "Accessing the Themes Page".

  2. On the Themes page, click Reports.

  3. On the Theme Reports page:

    1. From Report, select File References.

    2. From Theme, select a theme.

    3. Click Go.

  4. 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 for which to search.

    4. Click Go.

  5. To download a comma-delimited file (.csv) version of this report, click Download at the bottom of the page.

13.1.10.4 Viewing Class References

Accessing the Class References report displays a list 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. See "Accessing the Themes Page".

  2. Click 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 at the bottom of the page.

13.1.10.5 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. See "Accessing the Themes Page".

  2. Click 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 component name.