Chapter 10. jQuery UI: Extreme Form Makeover

The Web lives and dies by users and their data. Collecting data from users is a big business and can be a time-consuming challenge for a web developer. You’ve seen how jQuery can help make Ajax, PHP, and MySQL web apps work more effectively. Now let’s look at how jQuery can help us build the user interface for the forms that collect data from users. Along the way, you’ll get a healthy dose of jQuery UI, the official user interface library for jQuery.

Cryptozoologists.org needs a makeover

Dr. Pattersby and Dr. Gimli are dedicated to collecting as much cryptid sighting data as possible from users around the world. Their website, cryptozoologists.org, is revered by professional and amateur cryptozoologists worldwide. The good doctors have another gig for you: update their very outdated Cryptid Sightings form.

Pimp your HTML form

Below is a mockup of what our cryptozoologists want the new form to look like, along with a few extra notes.

Brain Power

The crytozoologists have asked for a tall order here. They want you to build a user interface like you would find in a desktop application. What do you think jQuery offers that can accomplish this?

Frank: I saw it. The current form is an HTML form, but HTML and CSS aren’t going to cut it for the new form the cryptozoologists want.

Jim: Tell me about it. Have you ever tried to style form elements with CSS? I’d rather have a root canal.

Frank: Yeah, and jQuery...well, I haven’t seen anything in jQuery that will help us build interface components like that.

Joe: We’ve got to figure this out, guys. Folks are used to fancy components like this, so we’re going to have to find a way to build them.

Frank: We’ll probably need a combination of JavaScript, jQuery, and CSS to pull this one off.

Jim: That’s a lot of logic to write. Just the calendar pop up they want will be lines and lines of code and a bunch of complex CSS.

Joe: Hmmm. There may be a jQuery plug-in for this kind of stuff, actually.

Jim: A plug-in, right! We used one a couple chapters back to create tabs for the Bit to Byte race results page. So there’s more to plug-ins, huh?

Joe: Yeah, if jQuery doesn’t offer something a developer needs, that developer can build a plug-in and release it to the jQuery community for it to use. This saves other developers tons of hours.

Jim: So some developer or dev team out there may have already dealt with this?

Frank: That would really save us some headaches.

Joe: Let’s go poke around out at jQuery.com and see what we can find.

Save coding headaches (and time) with jQuery UI

Fortunately for developers everywhere, jQuery has an official library of user interface plug-ins for just this kind of project. That library is called jQuery UI, and it offers three main types of plug-ins for the jQuery core: effects, interactions, and widgets.

Effects plug-ins	Interaction plug-ins	Widget plug-ins
jQuery UI extends jQuery by adding more effects. Make your elements bounce, explode, pulsate, or shake. jQuery UIs also includes easing functions, complex mathematical operations that make animations look more realistic.	Interactions add more complex behavior to web apps. You can enable users to interact with elements by making those elements draggable, droppable, or sortable, just to name a few of the options.	A web widget is a self-contained component that adds functionality to your web app. Widgets save you tons of coding time and complexity while creating usable and responsive user interface elements. Note We’re going to focus mostly on widgets for our UI work in this chapter.

jQuery offers a plug-in architecture that allows web developers to extend (or add onto) the core jQuery library.

Test Drive

Try out some jQuery UI effects, interactions, and widgets by visiting the following URLs and doing what the instructions say.

URL	Instructions
http://jqueryui.com/demos/animate/#default	Click the Toggle Effect button.
http://jqueryui.com/demos/effect/#default.html	Choose an effect from the drop-down list. Then click Run Effect.
http://jqueryui.com/demos/draggable/#default	Click and hold on the box that says “Drag me around.” Then, drag your mouse to drag the box within the screen area provided.
http://jqueryui.com/demos/accordion/#default	Click on the different sections to see the accordion expand and contract.
http://jqueryui.com/demos/dialog/#animated	Click the Open Dialog button to see a custom jQuery UI dialog box. A lot better than a boring, old JavaScript alert box, no?

