Switching Themes to Change the User Interface

In this exercise, you switch the current theme to another one for your application. A theme is a collection of templates that defines the application user interface. Each theme contains templates for every type of application component and page control, including individual pages, regions, reports, lists, labels, menus, buttons, and list of values.

Oracle Application Express separates presentation (or user interface themes) from the application logic. You can design your application in one theme, change to another supplied theme, or create and use your own custom theme. By separating the application logic (such as queries, processes, and branches) from the HTML rendering, your application can take advantage of new designs and other technological advances without an application rewrite. Each theme provides a complete set of templates that accommodate every user interface pattern that may be needed in an application.

To switch the theme:

  1. Click Application on the Developer toolbar (at the bottom of the page).

  2. On the Application home page, click Shared Components.

  3. Under User Interface, click Themes.

    Description of bldap_sharcomp.gif follows
    Description of the illustration bldap_sharcomp.gif

  4. On the Themes page, click Create.

    The Create Theme Wizard appears.

  5. For Method, accept the default, From the Repository, and click Next.

  6. For Identify Theme, select Theme 11 and click Next.

  7. For Confirm, click Create.

  8. Click Switch Theme.

  9. For Identify Theme, accept the default, 11. Round Green, and click Next.

  10. For Verify Compatibility, review the information, accept the defaults, and click Next.

    The wizard verifies that corresponding templates exist in the new theme for all templates used in your current application. If a template is missing, it warns you with a message in the Status column. For this tutorial, you can ignore this message because Oracle Application Express maps missing region templates to existing ones.

  11. For Confirm Switch, click Switch Theme.

  12. Run the page.

    Description of bldap_newtheme2.gif follows
    Description of the illustration bldap_newtheme2.gif

    The new color scheme and display layouts are changed in all your pages.