Dynamic Websites with jQuery and extJS

Is your site too plain? Do you want to add a bit of spark or flair to the visual appearance of your site? Maybe you’re looking for some creative ways to work with menus or display contextual information. Perhaps pop-up blockers have made you rethink how to design your site, but you dislike constant page reloads as visitors navigate your site, and you’re looking for a solution.
All of these concerns can be addressed by using JavaScript to make your site more dynamic, inviting, and engaging.
In this article, I’ll introduce you to two tools that can help you transform a plain site into a modern, good-looking and engaging site. The disadvantage, which I’ll tell you up front, is that your visitor must have a JavaScript-capable browser. This does rule out some older mobile browsers, but even mobile devices are becoming more widely JavaScript capable (e.g., Opera Mini).

In our example, we’ll start out with a simple site: a resume or curriculum vitae for our well-beloved John Doe. Such a dynamic site might be considered overkill for a simple resume page, but consider if John Doe is a web designer. What would a plain, uninviting site say about him?
For our starting point, please see our first example:
http://cmichaelis.whsites.net/whblog/jquery-extjs-1/example1.html
In addition to using tables, which are generally frowned upon now, it lacks any paragraph (<p>) tags or any real styling information. All of the information is displayed at once, with no personal feel and no interactivity. While this is generally what you want for a resume, since it’s printable and contains all information in one place, assume for a moment that this was a site detailing a product you’ve begun selling, or a documentation interface. This would be too much information for a potential customer to take in all at once, and is somewhat bland.
Now, take a look at our second example:
http://cmichaelis.whsites.net/whblog/jquery-extjs-1/example2
Much better! It could still use some graphic embellishment, but is a great start to improving the site. There are all sorts of possibilities here for layout and functionality that you can use to make the site more usable and more modern.
This example is adapted from the ‘complex’ example included in the extJS distribution. extJS (http://extjs.com/) is a JavaScript library designed to help develop web sites that look much better than a typical web site, even resembling desktop applications. In our example, we also used jQuery (http://jquery.com/), a somewhat smaller JavaScript library which is intended to vastly simplify common web programming tasks. We’ll address each library in turn, and then explain how the components of the second example work together. In future blog postings, I’ll be covering some of the unique functionality of each of these two libraries in more depth – there is far too much there to explore in one blog posting! Hopefully this introduction will whet your appetite for more.
extJS
extJS is a complete application framework for developing web sites. Many JavaScript coders will caution you against using monolithic third-party libraries, stating that you never know what’s actually in them and whether it’s secure. I stand by the idea that you should always understand what you’re putting up on your site before you use it. Notwithstanding this caution, extJS seems to be a powerful, well written, and secure framework with a great community behind it.
It includes dozens of components somewhat like “controls”, for those familiar with desktop application development, which enable rapid construction. The library features grid components, tab panels, window managers, tree layout managers, checkbox managers, toolbar systems and menu layout systems, data grids that tie into databases, and dozens of other handy items. All of them are themable and flexible for your needs!
jQuery
jQuery is a tool that allows you to accomplish more, with less coding and less time. For instance, we frequently need to transfer data without a refresh to make a smooth interface. Suppose that you had a div element called “content”, and you wanted to have a link update it with more information, without a page refresh. This could be done like:
<div id="content">Click <a href="javascript:void(0)" id="showmorelink">here</a> for more!</div>
<script language="text/javascript">
$('#showmorelink').click(function() { $('#content').load('/secondpage.html'); });
</script>
This small code segment illustrates a few of the interesting features of jQuery. Events can be tied to objects in your document easily – we assigned an inline function to the click event of the “showmorelink” anchor with one quick statement. Frequently, setup steps like this are done in the $(document).ready event – this event is called when the page has loaded fully, including all images.
The $(‘#content’) statement is referred to as a “selector”, meaning that it grabs one or more document elements so that you can work on it. We then use the function load() to replace the HTML of the “content” div element. We could also have used .after() to place new content after that div.
A selector can grab multiple elements, which is particularly useful when working with CSS classes. The pound symbol (#) indicates that you’re selecting by an ID; you can also select by CSS class by using a period. Something like $(‘.popupimage’).hide(‘fast’); could be used to select every item in the document with the class popupimage and hide it with a “fast” animation. This is useful, for instance, with an image gallery full of pop-up images.
jQuery can be used to accelerate development dramatically, as well as increasing readability and maintainability.
Bringing it all together: Example 2
Our second example started with the “complex” example in the extJS distribution (http://extjs.com/products/extjs/download.php?dl=extjs22). We removed a few pieces that weren’t needed, and added a couple of small items.
First off in the page, we load the extJS libraries:
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
Next, we get jQuery libraries:
<script type="text/javascript" src="js/jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.simple.tree.js"></script>
Finally, we pick up some stylesheets:
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.simple.tree.css" />
We now have everything we need to work with extJS and jQuery here. Now, we enter a large section of JavaScript code. First, we have:
var tabpanel;
Setting this as a global variable (outside of a function definition) allows us to refer to the tab panel collection from any function or code segment, which is handy to allow links to add tabs.
Next, we set up the extJS environment. Here, we configure the tab panel with an initial item – the welcome page – and attach it to a particular content element in the document with the variable “contentEl”. Next, we set up the viewport component, which defines a north, south, east and west section. We give each a height and width, and associate each with a content element.
The next section is recognizable as jQuery code – we set up a document ready function, and use this event to initialize the navigation tree seen in the left of the web page. This is a jQuery plug-in, by Peter Panov and the IKEEN group, released under an open source (BSD) license. It makes it trivial to create tree-style menus. Here, we just indicate the element that needs to be turned into a tree view, and it takes care of it. The most important part of this code segment is the afterClick event, which is assigned an inline function to load an HTML file of the same name as the node that was clicked on, putting the contents into the “welcome” tab.
Next in the JavaScript code section is a function called addPanel. This will just add a new tab to our tab panel in the center of the web page, and load it with data from the specified location. Due to browser security restrictions, this can only be a page from the same web domain as the current page you’re viewing, so when we do load content with this we’ll load “loadpage.php”, which will load the actual content we care about from the remote server for us (after validating that the passed location is allowed). Verification is important to prevent abuse and “phishing”.
Last in the page, we define all of the div elements that were attached to the various extJS viewport elements. We also define an unordered list which will become our lefthand navigation menu – the jQuery TreeView plug-in component will convert these lists into treeview menu items where, as mentioned earlier, each corresponds to an html file. Examining the first, objective.html, we see nothing particularly special except for the link to Wikipedia:
<a href="javascript:void(0);" onclick="javascript:addPanel('loadpage.php?a=http://en.wikipedia.org/wiki/Goal');">the Wikipedia page for Goal</a>
Here, the OnClick event calls the previously defined addPanel function, passing it through the local loadpage.php script to get past the browser security restraints. Again, ensure that you validate addresses passing through here for security purposes.
This is a simple example, clearly beyond the needs of a resume – but the techniques described here are very useful for building many different types of dynamic websites. In future posts, we’ll be digging deeper into the individual capabilities of jQuery and extJS.