Who Does What?

Match each jQuery UI plug-in to what type of plug-in it is and what it does. Hint: If you’re not sure, spend some more time poking around the demo site from the Test Drive on the facing page.

Puff	Interaction: Makes a DOM element a target for draggable elements.
Autocomplete	Widget: Displays the current percentage of completion for some event.
Droppable	Effect: Makes an element appear to expand and dissipate into transparency, like smoke.
Explode	Widget: Provides a list of possible values when a user types into an input field.
Sortable	Effect: Makes an element appear to slide up or down like a window treatment.
Progressbar	Widget: Creates stacked and collapsible areas to organize web content.
Resizable	Effect: Makes an element appear to break into pieces and spread out in several directions.
Blind	Interaction: Makes an element sortable by dragging.
Accordion	Interaction: Gives an element draggable handles that allow a user to scale it.

Who Does What? Solution

Match each jQuery UI plug-in to what type of plug-in it is and what it does.

Do this!

Before we can do anything with jQuery UI, we need to configure the components we want, choose a theme, and download a copy of it. Follow the steps below:

1. Point your browser to the jQuery UI download page:

   http://jqueryui.com/download

2. Choose the components you want to download.

   

3. Choose a theme for your download

   

   One of the best things about jQuery UI are its themes. The dev team for jQuery UI included all of the CSS for making a nice-looking interface. You can even create your own theme with jQuery UI’s “theme roller.” For a gallery of all the jQuery UI themes, visit the following URL:

   http://jqueryui.com/themeroller/#themeGallery

4. Press the Download button.

   

You just need to unzip the folder and include the library in a project folder.

Turn the page, and we’ll have a look inside jQuery UI.

What’s inside the jQuery UI package

After downloading and unzipping jQuery, you’ll find that it’s structured like this:

We’ve included the jQuery UI folder in the code folder you downloaded at the beginning of the book. You’ll find it in the end folder inside the ch10 folder.

Our project checklist

jQuery UI does a lot for you, but we’ve still got quite a few items to tackle in order to build the new form. Here’s a checklist of what we need to do:

	Build a datepicker for users to enter the date of the sighting.
	Build more engaging radio buttons for users to choose the creature type.
	Build number-entry sliders for users to enter distance from creature, creature weight, creature height, latitude, and longitude.
	Build a color mixer interface component for the user to enter creature color.
	Build a nicer-looking submit button for the sightings form.

Build a date picker into the sightings form

It’s amazing how easy it is to put a jQuery UI widget into an HTML form. Let’s start with the calendar datepicker:

1. Create a link to the jQuery UI CSS file:

   <link type="text/css" href="jquery-ui-1.8.16.custom/css/sunny/
   jquery-ui-1.8.16.custom.css" rel="stylesheet" />

2. Create a <script> tag that points to jQuery UI.

   <script src="jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.
   custom.min.js"></script>

3. Take a plain old HTML input field.

   

4. Add an ID of datepicker to the <input> tag.

   <input type="text" name="sighting_date" id="datepicker">

5. Create a JavaScript file and put the following code between the curly braces of the $(document).ready(function(){}.

   $('#datepicker').datepicker();

6. Open the file in your favorite browser and click into the input field.

   

jQuery UI behind the scenes

It may seem a bit like magic, but jQuery UI is really just a lot of well-designed and well-written jQuery code—code that you didn’t have to write. Let’s take a closer look at how it works.

Don’t worry, you’ve got options.

Let’s check them out.

Widgets have customizable options

If you dig into the datepicker widget, you’ll find that it’s got a lot of rich features and options you can configure.

Customize the datepicker with options

Because jQuery UI is built on jQuery, you don’t have to write much code to customize the datepicker widget to fit your needs. At the time of this writing, the datepicker has 46 different options you can set.

Exercise

Write the code that will let the user change both the month and the year of the datepicker widget using a drop-down. Hint: Put a comma between the options when you’re setting more than one.

_______________________________________________________________

_______________________________________________________________

_______________________________________________________________

Exercise Solution

Write the code that will let the user change both the month and the year of the datepicker widget using a drop-down. Hint: Put a comma between the options when you’re setting more than one.

$(‘#datepicker’).datepicker({____________________________________
            changeMonth: true, changeYear: true__________________
});_____________________________________________________________

