Gone are the days of clicking, submitting, and waiting for the next page to load. A web page using AJAX techniques (if applied properly) will give the user a smoother and leaner experience. If you click on a drop-down option and the checkbox menus underneath are updated immediately with the relevant choices: no submitting, no waiting. Complicated forms that, in the past, took two or three screens to process can be reduced to one convenient screen by implementing the form with AJAX.

As wonderful as this all may sound, I must again offer a quick disclaimer. I understand that, as with drop-down menus and Flash, many of your clients are demanding AJAX for their sites, but AJAX techniques are best used in situations where they truly benefit the user’s experience of a page: for example, if they Cut a lengthy web-process form from three pages down to one. In a nutshell, using an AJAX technique simply to say that your site is an AJAX site is probably not a good idea.

You should be aware that, if not implemented properly, some uses of AJAX can compromise the security of your site. You may inadvertently end up disabling key web browser features (like back buttons or the history manager). Then there are all the basic usability and accessibility problems that JavaScript in general can bring to a site.

Some screen readers may not be able to read a new screen area that’s been generated by JavaScript. If you cater to users who rely on tabbing through content, navigation may be compromised when new content is updated. There are also interface design problems that AJAX brings to the table (and Flash developers can commiserate). Many times, in trying to limit screen real estate and simplifying a process, developers often end up creating a form or interface that is complex and confusing, especially when the user is expecting the web page to act like a normal web page!

As we’ve discovered several times in this book, a huge advantage of working with an open-source tool such as Joomla! is that it has a great network of developers associated with it and anyone can contribute. If you’ve ever thought you needed or wanted something for your Joomla! website, it is likely that someone else has had the same thought and has created a suitable extension that works with Joomla!.

The type of form that you’ll most likely want to use on your site is a comment form. Comment forms are a great way to build a community around your site, not to mention beefing out your content base with user feedback. (This is something to think about if you’ll be supplementing the site with Google or AdBrite advertisements. The text that users leave via your comment forms will increase the keywords that will serve up advertisements via these two services creating an opportunity to make more PPC/PPI cash.) Using AJAX techniques within a comment form enables people to post without waiting for the entire page to reload again.

Joomla! Comment 2.40 is an extension that you can add to various pieces of Joomla! content (static pages or regular content pages). It doesn’t rate quite as well as some other comment extensions that use AJAX techniques, but at the moment, it’s the highest ranking one, and it is free using the GNU GPL license.

You can download it from here:

http://extensions.joomla.org/component/option,com_mtree/task,viewlink/

link_id,677/Itemid,35/

