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:
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.
Topics:
You manage themes on the Themes page. You can access the Themes page from the Shared Components page or from the Page Definition.
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:
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. A check mark in the Is Current column indicates which theme is selected.
Click the theme name.
The Create/Edit Theme page appears.
Responsive design enables you to design web pages so that the layout fits the available space regardless of the device on which page displays (for example, a desktop computer, laptop computer, tablet, or smartphone). By implementing a responsive design, on larger screens the user gets the full experience, but on smartphones and tablets, the layout adjusts to the size of the specific device. During this resizing process, elements shift position, re-size, or become hidden. The objective of responsive design is to make all essential content available on any device, but to display it in a user-friendly format.
In Oracle Application Express, Theme 25 is responsive user interface theme. This theme provides the building blocks and templates to support a responsive layout. Keep in mind, that responsive design is not just a matter of picking one set of templates. As the application developer, you are responsible for using the templates in Theme 25 and design a page to facilitate a truly responsive design. Converting an existing application to Theme 25 requires you review all the application pages to ensure you have defined the appropriate template and layout.
On the surface, creating a responsive design and having only a single page to maintain sounds more appealing than maintaining two separate pages. In practice, however, the up front cost of designing a truly responsive page are much higher and requires a much higher level of understanding of grid layout, HTML and CSS.
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:
Navigate to the Themes page. See "Accessing the Themes Page".
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 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. |
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 new wizard component. |
For Calendar Icon Details:
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
Icon Name - Identify the image attributes for the Calendar Icon, for example:
width="16" height="16" alt="Display Calendar"
For Custom Image, specify whether to use the default theme image or enable support for a custom theme image. Select Yes or No.
Click Apply Changes.
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:
Navigate to the Themes page. See "Accessing the Themes Page".
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 cursor changes to an arrow and question mark when you pass the cursor over an item. 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:
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".
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:
Navigate to the Themes page. See "Accessing the Themes Page".
Click Switch Theme.
The Switch Theme page appears.
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".
For Identify Theme:
Currently Active Theme - Select the current theme for the application.
Switch to Theme - Select the new theme for the application.
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 does not change. To obtain the newer theme, you must:
Switch to another theme. See "Switching an Active Theme".
Re-create the theme you want to use from the repository. "Creating a Theme".
Switch to that new theme. "Switching an 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. See "Accessing the Themes Page".
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.
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:
Navigate to the Themes page. See "Accessing the Themes Page".
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:
"Managing Public Themes" in Oracle Application Express Administration Guide
To add a theme to the Theme repository:
Navigate to the Themes page. See "Accessing the Themes Page".
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 view an existing workspace theme:
Navigate to the Themes page. See "Accessing the Themes Page".
From the Tasks List, click Manage Workspace Themes.
Click View Existing and click Next.
The Workspace Themes page appears.
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".
To delete a workspace theme:
Navigate to the Themes page. See "Accessing the Themes Page".
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 must 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 "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. "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. See "Accessing the Themes Page".
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.
Topics:
To view all templates that comprise a theme:
Navigate to the Themes page. See "Accessing the Themes Page".
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. See "Accessing the Themes Page".
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. See "Accessing the Themes Page".
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. See "Accessing the Themes Page".
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. See "Accessing the Themes Page".
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.