Ready Bake Code

Find the file called sightings_begin.html in the begin folder under ch10. Save it as sightings_end.html into the end folder for Chapter 10. Add the bolded code below to your sightings_end.html and my_scripts.js files.

Test Drive

After entering the code from the previous page, open sightings_end.html in your favorite browser to test the datepicker widget. Click the “next” and “previous” buttons and the month and year drop-down lists to make sure everything works.

The datepicker works!

Check it off

Checklist item 1 is done. Let’s move on to checklist item 2.

	1.	Build a datepicker for users to enter the date of the sighting.
	2.	Build more engaging radio buttons for users to choose the creature type.
	3.	Build number-entry sliders for users to enter distance from creature, creature weight, creature height, latitude, and longitude.
	4.	Build a color mixer interface component for the user to enter creature color.
	5.	Build a nicer-looking submit button for the sightings form.

Styling up your buttons

What does “more engaging” really mean? It’s mostly a question of style: make a better-looking button, and people are going to want to click it. One super-useful widget in the jQuery UI library is the button widget. The button widget offers a button method to help you make more appealing form elements like submit buttons, radio buttons, and checkboxes.

Grouping button widgets

For building a grouped set of buttons, jQuery UI offers the buttonset method, which turns individual button elements into a group by referencing the container element for that group.

jQuery UI Magnets

Put the code magnets in proper order to create a set of buttons for users to select the creature type that they saw. We put a few in for you.

jQuery UI Magnets Solution

Now you’ve got a nice-looking set of buttons that match the overall theme for your form.

Test Drive

Add the lines of code above to your sightings_end.html and my_scripts.js file. Then, open the page up in your favorite browser to make sure everything’s working.

Wow, that was pretty easy. What’s next on our list for the form?

	1.	Build a datepicker for users to enter the date of the sighting.
	2.	Build more engaging radio buttons for users to choose the creature type.
	3.	Build number-entry sliders for users to enter distance from creature, creature weight, creature height, latitude, and longitude.
	4.	Build a color mixer interface component for the user to enter creature color.
	5.	Build a nicer-looking submit button for the sightings form.

Control numerical entries with a slider

The plug-in for the jQuery UI slider gives you the power to build a slider interface that users can control with their mouse or keyboard. Sliders also help you control the numbers that users enter. As you’ve already seen, building widgets is a snap once you have the jQuery UI library. Building a slider widget is just as easy.

Sliders offer a bunch of customization options too. Let’s say we need the user to enter a set of numbers. The lowest value we want users to enter is 0; the maximum value is 100. And we want the users to enter values in increments of 5. Here’s how we can do that with the slider widget’s options:

We have to connect the slider with one of the slider widget’s event handlers.

We’ve seen some widget options, but we haven’t yet explored another powerful feature of jQuery UI. Many jQuery components offer event handlers, and the slider is one of them. At the time of this writing, jQuery UI’s slider widget offers five event handlers: create, start, slide, change, and stop. To connect the slider to a form input, let’s try out the slide event handler.

The HTML for a slider widget

The jQuery script for a slider widget

Long Exercise

Fill in the blanks for the code for each input field the cryptozoologists want. They’ve left some notes on the slider options for you to set.

Note

Distance from Creature (in ft.):

Starting value should be 0.

Minimum distance should be 0.

Maximum distance should be 500.

Use increments of 10 feet.

Note

Creature Weight (in lbs.):

Starting value should be 0,

Minimum weight should be 0.

