Modifying the Universal Theme by using Theme Roller in Application Express 5.1

Purpose

This tutorial describes how to customize the style of your application using the Developer tool and Theme Roller in Oracle Application Express 5.1.

Time to Complete

Approximately 30 minutes.

Background

Oracle Application Express is a rapid web application development tool for the Oracle Database. Using only a web browser and limited programming experience, you can develop and deploy professional applications that are both fast and secure. Oracle Application Express is available with the Oracle Database, whether it's on-premises or in the Oracle Cloud.

In this tutorial, you use Oracle Application Express Release 5.1 to customize the style of your application using Theme Roller. Theme Roller is a live CSS editor that enables developers to quickly change the colors, rounded corners, and other attributes of their applications without touching a line of code.

What Do You Need?

Before starting this tutorial, you should:

• Have access to an Oracle Database 11g or later release, either on-premises or in a Database Cloud Service.
• Install Oracle Application Express Release 5.1 into your Oracle Database (for on-premises only). If you are using Oracle Database Cloud Service, the application is already installed for you.
• Provision at least one Oracle Application Express user. See Creating New User Accounts in Oracle Application Express Administration Guide.
• Download and unzip the files.zip into your working directory.

Before editing the style of an application, you need to create or import an application. In this tutorial, you import a packaged Database application that is already available in Oracle Application Express. Perform the following steps:

1. In the Application Express login page, enter the following login credentials and click Sign In:

   • Workspace: obe

   • Username: obe

   • Password: oracle

   

2. From the Oracle Application Express home page, click the down arrow next to the Packaged Apps tab, and select Sample Apps.

   

3. From the list of sample applications, select Sample Database Application.

   

4. Click Install Packaged App to initiate the process of installing the sample application.

   

5. In the Install Packaged App window, accept the defaults and click Next>.

   

6. Click Install Packaged App. The application gets installed in your workspace.

   

7. Click the Run icon to run the application.

   

8. Enter the Log In details and click Sign In.

   

9. The Sample Database Application is displayed with a default blue theme style named Vita.

   

In this section, you add a header and a footer to the packaged application.

Adding a Header

Perform the following steps to add an Oracle logo to the packages application:

Note: You can download and add any logo of your choice to the application by performing the same set of steps.

1. In the Sample Database Application, click Application <n> in the runtime toolbar at the bottom of the screen.

   

2. Click Shared Components.

   

3. In the Files section, select Static Application Files.

   

4. Select Upload File >.

   

5. Choose the logo to upload. In this case, select Oracle-Logo.png from the files folder that you downloaded at the start of the OBE. Select No for Unzip File, and click Upload.

   

6. The logo is successfully uploaded as a static application file and is only available to this application. Also, a reference value to the logo is created for you to use in your application. Copy the reference value into any text editor. You will be using it in Step 9.

   

7. Navigate back to the Shared Components page.

   

8. In the Shared Components page, under User Interface, select User Interface Attributes.

   

9. In the User Interface page, select Logo in the header menu and perform the following steps:

   •  Select Image as the logo type.
   • Enter the reference value #APP_IMAGES#Oracle-logo.png in the Logo text field.
   • Click the pop-up icon next to the Logo Attributes field, and select Image Attributes.

   

10. Click Apply Changes to save the changes made to the application.

    

11. In the Application page, click Run Application.

    

12. If prompted, Sign In to the application. You see that the Oracle logo appears in the header section.

    

Adding a Footer

Perform the following steps to edit the footer of the packaged application and add the Oracle copyright information.

1. Scroll down to the bottom of the Sample Database application and notice the existing footer. You see that only the screen reader mode information is displayed in the footer.

   

2. Click Application <n>. in the runtimer toolbar to navigate to the Application Home page.

   

3. Click the global page titled 0 - Page Zero to edit the attributes.

   

4. In the Page Layout, scroll down to the footer section. Notice that the footer is empty.

   

5.  Navigate to Regions, drag and drop a Static Content region container to the footer section.

   

   The footer now displays a static content region container.

   

6. Update the attributes of this region in the Property editor. Perform the following steps:

   • Update the title to Footer.
   • Scroll down to the Source section and enter &copy; 2017 Oracle in the text field. 
   • Scroll down to the Appearance section, click the pop-up menu button next to Template and select Blank with Attributes.
   • Click Save.

   

7. Navigate back to the application home page and click Run Application.

   

8. Sign In to the application if prompted. You see the footer displaying the copyright information.

   

You use the Theme Roller feature in Oracle Application Express to customize the style of your application during runtime. Perform the following steps to customize the current theme style:

Note: The Theme Roller window is displayed in the Runtime Toolbar only if theme styles have been defined.

1. Click Theme Roller in the Runtime Toolbar. Theme Roller fetches the styles for your application and loads them in the editor.
   

   

2. In the Theme Roller dialog, click the Show All button. You will see all attributes that you can modify using Theme Roller.
   

   

