In the following sections, we will discuss how to use jQuery and jQuery UI to develop more
responsive and interactive user interfaces. We will also discuss some commonly used jQuery plug-ins for
specific purposes, such as rich-text editing support, and discuss some grid-based components for
browsing data.
Introducing jQuery and jQuery UI
jQuery (http://jquery.org) is one of the most popular JavaScript libraries being used for web frontend
development. jQuery provides comprehensive support for main features including a robust "selector"
syntax for selecting DOM elements within the document, a sophisticated event model, powerful Ajax
support, and so on.
Built on top of jQuery, the jQuery UI library (http://jqueryui.com) provides a rich set of widgets and
effects. Main features include widgets for commonly used user interface components (a date picker,
autocomplete, accordion, and so on), drag and drop, effects and animation, theming, and so on.
There also are a lot of jQuery plug-ins developed by the jQuery community for specific purposes,
and we will discuss two of them in this chapter.
What we cover here only scratches the surface of jQuery. For more details on using jQuery, we
recommend the books jQuery Recipes: A Problem-Solution Approach (Apress, 2010) and jQuery in Action,
Second Edition (Manning, 2010).
Enable jQuery and jQuery UI in a View
To be able to use jQuery and jQuery UI components in our view, we need to include the required style
sheets and JavaScript files.
If you read the section "Spring MVC Project Structure Overview" earlier in this chapter, the required
files should have been already copied into the project. The main files that we need to include in our view
are as follows:
/src/main/webapp/scripts/jquery-1.7.1.js: This is the core jQuery JavaScript
·
library. The version we use in this chapter is 1.7.1. Note that it's the full source
version. In production, you should use the minified version (that is, jquery-
1.7.1.min.js), which is optimized and compressed to improve download and
execution performance.
/src/main/webapp/scripts/jquery-ui-1.8.16.custom.min.js: This is the jQuery
·
UI library bundled with a theme style sheet that can be customized and
downloaded from the jQuery UI Themeroller page
Note that it's the minified version of JavaScript.
/src/main/webapp/styles/custom-theme/jquery-ui-1.8.16.custom.css: This is the
·
style sheet for the custom theme that will be used by jQuery UI for theming
support.
To include the previous files, we only need to include them in our template page (i.e.,
/layouts/default.jspx). Listing 17-41 shows the code snippet that needs to be added to the page.
Listing 17-41. Include jQuery in Template Page
<!-- Other code omitted -->
Search WWH :