Maximum weight should be 5,000.

Use increments of 5 pounds.

Note

Creature Height (in ft.):

Starting value should be 0.

Minimum height should be 0.

Maximum height should be 20.

Use increments of 1 foot.

Long Exercise Solution

Fill in the blanks for the code for each input field the cryptozoologists want. They’ve left some notes on the slider options for you to set.

Note

Distance from Creature (in ft.):

Starting value should be 0.

Minimum distance should be 0.

Maximum distance should be 500.

Use increments of 10 feet.

Note

Creature Weight (in lbs.):

Starting value should be 0.

Minimum weight should be 0.

Maximum weight should be 5,000.

Use increments of 5 pounds.

Note

Creature Height (in ft.):

Starting value should be 0.

Minimum height should be 0.

Maximum height should be 20.

Use increments of 1 foot.

Test Drive

Add the code from the long exercise on the previous pages to your files. Then, open sightings_end.html in your favorite browser. Make sure to test the sliders using your mouse and keyboard (the left and right arrow keys should advance the slider by its increments).

You’ve got two more number sliders to build: latitude and longitude. Then you can check off another item from your project checklist!

jQuery UI has you covered there, too.

The slider widget can deal with negative numbers and decimal numbers. You can enter negative numbers as values, as minimums, and as maximums. Give that a try below to see it in action.

Sharpen your pencil

Fill in the jQuery code to make the sliders for latitude and longitude work. The latitude slider should have a range of –90 to 90 with increments of 0.00001. The longitude slider should have a range of –180 to 180 with increments of 0.00001.

Sharpen your pencil Solution

Fill in the jQuery code to make the sliders for latitude and longitude work. The latitude slider should have a range of –90 to 90 with increments of 0.00001. The longitude slider should have a range of –180 to 180 with increments of 0.00001.

So far, you’ve checked off quite a few items from the list:

	1.	Build a datepicker for users to enter the date of the sighting.
	2.	Build more engaging radio buttons for users to choose the creature type.
	3.	Build number-entry sliders for users to enter distance from creature, creature weight, creature height, latitude, and longitude.

What’s up next? Now you need to build the cryptozoologists an interface that will allow users to enter the color of the creature they saw by using sliders that represent red, green, and blue.

4.

Build a color mixer interface component for the user to enter creature color.

Computers mix color using red, green, and blue

The values of red, green, and blue each have a minimum of 0 and a maximum of 255. When each color is at its minimum—in other words, when red’s value is 0, green’s is 0, and blue’s is 0—you get black. When each color is at its maximum—when red’s value is 255, green’s is 255, and blue’s is 255—you get white.

Your sliders need to do the same

So you need to build three different sliders: one for red, one for green, and one for blue. Then you’ll combine each of the slider’s values to become one color. Let’s look at what we need each slider widget to do.

Ready Bake Code

Add the bolded code to your sightings_end.html and your form.css file. This will get your files set up to build the color picker.

Sharpen your pencil

The script below sets up the red, green, and blue color sliders. Read each line and think about what it might do based on what you already know about jQuery and jQuery UI. Then, write down what you think the code does. If you’re not sure what a line does, it’s perfectly OK to guess. We did one for you.

There are no Dumb Questions

