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 Application Express Administration Services. Once added, these themes are available to all workspaces and developers. See "Managing Public Themes" in Oracle Application Express Administration Guide.
See Also:
"Customizing Templates"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 "Changing the Default Templates in a Theme".To access the Themes page from Shared Components:
On the Workspace home page, click the Application Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.
The Themes page appears.
Click the View Report icon.
A report appears. A check mark in the Is Current column indicates which theme is selected.
Click the theme name.
The Create/Edit Theme page appears.
To access the Themes page from the Page Definition:
On the Workspace home page, click the Application Builder icon.
Select an application.
Select a page.
The Page Definition appears.
Under Shared Components, locate the Theme section.
Click a theme name.
The Create/Edit Theme page appears.
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:
Navigate to the Themes page:
On the Workspace home page, click the Application Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.
The Themes page appears.
To edit a theme:
Click the View Report icon.
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.
To change the theme name, enter a name in the Name field.
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. |
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.
| 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 wizard component. |
Under Calendar Icon Details, specify an Icon Name and Icon Attributes to be used when displaying Date Picker items.
Click Apply Changes.
You can create a theme from scratch or select an existing theme from the repository.
To create a theme:
Navigate to the Themes page:
On the Workspace home page, click Application Builder.
Select an application.
Click Shared Components.
Under User Interface, select Themes.
Click Create.
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.
Follow the on-screen instructions.
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".
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:
Search icon - Resembles a magnifying glass. Click this icon to narrow your search to only specific columns. To search all columns, select All Columns.
Text area - Enter case insensitive search criteria (wildcard characters are implied) and then click Go.
Go button - Executes a search or applies a filter.
View icons. Use this control to toggle between icon and report views. To change the view, click these icons:
View Icons (default) displays each theme as a large icon.
View Report displays each theme as a line in a report.
Actions menu - Displays the Actions menu. Use this menu to customize report view. See "About the Actions Menu".
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.
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".
Tip:
Note that if multiple templates for the same class exist, a warning may display when you switch themes. To remove this warning, you must correct the template.To apply a theme to an application:
Navigate to the Themes page:
On the Workspace home page, click the Application Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.
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".From Switch to Theme, select the new theme and click Next.
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.
Click Next to continue.
Click Switch 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 will not change. To obtain the newer theme, you must:
Switch to another theme. See "Switching the Active Theme".
Re-create the theme you want to use from the repository. "Creating a Theme".
Switch to that new theme. "Switching the Active 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:
Navigate to the Themes page:
On the Workspace home page, click the Application Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.
On the Tasks list, click Copy Theme.
On Copy Theme:
Copy From Theme - Select the theme you want to copy.
Copy to this Theme Identification Number - Enter a new ID for the theme.
Click Next.
Click Copy 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 will be lost. To keep template modifications, you must export the theme. See "Exporting Themes".To delete a theme:
Navigate to the Themes page:
On the Workspace home page, click the Application Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.
On the Tasks list, click Delete Theme.
From Remove Theme, select the theme you want to delete and click Next.
Click Delete Theme.
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.
See Also:
"Managing Public Themes" in Oracle Application Express Administration GuideTo add a theme to the Theme repository:
Navigate to the Themes page:
On the Workspace home page, click the Application Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.
From the Tasks List, click Manage Workspace Themes.
Select Create and click Next.
For Application Theme to Copy, select the desired theme and click Next.
for Identify Name, enter a theme number, name, and optional description and then click Next.
Click Create Workspace Theme.
To delete a workspace theme:
Navigate to the Themes page:
On the Workspace home page, click the Application Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.
From the Tasks List, click Manage Workspace Themes.
Click Delete and click Next.
Select the workspace theme to be deleted and click Delete 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.
To modify a workspace theme:
Create an application using the theme you want to modify. "About Creating a Database Application".
Modify the theme. See "Changing the Default Templates in a Theme".
Delete the existing workspace theme. See "Deleting a Workspace Theme".
Add the modified theme to the workspace theme repository. See "Adding a Theme to the Theme Repository".
You export a theme in the same way you export any related application files. Exporting a workspace theme involves the following steps:
Create an application using the theme. "About Creating a Database Application".
Export the application. See "Exporting an Application".
Import the exported file into the target Oracle Application Express instance. See "Importing an Application, Page or Component Export".
Install the exported file from the Export Repository. See "Installing Export Files".
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:
Create an application using the theme. "About Creating a Database Application".
Export the theme using the Export Theme utility. See "Exporting Themes".
Import the exported file into the target Oracle Application Express instance. See "Importing Export Files".
Install the exported file from the Export Repository. See "Installing Export Files".
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:
Navigate to the Themes page:
On the Workspace home page, click the Application Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.
On the Tasks list, click Change Identification Number.
For Theme Number:
Identify Theme - Select a theme.
Change to this Theme Identification Number - Specify an identification number.
Click Next.
Confirm your changes and click Change Theme ID.
Application Builder includes several reports designed to help you manage themes and templates.
To view all templates that comprise a theme:
Navigate to the Themes page:
On the Workspace home page, click the Application Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.
Click Reports.
On the Theme Reports page:
From Report, select Application Templates.
From Theme, select a theme.
Click Go.
A list of templates appears with the template type, template name, the associated theme, and template class.
To edit a template, select the template name.
The Theme Template Count report lists which template classes currently have templates created for them.
To view the Theme Template Count report:
Navigate to the Themes page:
On the Workspace home page, click the Application Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.
Click Reports.
On the Theme Reports page:
From Report, select Theme Template Counts.
From Theme, select a theme.
Click Go.
If you are using custom classifications, select Show Custom and click Go.
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:
Navigate to the Themes page:
On the Workspace home page, click the Application Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.
On the Themes page, click Reports.
On the Theme Reports page:
From Report, select File References.
From Theme, select a theme.
Click Go.
On the File References page:
From Show, select the type of component to include in the report. If you do not make a selection, no results are returned.
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).
From File Extensions, select the type of extensions for which to search.
Click Go.
To download a comma-delimited file (.csv) version of this report, click Download at the bottom of the page.
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:
Navigate to the Themes page:
On the Workspace home page, click the Application Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.
Click Reports.
On the Theme Reports page:
From Report, select Class References.
From Theme, select a theme.
Click Go.
On the Class References page:
From Show, select the components to check for a class reference. If you do not make a selection, no results are returned.
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.
Click Go.
To download a comma-delimited file (.csv) version of this report, click Download at the bottom of the page.
Use the Template Substitution Strings report to view all supported substitution strings by component.
To view the Substitution String report:
Navigate to the Themes page:
On the Workspace home page, click the Application Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.
Click Reports.
On the Theme Reports page:
From the Report list, select Template Substitution Strings.
From the Theme list, select which themes to include in the report.
Click Go.
To link to a template definition, select the component name.
See Also:
"Understanding Substitution Strings"