The jQuery UI is now the industry standard for theme implementation because of its support for widgets. Dive into the jQuery UI platform with Java architect Ken Ramirez to learn how to use jQuery UI's native themes and design custom themes for your site.

Share:

Ken Ramirez (ken.ramirez@axsystechgroup.com), Senior Java Architect/Consultant, Axsys Technology Group

Photo of Ken RamirezKen Ramirez has more than 24 years of experience in the IT industry, the last 12 of which have been spent developing Java and JEE applications and websites. He has consulted for several large American corporations, developing full lifecycle applications from the ground up. His experiences have allowed him to develop on the front end using technologies such as HTML5, Ajax, JSON, JavaScript, jQuery, and Adobe Photoshop. On the back end, he has employed Java, JEE, web services, XML, Hibernate, SQL, JDBC, and Spring to develop enterprise-level websites and applications.



04 April 2013

Also available in Chinese Japanese Vietnamese

Themes are not a new concept. You've probably rolled out a few using Cascading Style Sheet (CSS) styles and classes to format the look and feel of your websites. Using a framework standardizes the approach and lessens the amount of work and code needing to be written.

jQuery UI is now the industry standard for theme implementation. There are other choices, such as Dojo (coupled with Dijit) or Ext JS, but jQuery UI combines themes with the use of widgets, which are the elements with which users interact date pickers or buttons. When dissecting the inner workings of the files that make up a jQuery UI theme, what you find is nothing more than CSS and JavaScript. But it's the thought process and standardization that have gone into this use of CSS and JavaScript that makes jQuery UI such an excellent platform for building the look and feel of a website.

The basics

This article assumes you are familiar with the Document Object Model (DOM) and how it builds relationships among HTML elements.

You should also be familiar with CSS — specifically CSS3, as it is the current and most supported CSS standard with today's popular web browsers — and JavaScript. This scripting language ties together the DOM elements with the CSS at run time to provide the full user experience that jQuery UI, and its themes and widgets, implement.

Note that widgets receive their relationships to other HTML elements from the DOM, and they receive their styling using the defined classes (as discussed previously) using CSS. The events and functionality are implemented through JavaScript, which manipulates the DOM and assigns various CSS styles at run time.

jQuery creates and implements widgets as needed or as requested from the website application. Also note that widgets can be destroyed. Doing so only destroys visual changes applied by the widget.

jQuery UI themes

The jQuery UI platform consists of two sub-frameworks: a widget framework, which contains the Widget Factory and a set of commonly used widgets, and the CSS framework. The Widget Factory provides the basis for all jQuery UI widgets, including those common widgets included in the set of widgets. When creating widgets, use either one of the common widgets from the set as a starting point or create one from scratch. Once you know where the common widgets are, open any of them in your favorite editor and view the code. From there, either modify this code and generate a customized widget (using one of the other widgets as a starting point) or create one with a similar structure.

The jQuery UI themes folder structure

Before continuing to look at the various files and their contents, download one of the themes from the jQuery UI platform (see Resources for a link). The downloaded ZIP file contains three folders: css, js, and development-bundle. The development-bundle folder contains a folder named themes, which is where jQuery UI themes under development are kept. The themes folder in turn contains a folder with the name of the selected/downloaded theme (such as UI lightness) as well as a folder named base. This folder contains a starting point for your own themes. It is always downloaded, regardless of the theme selected.

The css folder contains a folder with the name of the theme downloaded. This theme folder contains a CSS file that incorporates the CSS markup for all of the components or widgets. The development-bundle folder, however, also contains a themes/[theme-name] folder (where [theme-name] is the actual name of the chosen theme) that contains the individual CSS files for each component or widget. This structure makes it easier to find and modify the changes in your own themes. Figure 1 shows the structure of the themes folder.

Figure 1. Structure of the themes folder
Image showing the structure of the themes folder

