Book review: jQuery UI 1.6
jQuery is possibly the most widely used Javascript library to enhance web sites. It is simple to use but very powerful and extensible by the means of countless plugins. jQuery UI (=user interface) is an extension to jQuery providing a set of useful widgets like draggables, windows, progress bars, silders, datepickers and tabs. This article review the "jQuery UI 1.6" book written by Dan Wellman and published by Packt Publishing who kindly sent me a review copy. (I'm very late with my review. Meanwhile Packt has published a book on version 1.7.)
What is jQuery?
jQuery is a Javascript library. You surely know that web sites consist of HTML (for the structure), images (for the eye), CSS (for the styling) and Javascript (for interactivity after the page has finished loading). The requirements of web site creators regarding Javascript functionality are pretty common. Like "load some piece of HTML into this section of the page when a user clicks here". Doing this with basic Javascript is possible but tedious and you may need to deal with issues and shortcomings specific to a certain browser. So the inventors of jQuery kindly provide us with a completely free Javascript library helping us with common tasks using a syntax that could barely be simpler and shorter. All you have to do is load the jQuery Javascript file from your web page and you have additional Javascript syntax at your fingertips.
What is jQuery UI?
Although jQuery makes developing interactive elements on a web page easier it is far from trivial to create widgets. Imagine something as common as a window (called dialog in jQuery UI speak). It has to change its position if the user clicks on the title and moves the mouse. Or it has to be resizable which means it has to respond to clicking and dragging the border in complex ways. jQuery UI provides an additional Javascript file delivering such widget functionality. Just include jQuery and jQuery UI and you can easily add such widgets yourself. You should not try to skip learning jQuery though. Oh, and what's also neat: you can assemble your customized jQuery UI package containing just the widgets you need to make the Javascript file as small as possible. And there's more like you can theme your widgets with colors and graphics.
Although there are many quality widgets in jQuery UI already you will surely miss more. Other Javascript libraries like YUI (Yahoo User Interface) offer much more. But I personally like jQuery's syntax better. And I admire the jQuery UI developers for having taken a good set of plugins and documenting and testing them thoroughly and giving them a common API.
My personal background
I'm moderately competent in regard to jQuery and have been using it in several web sites already. Honestly I've played with UI widgets already but do not use them on production websites yet. jQuery UI has been around for quite a while and at first the widgets were very buggy. But with version 1.6 (and the updated current 1.8 version) the UI widgets by be safely relied upon. For most of my web sites I just like to add some interactive elements with jQuery. And on a large workflow web site project I currently toy with Javascript frameworks like Qooxdoo and ExtJS because they deliver way more widgets that you would need to provide a desktop-application-feeling like menus, trees, grids (tables with data) and toolbars.
The book
After some basics about jQuery let's start with the actual book review. The book is 420-pages long and explains all the widgets of jQuery UI 1.6 in detail. The structure of the book is rather simple - every widget gets a dedicated chapter. The first chapter deals with downloading jQuery and jQuery UI, setting up a development environment theming (the Theme roller rocks if you just need a theme with your favorite color scheme) and information on the licensing. It's worth repeating that jQuery UI is completely free. Not just free as in GPL which would force you to distribute your web site's sources as GPL, too. In addition it uses the MIT license that gives you all the freedom you need even when you intend to make money with your work.
The following chapters each deal with a certain widget component. Tabs are the first widget to be dealt with in chapter 2. These split several DIV areas into tabs just like in Firefox. Clicking on a tab changes the view to show another DIV. The DIVs are just hidden so clicking on a different tab does not mean your browser has to load content from the web server but instead just hides the old DIV and displays the new content. You can dynamically add or remove tabs, use animations or use AJAX backend calls to load content into a tab.
Chapter 3 deals with a functionally similar widget called Accordion. It looks different and behaves like the musical instrument of the same name. If you click on the title of one DIV then all other DIVs are disappearing with an animation and the desired DIVs is displayed with an animation.
If you are missing a neat window to display information to the user or ask simple yes/no questions then instead of using the alert() and confirm() functions in Javascript you can use the Dialog widget explained in chapter 4. Dialogs look like simple windows in a desktop application. From my own experiments I would not put too much into dialogs though. Don't try to link to other content for example because it would not get shown inside the dialog box but instead load a new page unless you use jQuery to replace just the content of the dialog. Dialogs use other parts of the UI library like drag'n'drop and resizing.
A Slider (chapter 5) is something that I had little use for so far. Use sliders to let the user select a value in a certain range by dragging a handle. You may have seen those in online shops to select a price range of products to display. Sliders can be fixed to certain steps or get two handles to define a minimum and maximum.
Something more common and useful are Date Picker (chapter 6) widgets. They show a calendar sheet and let the use select a date with the mouse. The widget can show weekends in different colors, allows to change month and year and deals with locale settings (e.g. in Germany the week starts on monday and the months are "Januar", "Februar", "März",…). Date pickers are best added to text input fields where the user supposed to enter a date. Once the input field gets the focus the calendar sheet will appear.
My favorite functionality (not quite a widget for itself) is the Auto-Complete feature (chapter 6). It exists as a standalone plugin for jQuery and has been packed into jQuery UI. This is a feature I have always wanted to have since I first saw it. It does lookups in the background while you type in a text input form field and makes suggestions. It's both unobtrusive and really useful. This chapter shows different usages because in real life you will need something unique to your web site.
Drag and drop is a more generic low-level functionality explained in great detail in chapter 8. Make any DIV element draggable which allows it to be moved around with the mouse within defined ranges. I could imagine to have this functionality to create maps by placing elements freely on a page. By adding a drop zone such elements can be moved to a certain zone to trigger further actions. A good example is an online shop where you would drag a product in the shopping cart zone to buy it. The author showed a good sense of humor by using this feature to create a jQuery-based maze. It's not quite what I had used it for but is a nice example nonetheless.
Sometimes it's useful to have the user interactively change the size of an element on a web page. Like the editor window I am just writing this review in. Then you can make the borders of an element interactively and respond to mouse click-and-drag actions by dynamically resizing it. Chapter 9 deals with this Resize functionality. The author eben shows how to combine resizables with tabs in this chapter.
On some occassions a user should select objects from a web page with a mouse. This is accomplished by the Selecting feature (chapter 10). This is nice but honestly I found it not very intuitive for the user to deal with. You can draw boxes to select all objects within the box. But drawing needs to start within the respective area. If you start drawing the rectangle from outside the selectable area then just the text and images on the web page will be selected. It's possible to select multiple objects by holding Ctrl and clicking on objects. Maybe it makes sense in an image gallery. And in fact the author extensively deals with an image gallery on 18 pages here.
Sorting (chapter 11) is a functionality that works more intuitive. It allows to move objects to other places in a list or grid. I once felt the urge to write a todo list web application. Using sorting would allow the user to move a todo item up or down the list. A dashboard/portal could offer different sections that the user can arrange freely by dragging them. The author creates a fully-working dashboard in this chapter on 16 pages. In the end sorting works similar to drag'n'drop but the target sections to drop elements to are pre-defined.
UI effects are the topic of the final chapter 12. Many widgets can use animations for their effects. Like tabs that fade out one DIV and fade in the next DIV. jQuery UI comes with roughly a dozen different animations to choose from. There are many interesting effects like highlighting to draw the user's attention to a certain element. The book helped me understand what the transfer effect is useful for. It moves and resizes a rectangle showing the outline of a starting object and transforms into the outline of the destination object. It can be used to show that a product gets moved into she shopping cart. I wonder why the UI page didn't tell me. :) I thought that this chapter would be boring because how would you describe animations in a book. But interestingly the author shows snapshots of the animation happening and describes what exactly happens. Of course playing with the effects on the jQuery UI home page is also useful.
So much for what's dealt with in each chapter. Do you wonder what information the book provides that you don't find on the web site and vice versa? Obviously the web site can show you the widgets and effects in action which is impossible in a printed book. But many readers prefer a dead tree in their hands instead of reading all the introductory material on the screen. If you are like me spending one hour of your time in the public transport then a book gives you a good chance to get acquainted to the basics without being tempted to try to use the software on your computer too early and getting frustrated.
That aspect aside I found that the author spent a lot of time dealing with each plugin. The existing documentation of jQuery and jQuery UI is very good so I wondered what extra the book would offer. The documentation of the arguments used by each plugin are just copied of course. But the author really jazzed up the documentation by real-life examples. The jQuery UI home page shows how each plugin works and I recommend spending some time there to play around. But once you start building real-life applications you will be grateful for more complex examples instead of just the API.
Conclusion
You can surely live without the book and just read the free online reference. But if you haven't dealt much with other Javascript libraries offering widgets and need some hands-on help then I suggest you order the book and while waiting for its delivery polish your overall Javascript and jQuery skills. I found it interesting to see how other people use jQuery and jQuery UI because sometimes I get the feeling I'm on the wrong track to accomplish something. It doesn't matter too much that the book describes a certain version. I don't expect any major changes in the existing widgets and you will learn more than just which arguments you can pass to jQuery UI.
The contents of this web site is Copyright © 2000-2011 Christoph Haas - Impressum/Imprints - Donations welcome
Drupal theme by Kiwi Themes.
Recent comments
22 hours 44 min ago
1 day 33 min ago
1 day 42 min ago
1 day 22 hours ago
3 days 21 hours ago
5 days 11 hours ago
6 days 7 hours ago
6 days 9 hours ago
1 week 1 hour ago
1 week 2 hours ago