Themes are an important part of any web or mobile widget. The quality, seamlessness, and ease of the user interface, also referred to as the UI, determine the usability of the widget. Most developers are less attentive to UI detail and focus more on the overall prototypical functionality.
The team at Wijmo understands the importance of UIs, and has integrated the jQuery UI into the Wijmo library. Wijmo was built on top of jQuery in such a way that making a reference to the Wijmo library also embeds the jQuery library.
The essence of ThemeRoller is to enable us to customize the look and feel of our widgets or apps in general. All the sample widgets created in previous recipes have references to a Wijmo theme called rocket:
<link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" />
This applies the rocket theme styles to the widget. So, to change the theme, we need to reference another one, preexisting or personally customized.
To achieve this, we can make use of
jQuery ThemeRoller, which is accessible at http://jqueryui.com/themeroller/.Download a theme of your choice from the ones listed within the Gallery tab of the page. For the purposes of this tutorial, we are using UI darkness.
Click on the Download button below UI darkness; it takes you to the Download Builder page.
Now that we have downloaded the
jquery-ui-1.9.2.custom.zipfile, we need to unzip it. After extracting all the files, we navigate to the CSS file of our choice, minified or regular. For the purposes of this tutorial, we will use the minified version. There's not going to be much difference in performance, though.The CSS file, in this case, is
jquery-ui-1.9.2.custom.min.cssand we have to include the path in our project, which will replace the rocket theme's CSS file as follows:<link href=" jquery-ui-1.9.2.custom/css/ui-darkness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" type="text/css" title="UI darkness-jqueryui" />
We will redo one of the grid widgets using the new UI darkness theme we downloaded. Enter the following code in your editor and run it:
<html> <head> <!--jQuery References--> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js" type="text/javascript"></script> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.0.0.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.js" type="text/javascript"></script> <!--Theme--> <link href="jquery-ui-1.9.2.custom/css/ui-darkness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" type="text/css" title="UI darkness-jqueryui" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.css" rel="stylesheet" type="text/css" /> </head> <body> <table> <thead> <th>column0</th> <th>column1</th> </thead> <tbody> </tbody> </table> <script type="text/javascript"> var columns = [ { headerText: 'First Name', dataKey: 'firstName', dataType: 'string'}, { headerText: 'Last Name', dataKey: 'lastName', dataType: 'string' }, { headerText: 'Date of Birth', dateKey: 'DOB', dataType: 'string' }, { headerText: 'Occupation', dataKey: 'occupation', dataType: 'string' } ]; var content = [ { firstName: 'Tochi', lastName: 'Eke-Okoro', DOB: '08/21', occupation: 'UI Developer' }, { firstName: 'Ryan', lastName: 'Krest', DOB: '06/1', occupation: 'Attorney' }, { firstName: 'Bruce', lastName: 'Romeo', DOB: '02/26', occupation: 'US Navy' } ]; $("table").wijgrid({ columns: columns, data: content }); </script> </body> </html>If the preceding code is successfully run, you will see a Wijmo grid similar to this:
Hurray! We have changed the theme for the widget!
The only thing we changed in our code was the reference or link to the theme or CSS file. We have used a theme we desire for our widget, and this is achievable as follows:
Visit the ThemeRoller site at http://jqueryui.com/themeroller/.
Click on the Gallery tab.
In the Gallery section, you will find a list of themes. Click on the Download button below the theme of interest.
In the Download Builder page, turn on or off the options you do/don't need activated in your theme.
Overwrite the previous theme's path in your project with the new CSS file, which could be minified or regular.
There goes the new theme!
What about creating our own theme from scratch?
Its as easy as A-B-C!
The team at jQuery has provided a quick way of achieving this in ThemeRoller, which can be found at http://jqueryui.com/themeroller/. So, we'll visit the ThemeRoller site and we should be right on the Roll Your Own tab. You should be able to see this page:
Open the Header/Toolbar and Content sections, and make some changes. The following screenshot shows the particular changes made for the purpose of this tutorial:
Next, click on the Download Theme button, which takes you to the Download Builder page. Here, you can turn the options on or off and then finally download the zipped theme. Unzip the file and add the path to your widget project. Navigate to the path and you will see the following screenshot:
After switching from the theme reference and running the code, we have the following screen on our browser. This is the new look of our grid:
