What is Mootools?

The mootools javascript library makes it easy to design a web page that responds to user actions without reloading the page. The best way to get a feel for what it can do is to run the demos. Personally, I like the demos for version 1.11 better.

Joomla! uses the mootools library in the back end to put groups of parameters into panels. Only one panel is visible at a time, making it easier to set the parameters. Because it is bundled with joomla!, mootools is available for components to use in the front end.

The Templateparameters Template and Component

The Draw option on groja.com is a joomla! component I wrote named com_groja. Before writing that component, I wrote a joomla! template, to help get started with the project. A template determines the look and feel of the site, and can be easier to write than a component.

After writing the template, I decided to have some fun and parameterize it. So I expanded it to include a component that allows visitors to change the template's characteristics. The result is the tmpl_templateparameters template and the com_templateparameters component.

The programs that comprise this template and component allow visitors to set the following characteristics of the site:

• font size
• background
• border color
• border style
• border width

To access this component click on the More... option in the Main Menu at left. This component relies heavily on mootools, and was a lot of fun to write!

The first time you access this component, only the panel allowing you to change the font size is visible. To change the other parameters, click on one of the headings appearing under the font size panel. The component uses the mootools Accordion class to implement these panels.

The component uses mootools to set up an event handler for each of the options on this page. When you click on one of the options, the event triggers a javascript function that changes the value for the parameter in the browser. The component saves these values in a cookie in your browser, so they persist when you leave the page.

Note that the appearance of the page changes immediately, without being reloaded! Perhaps I am a nerd but I think this is very cool!

How the com_groja Component Uses JPane

The joomla! framework API contains a class named JPane that uses mootools to create panels called sliders in a page. Visitors can see only one panel at a time.

The com_groja component implements two pages, a list page that allows visitors to enter profiles, and a draw page that draws profiles and saved images. Both of these pages use an instance of joomla's JPane class to create panels that act as tabs.

On the list page, the tabs appear at the top of the page. The page contains panels with:

• a list of profiles,
• a list of images,
• a form for posting an image, and
• some help text.

On the draw page, the tabs appear at the bottom of the page. The page contains panels with:

• some information about the image,
• a form to set image options,
• a form to save the image,
• a form to print the image, and
• an option to go back to the list page.

In both cases, these panels break up the content of the page into manageable chunks. This design gives visitors access to many options without having to reload or scroll through the page.

How the com_groja Component Uses the Mootools Accordion Class

The com_groja component breaks some of the panels on these two pages even further into sub-panels.

For example, the Profiles panel on the list page contains sub-panels with:

• a list of profiles,
• a form allowing visitors who have completed the quiz without logging in to import the quiz cookies after they've logged in,
• a form allowing visitors to take the groja quiz, and
• forms allowing visitors to add their profile in a variety of ways.

I could not use JPane to create these sub-panels because the component must be able to dynamically determine which one is open when the page loads. For example, if the visitor does not complete one of the forms, the page must have the panel containing that form open when it loads, so that the visitor can finish filling out the form. I could not figure out how to do this using JPane, and so had to "roll my own" based on the Accordion class demo on the mootools site.

This design is a huge improvement over the design used in version 2 of the site, which contains the lists and these forms on separate pages.

How the com_groja Component Uses the Mootools Slider Class

The Add Your Profile Based on Percentages panel on the com_groja component's list page uses the mootools Slider class in a form that allows visitors to input a personality profile based on percentages.

The component uses mootools to set up an event handler for each of the sliders in the form. As I recall this was fairly straightforward, except it was a little tricky getting the javascript to work in Internet Explorer.

Next Stop: AJAX?

Using mootools has been a blast! I was wondering how some of these sites implement options to instantly change the text size, now I know how that works! To me, this is huge!

Mootools has really opened my eyes to some of the things websites are doing now, such as saving drafts of messages (myspace) and offering suggested search terms (wikipedia). It's apparent, however, that these features go a step beyond mootools, because they are obviously communicating with the server without reloading the page

It looks to me like these features are using a relatively new technology called Asynchronous Javascript and XML, or just AJAX. The previous version (1.11) of the mootools demos contains one for AJAX, but I have not looked at it in depth. Hopefully someday I will get to use this new technology, because it's obvious that's where the future of the web is heading!