- User Defined Theme - HTML Code Operation

HTML Code Operation - Theme Change [requires WOW 7.3 or higher]

WOW comes packaged with many boxed “themes” to create the UI (look and feel) of applications. These themes are comprised of HTML and CSS. These generic themes will work in instances where the look and feel or customization is not necessary. These themes are set at the application level in WOW Builder as shown here:

As an example, PlanetJ has a sample application shown below. Currently, it has the boxed theme “stealth” applied to it, and looks like this:

:

If it is necessary to include a more customized look (say including a company logo or company colors/fonts), there is a very simple way to accomplish this in WOW. In the past, it would require changes to the CSS files within WOW applications, a specialized skill many WOW users do not have. Now, it is possible to apply a simple custom theme to a WOW application by selecting the “User Defined Theme” option in the theme drop down and “tweaking” the various CSS classes within a WOW operation.

To customize, I will edit the “Law Enforcement” application from the WOW Builder:

Scroll down to theme drop down and select “User Defined Theme” and update the application.

By setting this theme, WOW automatically inserts two new HTML Code operations to manage the theme customization. The default “header operation” will include all of the common CSS classes that you may want to customize for the header AND the operation screens as the application is run. The “footer operation” will include the common CSS classes to control the footer.

These are HTML Code operations:

If I were to RUN the application now, WOW has set a default theme that looks like the screen shot below. Colors are set so you can easily see what will be changed with your custom logo and color scheme. Here is what the WOW default User Defined theme looks like:

From the RUNNING application, you will see two larger “gear” icons at the right of the screen that look like this:

Developers that click on either of those will be taken to the “edit header” operation or “edit footer” operation. You may also edit these operations from the operation section of the WOW Builder. By clicking on the top “gear” icon above, the “edit header” will open this:

Within the header operation’s “Operation Code” users will have access to the common CSS styles that control the header and the colors of the user messages, menu styles, results table, row details, the even/odd row colors and the text within each of these items.

Here is what the entire Operation Code looks like within the WOW Builder:

<div id="header">

<img src="wow/custom-theme/wow-community-logo.jpg" height="80" border="0" />

</div>

<style>

/*********************************************************************************************/

/******** Messages ***************************************************************************/

/*********************************************************************************************/

/* User Message */

.userMessage { border: 1px solid #5b9b20; color: #5b9b20; }

/* Error Message */

.errorMessage{ border: 1px solid #B22222; color: #B22222; }

/*********************************************************************************************/

/******** Menu Styles ************************************************************************/

/*********************************************************************************************/

/* Header */

.dmx {background:; background-color:#FE9A2E;}

/* Level 1 - Item */

.dmx .item1 { color: #FFFFF; background:; background-color:#FE9A2E;}

/* Level 1 - Item Active */

.dmx .item1:hover, .dmx .item1-active:hover { color: #FFFFF; background:; background-color:#FE9A2E;}

/* Level 2 - Item */

.dmx .item2 { color: #FFFFF; background:; background-color:#FE9A2E;}

/* Level 2 - Item Active */

.dmx .item2:hover, .dmx .item2-active:hover { color: #FFFFF; background:; background-color:#FE9A2E;}

/*********************************************************************************************/

/******** Result Table ***********************************************************************/

/*********************************************************************************************/

/* Header */

tr.pjr-h { color: #FFFFF; background-image:none; background-color:#FE9A2E;}

/* Odd Row */

tr.pjr-o { color: #FFFFF; background-image:none; background-color:#e5e5e5;}

/* Even Row */

tr.pjr-e { color: #FFFFF; background-image:none; background-color:#ffffff;}

/* Highlighted Row */

tr.pjr-highlight { color: #FFFFF; background-image:none; background-color:grey;}

/* Selected Row */

tr.pjr-selection { color: #FFFFF; background-image:none; background-color:#dd9999;}

/*********************************************************************************************/

/******** Row Details ************************************************************************/

/*********************************************************************************************/

/* Field Set Header */

tr.pjd-h { color: #FFFFF; background-image:none; background-color:#cccccc;}

/* Field Set Data */

tr.pjd-l { color: #FFFFF; background-image:none; background-color:#e5e5e5;}

/* Field Set Footer*/

tr.pjd-f { color: #FFFFF; background-image:none; background-color:#e5e5e5;}

</style>

Here is a summary of WOW CSS naming convention:

At the end of this documentation is Appendix A which is a collection of screenshots of running applications with details about what CSS files change colors of different tables and menu items.

In my current sample, the items that I am going to change are the logo, the header and footer and some of the colors of the table detail screens to demonstrate the feature.

First, I need to select an image to upload to the application. This can be a company logo or an image off the internet. I have searched these to find one that I like and copied the image to my desktop. Click on the “upload image” button from WOW Builder and locate your image that you've recently saved:

After double clicking on the image you would like used, the WOW Builder will give you a message on where it is stored.

Within the operation code section in screenshot above, you will need to replace image src with the path of the new image from within the WOW message.

In our example, “wow/custom-theme/wow.community.logo.jpg” will be replaced with “uploadFiles/lawenforcement.png”. Make sure that the “” signs are included on each side or the image won’t be located. You may also need to play around with the height and width of the HTML to get the header to look the way you would like. Currently, the HTML for height is set within WOW Builder, if you need to enter width you may do that manually, I have set mine to:

<div id="header">

<img src="uploadFiles/lawenforcement.png" height="150" width= "900" border="0" />

</div>

<style>

Click “Apply” and “update operation” and re-run your application to see the new logo to see if you need to make changes on height/width and to see what colors you would like to match for the menu items.

To select colors, you can use the HTML Color Picker off W3Schools website. http://www.w3schools.com/tags/ref_colorpicker.asp

Once you have found a color you want to include in your application, simply cut and paste the #3366CC into your CSS in the operation code of the header operation.

Here, I have adjusted the background colors to something more suitable to my logo.

Re-running application will show the blue menu bar and new law enforcement logo:

You can control any CSS style that you would like by adding it into the header operation. As an example, you may change font by adding this into the operation code:

p {

font-family: "Times New Roman", Georgia, Serif;

}

After spending some time finding colors that I wanted for my application and replacing the CSS color codes, here is my running application:

Much more information on CSS and examples can be found here: http://www.w3schools.com/css/default.asp

Changing the footer (in this example, the Copyright line), is as simple as clicking on the large gear icon at the lower right corner of the running application to open this:

Change the text or put in any other HTML you want included and click “Apply” and re-run.

.

Re-Use of User Defined Theme

There may be times when you want to re-use an existing custom user defined theme without needing to re-create it each time, i.e. a business wants to use all the same themes for internal applications. To do this, simply create a new Application and set theme to “user defined theme”. Open the operations within the application and Delete the header/footer operations. This will force WOW to pick the first -777 operation from any of the applications within the WOW context.

.

APPENDIX A

Referring back to the CSS table in documentation above, these screenshots will show what CSS files to change and what is affected by those changes.

Initial running screen of an application (no rows returned):

.

Result table:

.

Detail screen:

TAGS: Look and feel, company logo, customization, customize, theme, colors, custom skin, edit css, html

User Defined Theme JSPs

The user defined theme utilizes JSPs as shown here:

These are defined by a file in the class path called:

UserDefinedTheme.properties