3. Click the Header Accent color under Global Colors header, and update the color to #E72A30.

   Note: You can directly update the color to Red by clicking on the red color in the color chart as an alternate to updating the Header Accent color.

   

4. Notice that Oracle Application Express updates the Link Color and the Focus Outline color fields to match the Header Accent color. Also, the application header, links, and focus outline are also updated to red. Expand the Containers heading. Update the Background Color of the Title Bar to #20C0F1.

   

5. Update the Foreground Color of the Title Bar to #FFFFFF.
   

   

6. Expand the Navigation heading and update the Body Background color to #BCE7F5.

   

7. Update the Selected State Background to #1386A9.

   

You can also add custom CSS in the Theme Roller dialog to change the style of the application. Perform the following steps to add the following CSS code to Theme Roller:

1. In the Theme Roller dialog box, expand the Custom CSS header and add the following code to the code box:

   .t-Header-logo-link span {font-weight: bold;}
   .a-TreeView-content {
     box-shadow: 4px 0 0 rgba(0,0,0, 0.25) inset;
   }
   .a-TreeView-content.is-selected {
     box-shadow: 4px 0 0 rgba(0,0,0, 0.5) inset;
   }
   .a-TreeView-content.is-selected .a-TreeView-label {
     font-weight: bold;
   }

   

2. Click the Save As Button to save the changes made to the application theme.
   

   

3. Enter New Theme as the style name and click Save.

   

4. Notice that even though you have saved the theme style, it is not applied to your application. Click the Set as Current button to apply the theme style to this application.

   

5. A pop-up dialog appears indicating that the new theme is now the application's current theme. Click OK.

   

6. Right click anywhere on the screen and select Inspect to open the Browser's developer tools.

   

7. In the developer tools window, click Console, type apex.utr.config(); in the editor, and click Enter.

   

8. The console shows a few lines of code with a comment saying "Paste the following line of code into the JS console to load your current configuration into Theme Roller". Copy the code and paste it in your text editor. The code looks similar to this:

   apex.utr.config({"customCSS":".t-Header-logo-link span {font-weight: bold;}\n.a-TreeView-content {\n  box-shadow: 4px 0 0 rgba(0,0,0, 0.25) inset;\n}\n.a-TreeView-content.is-selected {\n  box-shadow: 4px 0 0 rgba(0,0,0, 0.5) inset;\n}\n.a-TreeView-content.is-selected .a-TreeView-label {\n  font-weight: bold;\n}\n","vars":{"@g_Accent-BG":"#e72a30","@g_Body-Title-BG":"#20c0f1","@g_Body-Title-FG":"#ffffff","@g_Nav-BG":"#bce7f5","@g_Nav-Active-BG":"#1386a9"}});

   

   You will use the code in the next section of this tutorial to export this theme to another application.

9. Click the Home button in the Application runtime toolbar to navigate to the Application Express Home page.

   

Before exporting the new theme style to another application, you need to create a Database application to which you want to import the theme style. Perform the following steps to create a database application:

1. In the Oracle Application Express home page, click the down arrow next to the App Builder tab, and select Create.

   

2. Accept the default and click Next >.

   

3. Enter Sample for Name, and click Next >. 

   

4. By default, the Home page gets created. Click Create Application to create the sample application.

   

5. Verify the selections made in the previous pages and click Create Application.

   

6. Click Run Application to see this application in action.

   

7. In the Sample application home page, click the Theme Roller button in the application's runtime toolbar.
   

   

8. Right click anywhere on the screen and select Inspect to open the browser's developer tools.

   Note: To copy the theme style from another application, make sure you open the Theme Roller window before selecting the Inspect option.

   

9. In the top menu, select Console, paste the code that you copied from the previous application, and click Enter.

   apex.utr.config({"customCSS":".t-Header-logo-link span {font-weight: bold;}\n.a-TreeView-content {\n  box-shadow: 4px 0 0 rgba(0,0,0, 0.25) inset;\n}\n.a-TreeView-content.is-selected {\n  box-shadow: 4px 0 0 rgba(0,0,0, 0.5) inset;\n}\n.a-TreeView-content.is-selected .a-TreeView-label {\n  font-weight: bold;\n}\n","vars":{"@g_Accent-BG":"#e72a30","@g_Body-Title-BG":"#20c0f1","@g_Body-Title-FG":"#ffffff","@g_Nav-BG":"#bce7f5","@g_Nav-Active-BG":"#1386a9"}});

   

10. The theme from the packaged application gets copied to this application. Close the browser's developer tools window.

    

11. Save the current theme by clicking the Save As button in Theme Roller.

    

12. Enter Exported Theme for stye name and click Save.
    

    

13. You will see a message pop-up saying that the theme is saved successfully. Click OK.

    

14. Click Set as Current Theme in Theme Roller to make this theme as the current theme of this application.

    

15. You get a pop-up message saying that The selected theme is now the application's current theme. Click OK. The theme is successfully imported to your current application.
    

    

• Using Themes