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 (breadcrumb, button, calendar, label, list, page, popup list of values, 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 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:

  • Workspace administrators can create Workspace themes. Workspace themes are available to all developers within the workspace. See "Managing Workspace Themes".

  • Instance administrators can create public themes. Public themes are added using the Application Express Administration Services. Once added, these themes are available to all workspaces and developers. See "Managing Themes for an Oracle Application Express Instance" in Oracle Application Express Administration Guide.

Topics in this section include:

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.

Topics in this section include:

Accessing the Themes Page from Shared Components

To access the Themes page from Shared Components:

  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.

  5. Select Details from the View list and click Go.

    A check mark in the Current column indicates which theme is selected.

  6. Click the theme name.

    The Create/Edit Theme page appears.

Accessing the Themes Page from a Page Definition

To access the Themes page from the Page Definition:

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

  2. Select an application.

  3. Select a page.

    The Page Definition appears.

  4. Under Shared Components, locate the Theme section.

  5. Click a theme name.

    The Create/Edit Theme page appears.

Changing the Default Templates in a Theme

A standard theme contains templates for every type of application component and region type. You can change the selected default templates for a theme on the Create/Edit Theme page.

You can override the default templates in a theme by selecting another template when you create components or regions, or by changing the template on the component or region attributes page.

To review or change the default templates in a theme:

  1. Navigate to 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.

  2. To edit a theme:

    1. From the View list, select Details and click Go.

    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, make a selection from the appropriate list.

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

    Table 10-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.

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

    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.

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

    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.


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

    Table 10-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.

    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 wizard component.


Creating a Theme

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:

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

    2. Select an application.

    3. Click Shared Components.

    4. Under User Interface, select Themes.

  2. Click Create.

  3. Select a creation method:

    • From the Repository

    • From Scratch

    • From Export

  4. Follow the on-screen instructions.

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

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

About the Themes Page

Once you create a theme, it appears on the Themes page. A navigation bar appears at the top of the page and contains the following controls:

  • Theme. Enter a case insensitive query for a theme name and click Go. To view all themes, leave the field blank and click Go.

  • View. Controls how the page displays. Options include:

    • Icons (the default) displays each theme as a large icon. To edit a theme, click the appropriate icon.

    • Details displays each theme as a line in a report. To change the theme name or default templates, click the theme name. In Details view, you can select the following options from the Show list:

      • Summary View displays the theme number, name, and current status.

      • Detailed View displays the theme number, name, current status, and the number of templates in each template type.

  • Display. Determines how themes display. To increase or decrease the number, make a selection from the Display list and click Go.

Editing a Theme

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:

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

    2. Select an application.

    3. Click Shared Components.

    4. Under User Interface, select Themes.

  2. On the Tasks list, click Edit Theme.

    The Create/Edit Theme page appears.

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

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

  4. Make the appropriate edits and click Apply Changes.

Switching the 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.

Note:

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

To apply a theme to an application:

  1. Navigate to 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.

  2. Click Switch Theme.

    The Switch Theme page appears.

  3. From Switch to Theme, select a theme and 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.

  5. Click Next to continue.

  6. Click Switch Theme.

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:

    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.

  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 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. On the Workspace home page, click the Application Builder icon.

    2. Select an application.

    3. Click Shared Components.

    4. Under User Interface, select Themes.

  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.

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 in this section include:

See Also:

"Managing Themes for an Oracle Application Express Instance" in Oracle Application Express Administration Guide

Adding a Theme to the Theme Repository

To add a theme to the Theme repository:

  1. Navigate to 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.

  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.

Deleting a Workspace Theme

To delete a workspace theme:

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

  2. On the Tasks list, click Workspace Themes.

  3. Select the theme to be deleted.

  4. Click Delete.

Modifying a Workspace Theme

You cannot edit a workspace theme directly. To modify a workspace theme, you need to create an application using the theme, modify it, and then manually add it to the workspace theme repository. a theme in the same way you export any related application files.

To modify a workspace theme:

  1. Create an application using the theme you want to modify. "Creating an 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".

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. "Creating an 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 or Page".

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

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. "Creating an 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".

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:

    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.

  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.

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. On the Workspace home page, click the Application Builder icon.

    2. Select an application.

    3. Click Shared Components.

    4. Under User Interface, select Themes.

  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.

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:

    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.

  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.

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:

    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.

  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.

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:

    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.

  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.

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. On the Workspace home page, click the Application Builder icon.

    2. Select an application.

    3. Click Shared Components.

    4. Under User Interface, select Themes.

  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.