Q:	Q: What’s all that CSS that comes with jQuery UI?
A:	A: The great thing about jQuery UI is that the developers have thought out a lot of the complex CSS so that you don’t have to. You can learn about the CSS by looking through the file in the jQuery UI package under jquery-ui-1.8.16.custom/css/sunny/jquery-ui-1.8.16.custom.css. To read more about those CSS classes, visit jQuery UI’s documentation at the following URL: http://jqueryui.com/docs/Theming/API.
Q:	Q: You said we can make our own theme for jQuery UI. How do I do that?
A:	A: You can easily create your own theme by using jQuery UI’s theme roller. First, point your browser to the theme roller application here: http://jqueryui.com/themeroller/ Then, click on the “Roll your own” tab. You’ll see settings for things like font, click states, drop shadows, and overlay screen. Make your own custom changes, and the UI elements will change to reflect your design settings. When you have your theme set how you want it, just click the Download Theme button, and you’ll be taken to the Build Your Download page to create your own jQuery UI package. If you want to save your theme for later, just bookmark that Build Your Download page.
Q:	Q: I don’t get the interactions widgets. What would I use those for?
A:	A: Interactions allow you to create the kind of interactive functionality you would find in a desktop application. Using the Draggable widgets, you can turn your elements into draggable components. The Droppable widget can be a target for a droppable widget. The Resizable widget turns your element into a scalable object whose size you can change by dragging on its corner, its right border, or its bottom border. Selectables are widgets that turn your elements into selectable components. A site visitor can drag his mouse over those elements to select them just like he might select files on his desktop. Sortables are widgets that can be interactively reordered by the user.

Sharpen your pencil Solution

The script below sets up the red, green, and blue color sliders. Read each line and think about what it might do based on what you already know about jQuery and jQuery UI. Then, write down what you think the code does. If you’re not sure what a line does, it’s perfectly OK to guess. Here are our answers.

Build the refreshSwatch function

To finish our color mixer, we need a JavaScript function that will set and refresh the swatch. Here’s a skeleton version of that function, along with some of the key questions to consider before fleshing it out to get it to do what you want.

Good catch! We could write a decimal-to-hexadecimal conversion function, or we could use the decimal values straight from the sliders.

Remember that the CSS background-color property allows us to specify colors like this:

But that’s just a hint for one of the questions. To write the whole function, you’ll have to do a little brain workout.

Exercise

Fill in the blank lines of code to finish off the refreshSwatch function.

function refreshSwatch() {
      var red = ________________________________________________________________
      var green = ______________________________________________________________
      var blue = _______________________________________________________________
      var my_rgb = _____________________________________________________________
      $( "#swatch" ). ________________________ ;
      $( "#red_val" ).val(red );
      $( "#blue_val" ).val( blue);
      $( "#green_val" ).val( green);
      $( "#color_val" ).val(my_rgb);
}

Exercise Solutions

Fill in the blank lines of code to finish off the refreshSwatch function.

Ready Bake Code

Update your my_scripts.js file to include the code for the color slider and refreshSwatch function on the previous pages. Add the lines below too. They will trigger the slider values to run the refreshSwatch function when the web page loads, which will start the web page with a colored swatch rather than an empty one.

$( "#red" ).slider( "value", 127 );
$( "#green" ).slider( "value", 127 );
$( "#blue" ).slider( "value", 127 );

Test Drive

Open sightings_end.html in your favorite browser. Make sure to test the sliders using your mouse and keyboard (the left and right arrow keys should advance the slider by its increments).

One last little thing...

There’s just one item left on your checklist:

	1.	Build a datepicker for users to enter the date of the sighting.
	2.	Build more engaging radio buttons for users to choose the creature type.
	3.	Build number-entry sliders for users to enter distance from creature, creature weight, creature height, latitude, and longitude.
	4.	Build a color mixer interface component for the user to enter creature color.
	5.	Build a nicer-looking submit button for the sightings form.

You’ve used buttons already in this chapter and you’ve been using buttons since Chapter 1, so this one should be pretty easy for you!

There are no Dumb Questions