(Forgive the long URL; you can also just go to http://extensiona.joomla.org and search for the extensions by name.)

Installing Joomla! Extensions

Working with Joomla! Comment 2.40 is pretty straightforward. You download the ZIP file and go to Installers | Components. From there, you can browse for the ZIP file, and select Upload File and Install just as for a Module extension.

Note

Is it a module or a component? You’ll have to pay attention to the extension’s name and instructions to find out if it is a module or a component. (For instance, the Extend Menu extension we worked with in Chapter 7 was a module, not a component). You’ll know which installation screen to use. What’s the difference? Generally, modules can appear on any page and are usually kept pretty simple. Components, on the other hand, usually load as their own page (or area of a page, the way the Banners component works) and can be more complex.

When you get the Upload component – Success screen, you can go to the Components | Joomla! Comments | Edit Settings where you’ll be able to see the General, Layout, and Security options available for the component.

Figure 8.1 Installing a new component

You’ll notice that the component will appear on every page unless you specify that certain pages should exclude it.

Figure 8.2 Joomla! Comment 2.4 options and features

Note

Using More Than One AJAX Extension Most AJAX Joomla! extensions make use of the XAJAX toolkit. There is a problem running multiple extensions that reference the toolkit—only one Joomla! extension will work. If you’re going to install multiple extensions that use this XAJAX toolkit, you’ll need to download the solution from http://www.xajax-joomla.com/.

Writing Your Own Extensions If you already have a little AJAX or PHP experience and you feel that it could be reused as an extension in other sites, I recommend that you check out Building Websites with Joomla! by Hagen Graf. Chapter 11 will walk you through programming and building your own Joomla! extensions.

What if you’re an AJAX/PHP pro and find it easy to build a simple form for a site, but do not thinks that it is worth taking the time to make your own extension? Perhaps the site you’re upgrading to Joomla! already had a working AJAX form? Why mess around looking up other people’s extensions hoping they come close to duplicating what you need?

Never fear, you don’t need to reinvent the wheel by writing your own extension or worry about how you are going to get complicated XHTML markup that references JavaScripts and server-side scripts into a Joomla! content page. Enter the wrapper.

The Wrapper Menu Item creates a content page that wraps an external web page in an iFrame. The iFrame content appears as a “page within a page”. Hence, if your content is an external website (such as the joomla.org wrapper sample in the “out of the box” installation of Joomla!), then all the site’s functions, menus and so on, will be operable from within the wrapper.

There’s really no good reason to load someone else’s website into your own. However, displaying content that uses non-Joomla! scripts (like your own or existing AJAX scripts), galleries or directories, within your Joomla! template has just got a whole lot easier. You can also use the Wrapper Menu Item to load a page that houses a Flash SWF. (If you don’t want to paste the object embed and JavaScript check tags we discussed in Chapter 7, into a content page.) You can also display pages written in specialized web languages that most Joomla! text editors can’t accommodate. The wrapper is indeed a wonderful thing.

Using the Wrapper Menu Item

Take a look at this tutorial from W3Schools.com. It’s a great AJAX script that can be used to keep track of a simple CD collection: http://w3schools.com/php/php_ajax_xml.asp.

Note

Watch out! The script above and many scripts that support AJAX nowadays require your server to be running one of the newest versions of PHP (we’re using PHP 5.12). If the script doesn’t work for you, it gives you an Unexpected T_OBJECT_OPERATOR error, and upgrading your version of PHP may be in order.

You may find that a client already has this kind of script in place before choosing to upgrade a site to the Joomla! CMS. Is so, you’ll be able to get the AJAX scripts looking and working great with just a minimal amount of work to the front-end XHTML. (Just make sure that you remove the old site’s header, nav, and footer includes from the page.) Remember, this is an independent page loading into an iFrame! You’ll need to add a style sheet to it, since it will not pick up your Joomla! template’s CSS file automatically.

You’ll be able to easily integrate many perfectly good existing AJAX applications into their new Joomla! page using the Wrapper Menu Item.

1. Take the script above, which is a basic XML-driven AJAX application that lets us list CDs and Artists (or any existing AJAX form you have access to), and place it on your server.

2. In your Joomla! Administration Panel, go to Menu | mainmenu (or any other menu you want the wrapper to be accessible from), and then click New.

   

   Figure 8.3 Adding a new menu item

3. From the New Menu Item screen, select Wrapper from under the Miscellaneous section.

4. Name the link and include the URL path to the AJAX script.

   

   Figure 8.4 New menu item wrapper options

5. In the right panel you can set several different parameters for the wrapper component: height, width, scrollbars, and more.

6. Hit Save and your new item should be in the menu you specified.

Note

Don’t want the wrapper content visible from one of your menus? Because this component is a menu item, this is the easiest way to get a wrapper page started. Once you have made the page, click on its link off the menu and copy and save it. You can then unpublish the menu item, but still reference the page from anywhere by referencing the link that you saved.

In Figure 8.5, you can see our XML-driven CD lister loaded into Joomla! via the Wrapper module.

Figure 8.5 AJAX, auto update CD view form

As we mentioned, it’s easy to give your site an “Ajaxy” feel regardless of asynchronously updating it with server-side XML, just by sprucing up your interface with some snappy JavaScripts. The easiest way to get many of these effects is to reference a JavaScript toolkit or framework. The two leading favorites in the AJAX community are:

Prototype is more of a base framework and Script.alico.us is more of a set of libraries for neat effects. In fact, Script.alico.us references the Prototype framework, so your best bet is probably to use Script.alico.us, but be sure to check out Prototype’s site and try to understand what the framework does.

By using toolkits or frameworks such as those above, you will be able to implement their features and effects with simple calls into your Joomla! pages. (Again you will need to turn off the WYSIWYG editor to add custom HTML code that references these toolkits.)

Review the above and choose the one that suits your needs best. Then download and reference it within your Joomla! template’s index.php header tags:

<script src="javascripts/prototype.js" type="text/javascript">
                                                            </script>
<script src="javascripts/scriptaculous.js" type="text/javascript">
                                                            </script>

JavaScript Components and Libraries

The fun doesn’t stop there! There are many other JavaScript-effect components and libraries that are built using the two above. One of the most popular scripts out there that make a big hit on any website is Lightbox JS, which can be found at http://www.huddletogether.com/projects/lightbox2/.

This is an extremely easy-to-implement script. After downloading it, add the key scripts to your Joomla! template’s index.php header file:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects">
                                                            </script>
<script type="text/javascript" src="js/lightbox.js"></script>

Be sure to add the required CSS sheet to the index.php file as well!

<link rel="stylesheet" href="css/lightbox.css" type="text/css"
                                                    media="screen" />

Then, you can create a page in the Joomla! CMS, turn off the WYSIWYG editor for your user, and add in basic href links around your image tags as follows:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">
                            <img src="images/image-1-thumb.jpg"/></a>

That’s it! You can also add the page as a wrapper, as we mentioned earlier, but if you leave the greyed-out background turned on in the JavaScript and CSS file, the greyed out area will give away your wrapper’s iFrame borders.

Figure 8.6 Shots of JS Lightbox on http://Fransozo.com/home. Site built by http://mediaetc.com

In this chapter, we reviewed the most common ways to get Ajaxy with your site, and we downloaded and installed two extensions and looked at how to use the wrapper in detail to house an existing, fully-working AJAX application. Up next: some final design tips for working with Joomla!.