12.1.2 Understanding the Universal Theme

Universal Theme - 42 (Universal Theme) features a responsive design and enables developers to create web applications without extensive knowledge of HTML, CSS, or JavaScript.

12.1.2.1 About the Universal Theme

The Universal Theme features a responsive design, versatile UI components, and can be easily customized.

Applications you create with the Create Application Wizard use the Universal Theme. Advantages of the Universal Theme include:

  • Responsive Design - Designed to work just as well on small screen devices (such as smartphones and tablets) as it does on larger screen devices (including laptops and desktops). The UI components in Universal Theme work across varying screen resolutions while maintaining the same or similar functionality. In addition, Universal Theme takes full advantage of ultra high screen resolutions by utilizing vector graphics where possible, and relying upon CSS3 features for UI styling.

  • Versatile User Interface - Provides all the components and building blocks necessary to build practically any type of business application user interface.

    Tip:

    To browse all of the components provided with Universal Theme go to the Components page in the Universal Theme application.

  • Easy Customization - Effortlessly customize and fully control the look and feel of your applications without becoming an expert in UI design, HTML, CSS, or JavaScript. Using Theme Roller and Template Options, you can easily customize your application to fit your company's brand and customize the look and feel of various components using Template Options. 

  • Support for Theme Styles - The Universal Theme includes support for theme styles. A theme style is a CSS style sheet that is added to the base CSS. Developers can change the appearance of an application by altering the theme style using the Theme Roller utility.

About Responsive Design

The Universal Theme is an example of a responsive user interface theme.

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, the user gets the same full experience as they would on larger screens. On smart phones and tablets, the layout can adjusts to the size of the specific device. During this resizing process, elements shift position, re-size, or become hidden. The goal of responsive design is to present all essential content in a user friendly way for all possible screen sizes. Keep in mind, that responsive design is not just a matter of picking the correct set of templates. As the application developer, you are responsible for using the templates and the available components to design a page that is truly responsive.

See Also:

12.1.2.2 About Updating or Migrating to the Universal Theme

Update or migrate existing apps to the newest Universal Theme to take advantage of new features and updates.

Compared to themes in previous releases of Oracle Application Express, the Universal Template features cleaner templates, improved grid support, and responsive behavior.

Universal Theme migration paths include:

  • Update Existing Apps to the Latest Universal Theme - If your app already uses the Universal Theme, you can easily update it to take advantages of new features and enhancements.

    See "Updating to the Latest Universal Theme."

  • Migrate Existing Mobile Apps to the Universal Theme - jQuery Mobile and the jQuery Mobile User Interface used in previous releases have been desupported. If you have an existing mobile application that uses the jQuery Mobile User Interface, you must migrate your existing application to the Universal Theme.

    See the Migrating from jQuery Mobile page.

  • Migrate from Other Themes - You can migrate other themes by running Switch Theme Wizard.

    See the "Migrating from Other Themes" section on the Migration Guides page.

12.1.2.3 Updating to the Latest Universal Theme

Update an existing application to use the latest Universal Theme to take advantage of new features and enhancements.

Tip:

Before starting this procedure, Oracle recommends backing up your application by either exporting it or creating a copy.

To update your application to use the latest Universal Theme

  1. Navigate to the Themes page:
    1. On the Workspace home page, click the App Builder icon.
    2. Select an application.
    3. Click Shared Components.
    4. Under User Interface, select Themes.
    The Themes page appears.
  2. Find the Universal Theme - 42. Verify that the Subscribed From column is Theme Repository.
  3. Click Universal Theme - 42.
  4. Under the Theme Subscription region, click Verify.
  5. In the Verify Theme Subscription Dialog, click Verify.
    The verify Theme Subscription dialog appears
  6. Click Refresh Theme.
  7. Click OK.