Q:	Q: We used the rgb setting for background-color for the color slider we built. What if I want to make a color slider that uses standard hex notation for colors?
A:	A: We tried to create the most elegant and simple code possible for the color slider. If you need a color slider that will collect data in hex color format, you’re in luck. You can use the sample code for a simple color picker provided at the jQuery UI site. Point your browser to the following URL: http://jqueryui.com/demos/slider/#colorpicker Now, find the View Source link under the demo color picker. Select and copy the HTML, CSS, and jQuery code in the text field and save it into a new document. Make sure to link that document up to the appropriate CSS and jQuery files in your copy of the jQuery bundle. Voilà—you have a color picker that uses hex values for color.
Q:	Q: I need a form field that will suggest search terms as a user types. Does jQuery UI have anything for that?
A:	A: Yes! One of jQuery’s newest features, at the time of this writing (August 2011), is the Autocomplete widget, which displays suggestions for search terms as a user types into a form field. Where do the search terms come from? You provide them in a JavaScript array, from a URL, or using a callback function that can grab the data from a server using the Ajax methods you learned in Chapter 8 and Chapter 9. For more information on this widget, visit jQuery UI’s demo page here: http://jqueryui.com/demos/autocomplete/
Q:	Q: Does jQuery UI provide any sort of form validation?
A:	A: No. Unfortunately, jQuery UI does not provide form validation, but there is a jQuery plug-in that works well for validation. You can find the plug-in here: http://bassistance.de/jquery-plugins/jqueryplugin-validation/ We talk more about that plug-in in Appendix A. Check there for more information.

OK, good point.

We’ve used jQuery’s click method and jQuery UI’s button method, but we haven’t done much with selecting form elements like input submit buttons. Here’s a quick guide on how to select those.

Bullet Points

• $(":input") = Select all input elements

• $(":text") = Select all elements of type text

• $(":radio") = Select all input elements of type radio

• $(":checkbox") = Select all elements of type checkbox

• $(":submit") = Select all input elements of type submit

• $(":reset") = Select all input elements of type reset

• $(":checked") = Select all inputs that have been checked

• $(":selected") = Select all inputs that have been selected

• $(":enabled") = Select all inputs that are enabled

• $(":disabled") = Select all inputs that are disabled

• $(":password") = Select all inputs that are intended for passwords

Exercise

Write the single line of code you need to add to my_scripts.js that will transform the pill button into a themed jQuery UI button.

_______________________________________________________________

Exercise Solution

Be sure to add this to your my_scripts.js file and test it out by opening sightings_end.html in your favorite browser.

__$( “button:submit” ).button();   ;_____________

Bonus: Exercise

Your form looks great, but it doesn’t actually submit any data at this point. However, you learned everything you need to do that back in Chapter 9, so take some time to think through how you could make this stylish form truly functional.

The end folder in the code you downloaded for this chapter contains all the code you need to get this up and working: sightings.html, service.php, and sightings.sql. You will have to do some work on your own to get it set up, but that’s what being a web developer is all about, isn’t it? We included the Ajax and JSON methods you learned in Chapter 9 so that the form you just built can submit data.

You need to do all of the setup on your own (i.e., run the sightings.sql script or create the database with the fields in that script yourself, and add the Ajax and JSON methods to your my_scripts.js file). You also need to add some records to the database before going on to Chapter 11. If you need a refresher on MySQL, PHP, and AJAX, feel free to go back to Chapter 8 and Chapter 9.

There’s no solution to this exercise, but if you’re having any issues, you can always jump on the forum for this book at www.headfirstlabs.com, and chat with the authors and other readers.

Your jQuery Toolbox

You’ve got Chapter 10 under your belt and now you’ve added jQuery UI to your toolbox.

jQuery UI

An official jQuery library that offers three main types of plug-ins for the jQuery core: effects, interactions, and widgets.

Widget

A self-contained component that adds functionality to your web app.

Saves you tons of coding time and complexity while creating usable and responsive user interface elements.

Button widget

Provides a button method to help you make more appealing form elements like submit buttons, radio buttons, and checkboxes.

Datepicker widget

The datepicker method instructs the JS interpreter to build the datepicker on the fly, along with a load of HTML, CSS, and built-in interactivity.

Comes with a host of customizable options, too.

Sliders

UI elements that users can manipulate with their mouse or keyboard, controlling the data that they enter.

Include five event handlers that you use to connect the slider to a form input: create, start, slide, change, and stop.