Not all files from the [theme-name] folder are listed in Figure 1, but the important ones are here. The jquery.ui.all.css file imports the jquery.ui.base.css and jquery.ui.theme.css files, making it easy to import the files using just the jquery.ui.all.css file. The jquery.ui.base.css file imports the jquery.ui.core.css file and all of the other component and widget files from the same folder (not shown in Figure 1.). The jquery.ui.core.css file contains common classes shared by all widget files. It provides the base CSS classes for all jQuery UI widgets (within the theme) as well as common visibility and positioning for the widgets. The final important file is the jquery.ui.theme.css file, which provides the common appearance and behavior shared by all widgets in the theme as well as the theme itself.

The jquery.ui.theme.css file has three different types of styles:

  • Container - This style defines the container theme, such as ui-widget, ui-widget-content, or ui-widget-header.
  • States - This style type is used by jQuery UI widgets to define the look of the widget as the user interacts with it. Classes include ui-state-default, ui-state-hover, and ui-state-active.
  • Cues - As something happens in the application (not by the user's action), these classes change the look of the widget. The classes include ui-state-highlight, ui-state-error, and ui-state-disabled.

Common widgets

This section looks at example code that uses some common widgets to build an example application. This example contains a slider widget, a button that opens a dialog box, and a dialog box that displays the current value of the slider each time it is opened. Figure 2 provides a snapshot of the application.

Figure 2. An example application using common widgets
Image showing an example application using common widgets

Listing 1 provides the HTML index file.

Listing 1. Example application using common widgets
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Slider Value Example</title>
        <link href="jqueryui/css/ui-lightness/jquery-ui-1.8.23.custom.css"
        		rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="jqueryui/js/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="jqueryui/js/jquery-ui-1.8.23.custom.min.js">
        		</script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body style="font-size: 10px;">
        <div id="sld_value" style="margin-bottom:10px;"></div>
        <button id="btn_value">Display Value</button>
        <div id="dlg_value"></div>
    </body>
</html>

Listing 2 shows the associated JavaScript file (index.js).

Listing 2. The associated JavaScript file for the example application
$(document).ready(function(){
    $('#sld_value').slider({ min: 1, max: 10 });
    $("#dlg_value").dialog( { autoOpen: false, title: "Slider Value",
    	open: function(){ 
    		$("#dlg_value").html("The current value is: " + 
    				$("#sld_value").slider( "option", "value" )); 
    	}
    } );
    $("#btn_value").button().click(function(){ $("#dlg_value").dialog("open"); });
});

The initial setup takes place in the header with the following code:

<link href="jqueryui/css/ui-lightness/jquery-ui-1.8.23.custom.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="jqueryui/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="index.js"></script>

After linking in the CSS, the JavaScript files are included.

The three widgets in this application are defined using <div> statements for the most part (except for the button, which already has a tag in HTML). These widgets are defined in the following code:

<div id="sld_value" style="margin-bottom:10px;"></div>
<button id="btn_value">Display Value</button>
<div id="dlg_value"></div>

Finally, delay the actual construction of the widgets in the JavaScript code until the page has been fully loaded by the browser, as shown in Listing 3.

Listing 3. Constructing the widgets
$(document).ready(function(){
    $('#sld_value').slider({ min: 1, max: 10 });
    $("#dlg_value").dialog( { autoOpen: false, title: "Slider Value",
    	open: function(){ 
    		$("#dlg_value").html("The current value is: " + 
    				$("#sld_value").slider( "option", "value" )); 
    	}
    } );
    $("#btn_value").button().click(function(){ $("#dlg_value").dialog("open"); });
});

Each of the already-mentioned widgets is constructed with this code. The dialog box and button are both assigned functions to specific events. For example, the click event of the button is told that it should open the dialog box upon being clicked. As for the dialog box, it is directed to change its text to indicate the current value of the slider, which it does each time it is opened.

There are two ways to change the appearance of a widget. You can pass values to the constructor, along with any required constructor parameters for the widget. For example:

$("#dlg_popup").dialog( { autoOpen: false, draggable: true });

Or you can call methods on the widget after it has been created, as follows.

$("#dlg_popup").dialog({ draggable: false });

Most of the common widgets have many associated options that can be set. In addition, if you choose to ignore these options, the widgets set them to default values, allowing you to set and change whatever is needed.


Widget events

Because widgets are fundamentally JavaScript objects, they can be set up with events that fire during the lifetime of the website application. As these events fire, they are caught by either your website's provided JavaScript code or handled within the widgets (the default).

All widget default behavior implementation is well-documented by the jQuery UI team for each common widget. You can inject your own code, however, to handle one or more of a chosen widget's events. Here's an example of code to set up the reception of an event:

$( "#dlg_popup" ).dialog({
   drag: function(event, ui) { ... }
});

This particular example hooks into the drag event, which is triggered when the dialog box is dragged. The ellipsis () shown in the example is where individual code can be placed to handle and implement the code for the event.


Widget methods

Methods (as in any familiar language) are associated with the widget and allow the execution of pre-written functionality on a particular widget to have it perform a specific action. Here's an example of calling a widget's method:

$(“#dlg_popup”).dialog("moveToTop”);

Conceptually, options and methods are different. Note, however, that an option's value can be changed or retrieved using a method-like implementation, as shown in the following example.

$(“#dlg_popup”).dialog("option", "autoOpen", false);

Switching themes

Code can be included in HTML and JavaScript files that give the ability to switch themes on the fly using a drop-down menu. Listing 4 shows the changes to the HTML source code to make such a change.

Listing 4. Changing themes on the fly
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
.
.
.
        <script type="text/javascript" 
        		src="http://jqueryui.com/themeroller/themeswitchertool/">
        </script>
.
.
.
    </head>
    <body style="font-size: 12px;">
        <div id="switcher" style="padding-bottom:15px;"></div>
.
.
.
    </body>
</html>

Listing 5 shows the JavaScript source code.

Listing 5. JavaScript source code for changing themes on the fly
$(document).ready(function(){
    $('#switcher').themeswitcher();
.
.
.
});

Figure 3 shows the example application after these changes.

Figure 3. The example application after code modifications
Image showing the example application after code modifications

Run the HTML page in your browser again, and view the results. You can now click the drop-down list to change the theme. The selected theme is downloaded in the background as needed.

Although using the theme switcher tool is fine for non-production sites (for testing and viewing results), it isn't a good idea for production sites. The tool relies on a third-party server to host the themes, and you won't be sure of the results the user sees.

Yet another way to test jQuery UI themes is to use the ThemeRoller tool, which is available only for Mozilla Firefox (see Resources for a link). After installing the tool (as a bookmarklet in Firefox), open the gallery and select the themes to view them. Choose a theme and click on the download link. Once downloaded, extract the theme folder, place it in your jQuery UI folder, and point your HTML files to it.

This tool is much more useful than for simply switching themes, though. It also allows you to build custom themes more easily than if you had to roll them out by hand.


Creating unique themes

Using the ThemeRoller website (which runs in most popular browsers; see Resources for a link), changes can be made to an existing jQuery theme (as a starting point) to create a unique theme. Doing so eliminates the need to create the theme from scratch. It also means expertise in CSS isn't required, and the tool allows you to view changes to existing themes and widgets on the fly. Figure 4 shows the ThemeRoller site (not to be confused with the ThemeRoller bookmarklet, which runs in Firefox).

Figure 4. The ThemeRoller site
Image showing the ThemeRoller site

Clicking on the Gallery allows you to select any of the existing themes. Doing so switches the CSS styles and images that the sample widgets use to reflect the change. Clicking on the Edit button associated with a theme takes you to the "Roll Your Own" tab, where you can make changes to the CSS styles associated with the theme. If you don't choose a theme to edit and you start at the "Roll Your Own" tab with no theme selected, you are simply building a theme from scratch.

Finally, clicking on Download theme downloads the selected theme as a custom theme containing all of your theme modifications. Note that jQuery UI and its themes support many CSS3 features, which means all major browsers are supported (except for earlier versions of Windows Internet Explorer).

The "Roll Your Own" tab of ThemeRoller is nicely organized so that you can quickly find and change what you're looking for. The tab contains the following important sections (among others):

  • Font Settings - Allows general changes to the font used throughout a theme.
  • Corner Radius - Controls the rounding (or lack) of corners for various widgets.
  • Header/Toolbar - Provides the look and feel for headers used in the various widgets.
  • Content - Provides settings to control the main body of the widgets.
  • Clickable - Controls various states that the widgets use.

As you click through the options, you'll notice a few interesting things about the construction of these themes. For example, jQuery UI themes take advantage of textures. To see them in use, click on Header/Toolbar in ThemeRoller. Then click the colored button in the middle. A drop-down pallet is revealed that contains patterns from which to choose. The selected texture is combined with your choice of background color to produce the pattern that headers and toolbars use. This is just one use of textures. There are others throughout jQuery UI themes. For example, modify the texture in the "Clickable: default state" to see how the change affects buttons in the selected theme.

One interesting feature of jQuery UI themes is the use of highlights and errors (also known as visual cues). ThemeRoller provides complete control over how these visual cues are displayed to users. The texture, background color, outline corners, text color, and even the icon color can be changed (if an icon is displayed in the cue). The names of these styles are displayed in ThemeRoller, so simply use these names in your own websites to have these styles applied as needed to text shown to users.

Making changes to the various settings produces changes to the URL in your browser. Listing 6 provides a URL as an example.

Listing 6. Example ThemeRoller URL
http://jqueryui.com/themeroller/#ffDefault=Segoe+UI%2C+Arial%2C+sans-serif&
   fwDefault=bold&fsDefault=1.1em&cornerRadius=8px&
   bgColorHeader=817865&bgTextureHeader=07_diagonals_medium.png&
   bgImgOpacityHeader=45&borderColorHeader=494437&fcHeader=ffffff&
   iconColorHeader=fadc7a&bgColorContent=feeebd&
   bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&
   borderColorContent=8e846b&fcContent=383838&iconColorContent=d19405&
   bgColorDefault=fece2f&bgTextureDefault=16_diagonal_maze.png&
   bgImgOpacityDefault=60&borderColorDefault=d19405&fcDefault=4c3000&
   iconColorDefault=3d3d3d&bgColorHover=ffdd57&bgTextureHover=12_gloss_wave.png
   &bgImgOpacityHover=70&borderColorHover=a45b13&fcHover=381f00&
   iconColorHover=bd7b00&bgColorActive=ffffff&bgTextureActive=05_inset_soft.png&
   bgImgOpacityActive=30&borderColorActive=655e4e&fcActive=0074c7&
   iconColorActive=eb990f&bgColorHighlight=f5d361&
   bgTextureHighlight=22_spotlight.png&bgImgOpacityHighlight=100&
   borderColorHighlight=ee5320&fcHighlight=1f1f1f&iconColorHighlight=ed9f26&
   bgColorError=d34d17&bgTextureError=07_diagonals_medium.png&
   bgImgOpacityError=20&borderColorError=ffb73d&fcError=ffffff&
   iconColorError=ffe180&bgColorOverlay=5c5c5c&bgTextureOverlay=01_flat.png&
   bgImgOpacityOverlay=50&opacityOverlay=80&bgColorShadow=cccccc&
   bgTextureShadow=01_flat.png&bgImgOpacityShadow=30&opacityShadow=60&
   thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px&
   cornerRadiusShadow=8px

Save and later restore this URL to come back and make further changes to the settings. For example, copy the URL after you've made modifications and paste it somewhere for safekeeping. Now, close your browser (or the browser tab containing the ThemeRoller site) and reopen it using the copied URL. As you can see, all of your modifications are back, ready for further modifications.


Conclusion

Much more can be said about jQuery UI's internals, but you should have the basics needed to start experimenting with jQuery UI's themes. You've seen the structure of the folders and files, which will allow you to modify a theme. You can view or use these files as the starting point to create your own themes when you're ready.

This article also covered ThemeRoller and the associated website pages supporting the modification of existing themes as well as the creation of new themes from scratch. Finally, you explored the process of saving and restoring theme modifications on the ThemeRoller website.

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Web development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development, Java technology
ArticleID=861770
ArticleTitle=Working with jQuery UI themes
publish-date=04042013