Using Low Pro for jQuery
Recently I have been getting a real buzz out of developing with jQuery. I've been using the library since 2006, releasing sporadic bits of code. In April of this year, I released the third revision of my most complex plugin, jMaps, and updated several other plugins, which are available in my mercurial repository.
This was also the same month I discovered a new plugin which has dramatically changed how I develop applications with jQuery. The plugin in question is Dan Webb's Low Pro for jQuery, a port of the plugin of the same name for Prototype.
What is Low Pro?
So what is Low Pro? It's a plugin that provides a way of making more object-oriented JavaScript through event delegation. jQuery's plugin architecture provides a really simple way of extending the core functionality, but there is no easy way of making macros of code that do several types of events on one element. Until now!
Probably the simplest way to explain how Low Pro works is to build a quick demonstration. Sometimes I find that too many tutorials out there expect prior knowledge, so with that in mind, I will try to make the tutorial as simple as possible. However, this example does use another couple of plugins that are outside the scope of this tutorial:
- Live Query - Low Pro uses this plugin to make binding to dynamic elements in the DOM easier.
- jQuery Validation - We'll use this plugin to show how we can bind other plugin functions to events.
Both these plugins already have excellent documentation, so if you wish to extend this example, please check them out.
Example 1: Creating a re-usable registration form
For this example we'll build a simple user registration form. This is something that is common enough on the web, but a nice advantage of this example is that it can be used over and over again with little or no modification. Hopefully once you have learned this pattern, you will be able to see lots of other applications that can be reused over and over again in the same fashion.
Our first step is to create our basic form:
[html]< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Now, we create our JavaScript file called reg-form.js. In here, we will create our class that we'll attach to the form. Inside this class, we'll create some functions that trigger on specific events. Every class created with Low Pro takes the form of $.klass({...});. Inside the curly braces, we use JavaScript prototype nature to create a pseudo-class. We will call our example RegisterForm.
If you have developed in languages like PHP, Python, or Java, you've probably seen something like this before. This first function, initialize, is a reserved function in Low Pro that accepts one parameter—an options parameter (we'll discuss that later). This function is always called whenever you bind a class to an element. Because it does not require any event to trigger, it is very useful for setting up initial data or events on dynamic DOM elements.
Validation
The first thing we'll do is create our JavaScript validation rules. This tutorial does not cover the creation of these rules; however, they should be reasonably understandable. If you would like more information, please check out the excellent documentation.
[js]RegisterForm = $.klass({ initialize : function(options) { this.element.validate({ rules: { username: { required: true, minlength: 4 }, email : { required: true, email: true }, password2 : { equalTo: "#password1" } }, messages : { username : { required: 'Your username is required', minlength: 'The minimum number of characters is 4' }, email : { required: 'You must enter your email', email: 'You must enter a valid email' }, password2 : { equalTo: 'Your passwords must match' } } }); } });[/js]Notice that I am using this.element instead of $('#lowpro-form') inside the function. Low Pro provides this handy alias so you always work with the correct object. If you are going to be writing a complex function, it's always a good idea within the function to assign it to another variable.
But this code isn't actually doing anything yet. This is because we now need to bind the class to the form. Here is where we go back to the good old jQuery we know and love. Below the class, put this in the file:
[js]$(document).ready(function(){ $('#lowpro-form').attach(RegisterForm); });[/js]Now, open up the page in your browser and start to type into the fields. You should start to see the validation rules apply to the fields. Congratulations, you've written your first re-usable class with Low Pro!
Enhancements
Now that we have our validation rules, let's start to make the form a bit more sexy. First, something simple. Let's make sure that the first field (the username field) is always selected first, so the user can easily tab down the form. After the validation method inside the initalize function, add this:
[js]$('#username').focus();[/js]Refresh the page, and your username field should now get the focus.
Now let's introduce another event into the mix. When the user submits the form, we want to let the user know that it's being sent to the server. To do this, we could notify the user by changing the text on the button from "Register" to "Submitting".
[js]RegisterForm = $.klass({ initialize : function(options) { ... }, onsubmit : function() { $form = this.element; $('.register').val('Submitting'); /* If your using Ajax it goes in here */ return false; } });[/js]So there we have it: A reusable, fully functional Ajax registration form with validation. You can check out a demo here and also grab the source code of this example from my repository.
One final thing I should touch on in this first tutorial is the initialize function's options parameter. When attaching any Low Pro class, the initialize function accepts an object containing any options you want to pass into the function:
[js]$('#myform').attach(MyFunction, {foo:'moo', bar:2}[/js]In our above example, we'll add a tag to display a message of the day. In the HTML, create a div with a class of motd. Next, add the following code into the initalize function:
Now, when we attach our class to the form, we use the following:
[js]$(document).ready(function(){ $('#lowpro-form').attach(RegisterForm, {motd: 'jQuery Rocks!'}); });[/js]When you now refresh the form, you should see a message on the screen.
Well, that wraps it up for this tutorial. I hope I've given you a small idea of the power that Low Pro contains. In conjunction with LiveQuery, you can really create some dynamic and interesting applications.
If anyone would be interested in more tutorials like this, then please leave a comment and let me know what you think.
