odern browsers have greatly improved their performances, development tools, and compatibility. Even though most web sites still adhere to the page paradigm, rendering their content as it would appear in a newspaper or book, browsers can support highly interactive applications that rival traditional desktop apps.
Historically, developers who wanted to support complex or highly visual application interactions had to choose between desktop applications that were local to the user’s PC and ones built on top of browser plugins like Flash. Today, JavaScript has advanced enough to support this class of applications as well. Powerful JavaScript libraries provide abstractions from browser incompatibilities and low-level implementation details. They make designing interfaces that behave in a way familiar to the user (for example, drag-and-drop, selection and repositioning of visual items, panning, zooming, mouse gestures, and so on) simple.
This article demonstrates how to leverage this power using JavaScript and jQuery to deliver a new class of web applications. jQuery is the popular JavaScript library that abstracts away browser incompatibilities and offers a programmer-friendly interface based on CSS selectors and methods chaining. Included with the article are an example that mimics a full-featured desktop application (see this YouTube video) and the full source code.
For an explanation of the benefits of choosing JavaScript as a foundation for your web applications, see my previous DevX article.
jQuery in a Nutshell
To use jQuery in your web applications, you need only include one JavaScript file in your HTML code. You can then manipulate the Document Object Model (DOM), use CSS selectors to identify parts of the page that you want to affect, and apply mutator methods that modify all the matching elements. The following listing is a basic example that changes the background color of the first paragraph of a web page.
The first paragraph.
The second paragraph.
The $() function is a handy shortcut to trigger jQuery-driven manipulations. The above listing uses it twice. First, it’s used to bind an anonymous function to the document.ready() event. This is how the code triggers the execution of jQuery code once the page has finished loading. Then it’s used along with the p:first CSS selector to isolate the first paragraph. The css() mutator method changes its background color.
jQuery offers many more methods to transform the DOM and bind callbacks to all possible browser events. Refer to this introductory article if you want to explore jQuery in greater detail.
jQuery is highly extensible and, for the purposes of this article, the example uses two additions to the bare library: jQuery UI, a set of specialized functions to deal with visual interactions, and the mousewheel plugin, which allows an app to react to scrolling events generated by the mouse wheel.
The Setting
To keep the code simple, you will start from the source code shown in Listing 1. It acts as a mockup for a complete application; it is a simple web page that contains four DIVs, representing the visual items with which the user interacts. Figure 1 shows how it appears.
The required code is nothing more than a composition of the snippets you have seen so far. For an extra bit of fun, a Shuffle button randomly rearranges the cards on the dashboard with a smooth animation via the animate() method:
$('#shuffleCards').click(function() { // reset panning $('#universe').css('top', 0). css('left', 0). css('bottom', 0). css('right', 0); var maxWidth = Math.round($('#container').width()*0.3) ; var maxHeight = Math.round($('#container').height()*0.3); $('.model').each(function(model) { var top = Math.round( $('#container').height() / 3 + Math.random()*maxHeight*2 - maxHeight); var left = Math.round( $('#container').width() / 3 + Math.random()*maxWidth*2 - maxWidth); var movement = {'top': top, 'left': left}; $(this).animate(movement, 1000); }); });Much More to Explore
You have learned how to transform a static web page into an appealing interactive experience. You leveraged JavaScript and jQuery DOM manipulation functions to mimic complex interactions that are traditionally reserved for heavier client applications. Now these interactions can live in the lightweight environment of a browser window as well.
Many other features are left to explore, such as mouse gestures and keyboard events binding. A natural next step would be to evolve the demo interface into a complete desktop and layout manager backed by a model that supports real-time filtering, layout, data mutations, and interfacing with external data providers. For this purpose, I started an open-source project, Rhizosphere, for creating the ultimate JavaScript interactive experience and innovative data visualizations.
