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:
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.
Topics in this section include:
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.
Select Details from the View list and click Go.
A check mark in the 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:
From the View list, select Details and click Go.
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, 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.
| 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. |
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
From Scratch
From Export
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. 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.
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.
On the Tasks list, click Edit Theme.
The Create/Edit Theme page appears.
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".
Make the appropriate edits and click Apply Changes.
See Also:
"Customizing Templates"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:
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.
From Switch to Theme, select a 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.
See Also:
"Creating 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:
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 ID.
You can only delete inactive themes. When you delete a theme, Application Builder only removes inactive templates.
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.
Topics in this section include:
See Also:
"Managing Themes for an Oracle Application Express Instance" 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:
On the Workspace home page, click the Application Builder icon.
On the Tasks list, click Workspace Themes.
Select the theme to be deleted.
Click Delete.
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:
Create an application using the theme you want to modify. "Creating an Application".
Modify the theme. See "Editing 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. "Creating an Application".
Export the application. See "Exporting an Application".
Import the exported file into the target Oracle Application Express instance. See "Importing an Application or Page".
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. "Creating an 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 a number of reports designed to help you manage themes and templates.
Topics in this section include:
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"