Wijmo is composed of over 40 user interface widgets ranging from form components to enterprise charts. All of the widgets come with themes. The best features about Wijmo are:
Wijmo is easy to use. It is a complete set of widgets with a wide array of configuration options. Chances are that Wijmo has a widget for every UI component you've used in your projects.
It deals with implementation differences between browsers. All versions of IE since version 6 and other browsers are supported.
It has Platinum support. Although the live phone support costs an annual fee, your team will never get stuck or experience downtime while working with Wijmo.
It is open source and is hosted on a repository on GitHub with a GPL license for open source applications.
Not everything is perfect. Wijmo comes with its rough edges. In this book, I point out the pitfalls and guide you around them. The benefit of learning from this book is that you won't make the mistakes I've made. Learning Wijmo makes web development simpler, quicker, and more enjoyable.
Downloading and installing Wijmo only takes a few more steps compared to jQuery UI. It has files hosted on a content distribution network for a quick start. For this book, it is recommended that you download and set up the files for development. Since Wijmo is built on jQuery UI, I have included the details on obtaining and customizing jQuery UI. This chapter also covers how to install the minimized files for production environments.
However, the reader is encouraged to select from one of the Wijmo themes, as they are more compatible with the library. Wijmo has a Theme Explorer (http://wijmo.com/demo/themes/) showcasing six themes (as of version 3.20131.1) as shown in the following screenshot:
Wijmo provides a separate CSS for Widgets that change with each version. The URLs take the form: http://cdn.wijmo.com/jquery.wijmo-pro.all.[version].min.css. For the version at the time of writing this book, the form is: http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.1.min.css.
If the Wijmo CDN files have been added properly, you should see a distinct "window" with the standard minimize, expand, and close buttons as shown in the following screenshot:
jQuery UI has five main areas of functionality. You can create a custom download that includes only the features necessary for your web application, resulting in a smaller library for browsers to download.
To avoid the pitfalls of using a jQuery UI theme, it is recommended to completely avoid the ThemeRoller on http://jqueryui.com. If Wijmo is configured with a jQuery UI theme such as Redmond, a few quirks will appear as show in the screenshot:
The jQuery UI download page, http://jqueryui.com/download/, lets you select only the features required for your project to create a set of smaller files for the browser to download. This is usually a better idea than using a CDN, since jQuery UI has many releases each year and the chances of your project using the same version that the browser has already downloaded is low. For this book, download jQuery UI 1.10.2 with the default options. Later on, you will want to unselect the features that you don't use and see if your project still functions.
When customizing a jQuery UI library, the dependencies are sorted out for you. When a component is enabled, its dependencies are automatically selected. As you minimize your files for production, keep in mind that most of the effects along with some interactions and widgets may not be necessary. For example, only the slide effect is used in the accordion and dialog widgets. If your project only uses these widgets, then the other effects are not necessary.
To start, go to http://wijmo.com/downloads/ and scroll down to the bottom. There is a navigation panel on the right-hand side with the Downloads link as shown in the following screenshot:
This loads the Downloads page, which consists of a list of ways to include Wijmo in your project along with an introductory video, Get Started with Wijmo, at the bottom. Click on the Free Trial button to download Wijmo Professional. The licensing options, along with a comparison chart of features, are at the end of this chapter. After clicking on the Free Trial button, you will need to register an account if you're a new user. Once you log in with your new account, you will see a link to download the library and you will be able to see a screen as shown in the following screenshot:
Wijmo folder. They can be helpful when you want to reduce the size of the download for production. Since only the current version of Wijmo is downloadable from the website, you will want to keep a backup of your download.
Inside the jQuery UI download both the minified files for production and the uncompressed source code for development are present. Using the development versions makes it easy to debug, as you don't have to step through the minified code. To set up your development environment, copy the files
js\jquery-ui- 1.10.2.custom.js and
js\jquery-1.9.1.js into a
Like the jQuery UI download, the Wijmo download contains all the files that you need for development and production. For this book, we will be using features in Wijmo Professional. Wijmo Professional depends on components in Wijmo Open. You need to copy the following files from the Wijmo download into the
When copying the theme images, merge the folder contents. Note that the image paths are relative in the CSS and will work as long as you have the folder in the same directory as the CSS file. The Wijmo Professional files include the version number of the release that was downloaded. These change with each release, while the image and theme files are relatively static. The version, as of early 2013, is 3.20131.2. Simply replace it with your version number for the rest of the book or just use the version 3.20131.2.
Wijmo Open is licensed under both MIT and GPL. The MIT license allows you to use the software in any way you want as long as the copyright attribution is kept. Wijmo Open is an expansion of jQuery UI with more widgets and options. A few of the widgets not included in jQuery UI that are in Wijmo Open are:
Below the differences between jQuery UI and Wijmo are mentioned, showcasing which of the features are present in both or the other.
Wijmo Professional is intended for businesses developing closed-source projects. It includes everything from Wijmo Open, in addition to the following:
The license cost is per developer at a rate of $495 (https://wijmo.com/purchase/). However, ComponentOne does offer a GPLv3 license for use in open source applications.
By this point, you should have the most recent version of Wijmo set up for development. If not, the source code for all the examples in this book are available at https://github.com/yuguang/wijmo_essentials. Download it to a permanent location on your computer and you will have all the code at your disposal. All of the examples are MIT licensed, so you may use it in any way you want.
Now that you have Wijmo set up on your computer for development, you are ready to start exploring Wijmo. In the next chapter, we dive into the dialog widget and look at several features which are not available in jQuery's version.
In addition to setting up Wijmo, we've also covered its licensing details. If you plan to use any of the complete Wijmo widgets in a proprietary application, make sure to get a license.