Creating a Theme in Oracle Visual Builder Cloud Service

Before You Begin

This 15-minute tutorial shows you how to create a theme to define the look and feel of an Oracle Visual Builder Cloud Service application.

Background

A theme is an HTML fragment, along with one or more related CSS stylesheets and images, into which the content of an Oracle Visual Builder Cloud Service application is injected. Typically the theme defines the look and feel of the application, as well as the header, footer and page menu. You can inject other dynamic content into areas of the theme to display the logo, title, copyright message, language switcher, and menu structure defined by the application developer.

You can apply the theme you create to the application in which you create it. You can also share it and make it available to other applications. Finally, you can publish the application as a template so that other applications can use it.

The images in this tutorial show the standalone version of Oracle Visual Builder Cloud Service. If you are using the Oracle Integration Cloud version, you will see an additional menu at the top of each page that lets you switch between Visual Builder and Integration Cloud.

What Do You Need?

• Access to Oracle Visual Builder Cloud Service
• A supported browser (see Known Issues for Oracle Visual Builder Cloud Service for more information)
• A thorough knowledge of JavaScript and web application development

Create a Simple Application

1. In the web browser, log in to Oracle Visual Builder Cloud Service.
2. On the Home page, click + New Application and select Web.

   

3. On the first page of the Create Application wizard, enter the following:
   • Application Name: Theme Application
   • Description: Theme tutorial application

   The Application ID text field is automatically populated based on the Application Name.

   

   Click Next.

4. On the next page, select the Oracle Applications Cloud UI template, and then click Next.

   

5. On the last page, click Finish.

   By default, one tab with Home as its label is available.

   

6. Your application is created and opens in the Page Designer. Click the Themes palette to view the currently available themes. Three themes are provided by default: Oracle Alta UI, Oracle Applications Cloud UI, and Oracle Applications Cloud UI R12.

   

Create a Theme

1. Click the icon and select Application Settings.

   

2. Click the Extensions tile.

   

3. On the Extensions page, click the Theme tab.

   

4. Click + New Theme and select Create new.

   

5. On the first page of the Create New Extension wizard, enter the following, then click Template.
   • Display Name: MyTheme
   • Extension ID: com.example.MyTheme (at least two groups of letters or numbers separated by a period)
   • AMD Package Name: com.example.MyTheme (automatically populated)
   • Description: My example theme

   

6. On the Available Templates page of the wizard, select Simple Theme, then click OK.

   

7. The Overview tab of the theme opens. Toggle the Extension Active icon to enable the theme. A message reports that the extension has been enabled.

   

8. Click Sources to open the files in the Resource Browser.

   

9. If necessary, expand the nodes in the Resource Browser and view the file names (you may need to widen your web browser window to see them).

   

   You can perform most simple theme customizations by modifying two of the files, layout.html (the HTML source of the theme) and style.css (the associated CSS file). You'll make these modifications in the next section.

   For more information on the files that make up a theme, see Using Oracle Visual Builder Cloud Service.

10. Click the Main Menu icon and select Page Designer to return to the Page Designer.

    

11. Click the Themes palette. Scroll down to see the new theme, MyTheme, in the palette. It has a default icon.

    

12. Click the Main Menu icon and select Application Settings, then Extensions, to return to the Themes tab on the Extensions page.

    

Customize the Theme Layout

In this section, you'll customize the layout of your new theme. You'll modify layout.html to add a new help panel that floats to the side of the main content window.

The Sources tab provides a basic editor. If you want to do more extensive editing, you can export the extension to your system as a ZIP file, edit the files in a local editor, and then use the Resource Browser under Application Settings to import the zip file to the extensions directory. You could also select and copy the contents of an individual file, edit it in a local editor, and then paste it back into the Sources tab editor.

1. From the Overview page for MyTheme, click the Sources tab.

   

2. In the Resource Browser, expand the nodes (if necessary) and navigate through the directory hierarchy to find the layout.html file, under user/extensions/com.example.MyTheme/theme/.

   

3. Click the layout.html file to display its contents.

   

4. Select the div element with the ID value "abcs-app-content". It's almost at the end of the file, between the header and the footer.

   <div id="abcs-app-content">
       <!-- page content placeholder -->
   </div>

   

5. Replace that code with the following, which moves it under a higher-level div element with the ID value "my-layout-container". Don't worry about the formatting.

   <div id="my-layout-container">
       <div id="abcs-app-content">
           <!-- page content placeholder -->
       </div>
       <div class="help-panel">
           Help! This is where you could add basic information on how to use the application.
       </div>
   </div>

   

6. Click Save Changes.

   

Customize the Theme Style

In this section, you'll customize the style of your new theme. You'll modify style.css to change the color scheme and add some styling to the help panel.

1. Click the file style.css, in the same directory as layout.html, to display its contents.

   

2. Locate the following section, at lines 27-28.

   .abcs-bg-container {
       background-color: #F0F0F0; }

3. Replace the background color setting with the following to change the background color to yellow.

   .abcs-bg-container {
       background-color: #fcde8a; }

   

4. To style the new help panel, add the following at the start of the file.

   .help-panel {
       width: 25%;
       background-color: #fbce4a;
       border-radius: 5px;
       padding: 10px 10px 10px 10px;
       margin-right: 10px;
       margin-top: 3px;
   }
   #my-layout-container {
       display: flex;
   }

   

5. Finally, make the main application content narrower to fit in the help panel. Find the section for #abcs-app-content (line 261) and add a line that sets the width to 75%.

   #abcs-app-content {
       width: 75%;
       margin-bottom: 10px;
       padding: 0px 10px 10px 10px;
       -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
       flex-grow: 1;
       -webkit-flex-shrink: 0;
       -ms-flex-negative: 0;
       flex-shrink: 0; }

   

6. Click Save Changes, then click Reload Extensions.

   

7. Click the Main Menu icon and select Page Designer to return to the Page Designer.

   

8. Click the Themes palette and select MyTheme.

   

   The application is re-rendered with the new layout. You may need to refresh the browser to see the help panel.

   

   The new help panel you created is not part of the content area of the application, but only part of the wrapper around the content area. In the Page Designer, you can drag components only into the content area specified by the ID "abcs-app-content". To add content to the help panel, you would have to edit the theme in the Extensions page, modifying the contents of the div element that has the ID "help-menu".

Want to Learn More?

• Using Oracle Visual Builder Cloud Service in the Oracle Help Center
• Known Issues for Oracle Visual Builder Cloud Service in the Oracle Help Center
• JavaScript API for Oracle Visual Builder Cloud Service in the Oracle Help Center