In a previous post, I demonstrated how to implement Dylan Verheul’s jQuery Autocomplete plugin. Not content with demonstrating one library’s plugin, it is now the turn of MooTools.

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

In this post I will show you how to implement the AutoCompleter plugin by Harald Kirschner. Kirschner’s AutoCompleter plugin script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.

The Goal

The goal of this post will be the same as the jQuery autocomplete post: Allow the user to type a few characters into a standard form text input field and to automatically provide suggestions from which the user can select.

Prerequisites

  1. The latest copy of MooTools
  2. A basic understanding of JavaScript and JSON
  3. A server-side script that can respond to the AJAX request, in our case ColdFusion

Demo

The demo below will show how to interact with a simple ColdFusion script, but I’ll also provide more (advanced) examples in the download.

How It Works

Once the user begins to type into the form text input field, the MooTools auto-complete is activated. After a set character length and time interval (both optional), a list of items is displayed below the input field. The user can select an item with either the arrow keys or mouse.

NB. Clicking back in the input field will repopulate the auto-complete list, if options are available, so that the user can change the selection. Deleting part of the chosen item will also trigger a new selection list.

The Code

There are three parts to this demo:

  1. The page’s HTML.
  2. The server-side code to produce the dynamic page (i.e. to load the autocomplete div when the user types something into the input field).
  3. The MooTools JavaScript.

HTML Form

<h1>Example: Country Lookup</h1>
<p>Using <abbr title="Asynchronous JavaScript and XML">AJAX</abbr> to interrogate the database.</p>
<p>Example data: Australia, Bulgaria, United Kingdom</p>
<form name="frmAutoCompleteCountry" id="frmAutoCompleteCountry" action="#" method="post">
<p>
<label for="country">Country</label>
<input type="text" name="country" id="country" />
</p>
</form>

ColdFusion

Below is a simple ColdFusion component that takes a string as an argument. This string is part or all of the country name. The query results are parsed as an array and returned from the function, as JSON, to the MooTools auto-complete function.

<cfcomponent output="false">
 
	<cffunction name="getCountry" access="remote" output="false" returntype="array" returnformat="json">
		<cfargument name="country" type="string" required="true" />
 
		<cfset var qryCountry = queryNew('country') />
		<cfset var arrCountry = arrayNew(1) />
 
		<cfquery name="qryCountry" datasource="test">
		SELECT countryName
		FROM country
		WHERE countryName LIKE <cfqueryparam value="%#ARGUMENTS.country#%" cfsqltype="cf_sql_varchar" />
		</cfquery>
 
		<cfloop query="qryData">
			<cfset arrCountry[currentRow] = qryCountry.countryName[currentRow] />
		</cfloop>
 
		<cfreturn arrCountry />
	</cffunction>
 
</cfcomponent>

JavaScript

The JavaScript will attach itself after the DOM is ready — this more or less relates to when the page has loaded in the browser. Each time the text input field, with the ID of country, is changed, the Autocompleter.Ajax.Json event is fired. This makes a call to the ColdFusion component, which returns a JSON object of matched items. This JSON object is interpreted by the plugin and rendered as an HTML un-ordered list.

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="Observer.js"></script>
<script type="text/javascript" src="Autocompleter.js"></script>
<link rel="stylesheet" href="Autocompleter.css" type="text/css" media="screen" />
<script type="text/javascript">
window.addEvent('domready', function() {
	new Autocompleter.Ajax.Json(
		'country',
		'data/Country.cfc?method=getCountry&returnformat=json&country=' + $('country').getProperty('value')
		, {
			'minLength': 1, // We wait for at least one character
			'overflow': true // Overflow for more entries'
	});
});
</script>

Where to Take it Next

Unobtrusive JavaScript

As with any page that is loaded with JavaScript and AJAX functionality, it should work without JavaScript.

To achieve this with the above tutorial, you will need to replace the MooTools autocomplete functionality with an ‘interim’ page that allows a user to select from a list of items, effectively turning the input field into a simple search interface. Of course, all other form field information would need to be retained between pages.

Download the Code

The example code can be downloaded from the demo page. Included are ColdFusion and PHP examples.

For many web developers, whenever JavaScript is mentioned it provokes a rye smile; JavaScript is one of those programming languages that is rather avoided than embraced. This is not the fault of the language itself, but rather the browsers. A few years ago, the landscape of client-side scripting was a bleak scene. Browser inconsistencies, particularly with the dominant Internet Explorer, implementation bugs and numerous target platforms made developing client-side JavaScript a tricky undertaking.

To the consternation of these same developers, the landscape changed and Web 2.0 hit the mainstream. Almost overnight, every website on the internet wanted to use or was using AJAX. Marketers joined the bandwaggon and every feature requested had to involve something dynamic and revolutionary. Thus JavaScript development quickly hit the forefront of peoples minds and became as important as any server-side technology available at the time.

Over the next few blog posts, I will be using the popular frameworks jQuery, Yahoo! User Interface Library (YUI), ExtJS and Adobe’s Spry with ColdFusion to demonstrate various techniques, such as autocomplete and form validation.

by Dan Wellman

Synopsis

Learning the Yahoo! User Interface Library book coverThe Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML, and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD License and are free for all uses.

This book covers all released components whether utility, control, core file, or CSS tool. Methods of the YAHOO Global Object are used and discussed throughout the book. The basics of each control are presented, along with a detailed example showing its use to create complex, fully featured, cross-browser, Web 2.0 user interfaces.

Besides giving you a deep understand of the YUI library, this book aims to expand your knowledge of object-oriented JavaScript programming, as well as strengthen your understanding of the DOM and CSS.

The core aim is to teach you how to create a number of powerful JavaScript controls that can be used straight away in your own applications.

Download

Download the latest YUI version, including full API documentation and more than 250 functional examples from Sourceforge.

The library’s developers blog frequently at the YUI Blog and the YUI Library community exchanges ideas at YDN-JavaScript on Yahoo! Groups.

Book Review

The Yahoo! User Interface Library sits comfortably amongst its peers, which, along with many others, include Prototype, jQuery and Mootools. Arguably it can be said that the YUI library is the king among the JavaScript and CSS-libraries. With a vast number of well documented examples and near 100% compatibility amongst modern browsers, it would be difficult to find a comparable library.

It is one thing to be a well documented library, but it is another to know how to use the libraries to construct a user interface. This is the niche Dan Wellman fills with his book. Although not necessarily for the beginner, since you need a knowledge of CSS, JavaScript and a little AJAX, Wellman does a good job of explaining the concepts, especially AJAX, from scratch.

Wellman provides an A-to-Z of the library and assumes, rightly, that the reader has little or no knowledge of the library. To that effect, he does a long introduction of the YUI, following an overall review of its components, listing them in the first chapter. He then picks up a selection of some of the most established utilities, for example navigation, animation and AJAX utilities and in the following chapters he covers one or two examples for each of them.

Importantly, the book teaches the reader how to not only use the DOM manipulation and event handling aspects of the library, but also the CSS tools of the library.

Wellman does a good job of introducing the technical aspects at the beginning of each chapter, but not dwelling too long before moving on to real usage and methods.

What I would have liked to have seen is more interaction between different components written about in the book. Clearly building a fully-featured application that incorporates most or all of the key components would be unweildy, but individual and isolated examples doesn’t equate real-world scenarios either. For example, it is quite conceivable that autocomplete and drag-and-drop components would be utilised on the same page; it would have been good if Wellman had explained the pains or pitfalls that may be encountered with such combinations. The negativity aside, the examples are of a good quality.

The book does contain a number of errors, but since this is the first edition you can probably forgive the editors from missing them.

A major gripe I have with this book, indeed all technical books is the lack of colour throughout. It is far easier to read and understand the example code when code colouring is employed, allowing for easier understanding of the key elements in the code. Surely modern publishing techniques can mitigate against the extra cost of colour. Indeed, I would pay more for a well-written coloured technical book.

A great summary chapter on graceful degredation versus progressive enhancement would also have been welcomed, since many developers may not consider the usability and accessibility issues of using JavaScript.

This book is certainly a good read for anyone who has basic knowledge of JavaScript, HTML and CSS and who wants to learn how to apply the YUI library in their projects, making them more interactive for the user.

Adobe AIR LogoSince the Adobe Integrated Runtime (AIR) was released at the end of February, we now have a stable platform on which to build desktop applications with our existing web skills. A number of people have already started and the Adobe AIR Marketplace is filling with AIR applications by the day.

So what is the big deal? The Adobe marketing team state that:

The Adobe AIR runtime lets developers use proven web technologies to build rich Internet applications that deploy to the desktop and run across operating systems. Adobe AIR offers an exciting new way to engage customers with innovative, branded desktop applications, without requiring changes to existing technology, people, or processes.

What AIR applications should you check out?

What is intriguing is that all the tools I have chosen are generally useful tools for the developer or designer, with the exception of twhirl, which is a social-interaction tool. I’m looking forward to when other, less developer-centric tools become freely available. AgileAgenda has taken the lead with this respect, albeit not freely available, as has eBay desktop, but I would like to see examples from the BBC in the form of a desktop BBC iPlayer or maybe a Flickr image browser, del.icio.us bookmark reader, RSS aggregator and a Picnik image editor.

Analytics Reporting Suite

Google Analytics Reporting SuiteThe Analytics Reporting Suite, by Nicolas Lierman, brings Google Analytics to the desktop. It uses it’s own custom API to interact with Google and nearly implements all the features of Analytics.

For website owners this is a must-have application. Like the twhirl AIR application below, it is a fantastic example of what can be achieved with Flex and AIR. Measuring visitor trends and traffic are essential tasks to managing and improving a websites performance. The Analytics Reporting Suite allows you to configure multiple Google’s Analytics accounts and access the web-based suite’s plethora of features via a desktop application. The application displays integrated graphs and animations via a tabbed interface, which allows you switch between a number of reports. These reports can then be saved as a PDF, Excel or XMLdocument, or printed.

You can download and install the application from the About Nico website.

twhirl twitter Client

Twhirl Logotwhirl, by Marco Kaiser, is probably the most popular desktop client for the twitter micro-blogging service. Most of the features available on the twitter website are accessible through twhirl, plus, a lot of usability enhancements have been added to make it easier to manage multiple accounts. This is great for those who want to separate business and personal accounts they may have.

The twhirl application is a great example of how AIR can bring web applications to the desktop; it can dock to the system tray, display message alerts and you can configure the applications opacity when not focused (great if you like Mac and Vista-styled themes). The application allows you to search twitter users, view their timelines, add friends, view followers, delete tweets and much much more. Twhirl automatically fetches your friends’ status updates, direct messages and replies, whilst also colour coding different types of messages and alerting you to messages both audibly and visually.

The twhirl application is skinnable and comes with several built in skins with which you can customise the application. All-in-all twhirl is not only one of the best twitter clients, but AIR applications.

You can download and install the application from the twhirl website.

Kuler Desktop

Adobe Kuler LogoAdobe kuler is the first web-hosted application from Adobe Labs designed both to stand alone and to complement Adobe Creative Suite software. Built using Adobe Flash and ActionScript 3.0, kuler is all about colour: colour for exploration, inspiration, experimentation and sharing. Kuler is clearly targeted at the designer, but anyone interested in colour will benefit from its use.

You can download and install the application from the Adobe Labs website.

WebKut

WebKut LogoWebKut is a web screenshot tool that allows you to capture web pages, or parts of them in a very simple way. It provides you with 3 capture options: the entire page, the current view, or only a selection. This little application proves particularly handy for those presentations or projects that need great visuals from the web.

You can download and install the application from the WebKut website.

RichFLV

RichFLV, by Benjamin Dobler, lets you edit FLV files. The key features include reading FLV metadata, read and edit cuepoints, cut FLV files, convert the sound from an FLV to MP3 format, convert an FLV to an SWF … and much more.

You can download and install the application from the Adobe AIR Marketplace website.

SearchCoders Dashboard

SearchCoders LogoThis Flex-based chat widget is designed with programmers in mind. The code input feature allows developers to chat about code without disrupting the conversation.

You can download and install the application from the SearchCoders website.

Pownce

Pownce LogoMuch like twhirl in look, feel and ease-of-use, but with a slant towards productivity rather than micro-blogging, Pownce is a way to keep in touch and share things with your friends or colleagues. You can send people files, links, events, and messages and then have real conversations with the recipients. This is a great collaboration tool and was one of the first services to really embrace AIR as an application architecture, which could realise their service as a desktop client. Everything that is available via the Pownce website is also available via the client application, except and possibly importantly, the ability for the user to amend their account settings and add friends to your network; this still has to be done via the website.

For a small annual amount, Pownce offers a paid-for service which will eliminate adverts from your profile and allow you to send huge file sizes (100MB) and customise the theme of your Pownce.

Pownce also offers Drupal integration and a mobile application, which works with the iPhone, BlackBerries and many more ‘internet-ready’ mobile devices.

You can download and install the application from the Pownce website.

BBC Homepage LogoI’m not a big fan of the BBC’s recent website redesign! While I believe that a few structural and hierarchical elements could have been addressed better, the overall result of this redesign is too “Facebook” and Web 2.0 for my liking; exactly what an online news site does not need. Who are the BBC trying to appeal to? They have gone from being content centric to design and technology centric. This in itself isn’t a bad thing, but I don’t understand the BBCs motivation for doing so.

Richard Titus, the Acting Head of User Experience at the BBC was a key driver of the project.

From a conceptual point of view, the widgetisation adopted by Facebook, iGoogle and netvibes weighed strongly on our initial thinking.

Titus identifies the key features of the new homepage as being:

  • Simple, clean and beautiful, the final design, … visually striking yet unpretentious.
  • Personalization: you can choose the content that interests you by adding and removing the content boxes via the “Customise Your Homepage” tab.
  • Localization: Users can now set their own location, enabling them to access local sites, weather, news, radio and TV schedules without the hassle often associated with user journeys to local content.
  • Simplicity: the customization is intuitive and includes an interactive demo and tips to guide users through the process. It is also unobtrusive – if the user has no desire to customize their page their experience won’t be compromised.
  • Search: The site is much easier to read and scan at a glance. At the top of the page there’s a search function (now reduced from two search boxes to one), and at the bottom a full directory of all BBC sites and a link to the A-Z, allowing users to quickly find what they’re looking for.
  • Nostalgia: the new homepage also manages to incorporate eccentricity alongside innovation.

Aesthetically bold and bright.

Aesthetically, the new homepage looks nice. It’s big, bold and bright - a far cry from the old days when BBC sites had text almost too small to read and a fixed-width design optimised for tiny monitors. But at the same time it appears far too clunky! I’d prefer something that would look a little more elegant and understated. Something that doesn’t appeal to The Facebook Generation, who are less likely to read the BBC pages at lunchtime, than update their Facebook, Bebo or Twitter profile during that ‘valuable’ hour. This begs the question, does the BBC know who their core audience is?

Confusing interactions.

The homepage makes great use of AJAX, but at the same time, there are a number of confusing interactions going on. For instance, the ‘Edit’ button next to each area of customisable content seems like the wrong label text. I’m not editing the news, the weather or blogs - I’m selecting which news categories I want to see, where I am and which blogs I want to read. These types of button ought to be contextual rather than generic. Edit is simply too vague.

Also, what’s the idea behind those plus and minus buttons for news? Strange idea. Add or remove articles from the displayed list? Why would you want to remove them from view sequentially? If the idea was to allow the user to asynchronously update a short list of available headlines, then why not move back/forwards in blocks of five? Plus and minus are often used as metaphors for creation/deletion in software, so the usage doesn’t seem right.

Personalisation vs Simplicity … an uneasy relationship

BBC Customise Homepage

The ability to personalise a website is, in general, a good thing. Google has done it with their iGoogle, Yahoo! with My Yahoo and Microsoft with Windows Live. But I think the balance here is gone too far towards design and borrowing from succesful Web 2.0 sites. The BBC website has always been an impressive destination for (relatively) impartial news and current affairs throughout the world, not a Web Portal. Or is this the point? Does the BBC want to become a destination for all your information needs and compete with Google, Microsoft and Yahoo?

The BBC should consider that 14-25 year old users, what I term The Facebook Generation, will require far greater scope for adding their individuality than is currently available. The social networking generation are page-savvy. They want control of their interface to information, their screen is their window on the world and I don’t think that you have gone far enough in divesting control of the display of that information to the user.

But for those who aren’t part of The Facebook Generation, the people who care about getting to the content fast and with little fuss, is the ability to personalise the homepage worthwhile or even simple? I’m not so sure.

Who needs a clock?

BBC Homepage Clocks Finally, the clock and date. What an important waste of webpage ‘real estate’, even though in the BBC’s case I understand it was a throwback to the old clock that preceded individual TV programmes. If you’ve got a modern computer capable of displaying the clock with the Flash plugin, then you’ll almost certainly have the date and time visible to you anyway. It’s needlessly superfluous on a website.

Both Web 2.0 and Software-as-a-Service (SaaS) almost always depend up on the browser as a common denominator. It is with the web browser that web-based applications are accessed and run, yet the browser model is rapidly reaching its limitations.

Adobe thinks it has the answer and so now does Mozilla.

A year ago, most web developers had to think about Firefox, Internet Explorer, Safari, Opera and perhaps WAP for mobile devices and widget development for one of yet more platforms. Today the horizon is changing and web developers are afforded more opportunity and possibly with that more complexity, through offline development.

Browser extensions now exist that allow for the creation of offline web applications with Dojo Offline, Google Gears, Firefox 3, and other options on the market, pioneering the way and making it possible to take your web application with you on an aeroplane or an underground train.

The drive to make these offline applications desktop applications has also been thrown into the mix, with examples coming from Apple with WebKit Cocoa bindings, Adobe with AIR and Microsoft with Silverlight. Now it is the turn of Mozilla to enter the foray with a project called Prism.

Mozilla Prism

Prism is part of an experiment by Mozilla designed to “bridge the divide in the user experience between web applications and desktop applications“. Essentially, Prism will allow you to create a desktop-like application out of individual websites. These site-specific applications are a growing trend and a trend heavily marketed by, not only Adobe, but now Mozilla, as ‘the future’.

While traditionally users have interacted mostly with desktop applications, more and more of them are using Web applications. But the latter often fit awkwardly into the document-centric interface of Web browsers.

In its current form, Prism doesn’t have the ability to function as a desktop application without access to the Internet, but Mozilla says it is “working to increase the capabilities of those apps by adding functionality to the Web itself, such as providing support for offline data storage and access to 3D graphics hardware.

Instead of needing to run a browser to, for example, access Google Calendar, a simple icon can be clicked on the desktop. The icon will launch the Google Calendar application inside a Prism window, without any of the additional web browser bloat. This can have its benefits, especially when designing workflows and securing applications as the developer’s pain, the back button and address bar, are removed from the equation.

Prism-based Google Calendar

Although Mozilla may be excited about the concepts behind Prism, and Adobe about AIR not everyone shares the same enthusiasm, or has the working habits that require such an application-based approach. For some, the advantage of web applications is that they inherently aren’t desktop applications and everything can be handled in a single application almost anywhere on the planet, assuming a computer with a browser and web connection. However, Prism, AIR and Silverlight could end up offering the best of both worlds.

ColdFusion, a key technology behind rapid application development, has been a much maligned technology in the web development arena for sometime now. However, through the efforts of Ray Camden a ColdFusion Developer Center has been created on the Yahoo Developer Network. This is great news for ColdFusion and follows on the back of the integration of the Yahoo User Interface (YUI) Library into the version 8 release of ColdFusion codenamed Scorpio. The YUI is one of the best JavaScript libraries out there and includes great documentation.

In the words of Yahoo:

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources.

Interestingly ColdFusion 8 also supports Spry, which could be considered a rather anaemic AJAX library compared to the YUI library. Whether Spry progresses out of prerelease remains to be seen, however, which ever AJAX route is taken, ColdFusion will benefit from closer integration in its core tag set.

The Internet has emerged from obscurity to become a dominant platform for application development and is integral to the idea of Software as a Service (SaaS). Unfortunately the demand to build applications of increasing complexity has continued to outpace the ability of traditional Web applications to represent that complexity and expectation. Utilisation of AJAX technologies attempts to reconcile some of the issues, but frequently the result is a frustrating, confusing or disengaging user experience resulting in unhappy customers, lost sales, and increased costs.

We are in a period of expanding opportunity for Internet and intranet applications. The growth in adoption and usage of the Internet has acted as a driver behind technology spending, spawned such terms as Service Orientated Architecture (SOA), Software as a Service (SaaS) and Web Services, and enterprise integration trends that seek to combine back-office infrastructures with new front-office applications and the Internet.

Integral to this is the need to communicate better with employees, customers, suppliers, and partners. Intranet applications, including enterprise information portals and employee facing applications, are increasingly depended upon to share information across a company, while outwardly focused extranet applications seek to more tightly bind networks of partners, suppliers and customers and make communication, business transactions and support easier.

A key reason Web applications cannot represent these types of complexity is because of the limitations of HTML pages. The Internet grew up on the notion of a network of loosely coupled, unintelligent clients that communicate with increasingly intelligent servers by sending requests for pages. The emergence of Rich Internet Applications (RIA’s) has served to blur the distinction between the desktop and the Web and has resulted in smart, powerful and dynamic user interfaces. RIA’s seek to combine the best of the desktop, Web and communication technologies.

As one would expect, the driving forces behind Rich Internet Applications are the big guns in the technology and Web industry; namely Adobe, Google and Microsoft. Each company has produced their own RIA platforms:

Rich Internet Applications

Adobe Integrated Runtime (AIR)

AIR is a cross-operating system runtime that allows developers to leverage their existing web development skills Flash, Flex, HTML, Ajax) to build and deploy desktop RIA’s.

Applications can be built using the following technologies:

  • Flash / Flex / ActionScript
  • HTML / JavaScript / CSS / AJAX
  • Combination of these technologies
  • PDF can be leveraged with any application

Adobe Integrated Runtime can be found at http://labs.adobe.com/technologies/air/

Google Gears

Google Gears is an open source browser extension that lets developers create web applications that can run offline.

Google Gears consists of three modules that address the core challenges in making web applications work offline.

  • LocalServer Cache and serve application resources (HTML, JavaScript, images, etc.) locally
  • Database Store data locally in a fully-searchable relational database
  • WorkerPool Make your web applications more responsive by performing resource-intensive operations asynchronously

Google Gears can be found at http://gears.google.com

Micrsoft Silverlight

Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web. Silverlight offers a flexible programming model that supports AJAX, VB, C#, Python, and Ruby, and integrates with existing Web applications. Silverlight supports fast, cost-effective delivery of high-quality video to all major browsers running on the Mac OS or Windows.

Microsoft Silverlight can be found at http://silverlight.net

What is AJAX?

Asynchronous JavaScript and XML. It’s a whole new way of looking at the web where HTML page makes asynchronous calls to the server using JavaScript and loads the data in bits and pieces as needed. Ajax is not a new technology. It’s a new developing approach, based on the following existing technologies:

  • XHTML and CSS for standard presentation,
  • DOM (Document Object Model) for dynamic and interactive presentation,
  • XML and XSLT for data exchange and manipulation, and
  • XMLHttpRequest for asynchronous data retrieval

The term “AJAX” was first muted by Jesse James Garrett of AdaptivePath and has become synonymous with the ideas and concepts of Web 2.0. Ajax has been popularised by the likes of Google in their Gmail and Google Suggest applications, Flickr and del.icio.us, now both owned by Yahoo!.

Below I have listed a few of the frameworks available to the ColdFusion community. I will leave it up to you to decide which one is the best and easiest to implement. Please tell me your experiences.

AjaxCFC

AjaxCFC, created by Rob Gonda, is a ColdFusion framework meant to speed up Ajax application development and deployment by providing developers seamless integration between JavaScript and ColdFusion, and providing built-in functions, such as security and debugging, to quickly adapt to any type of environment and helping to overcome cross-browser compatibility problems.

  • ColdFusion components following the best practices of object oriented programming and design patterns. Programming with ajaxCFC involves extending components and creating your own ajax façades.
  • Intergration with Model-Glue, one of the most popular MVC frameworks widely used by the ColdFusion community.
  • Works with ColdFusion MX 6.0, 6,1, 7.0 and Blue Dragon.
  • Automatically handles complex object transmitted from the client to the server and vice versa.
  • Server returns pure JavaScript code to the callback handler (instead of XML or JSON) to vastly improve performance.
  • On-the-works: Built-in base64 and/or blowfish encryption.
  • Licensed under the Apache License Version 2.0, by Rob Gonda.

The project can be downloaded from Rob Gonda’s website at the following address: http://www.robgonda.com/blog/projects/ajaxcfc/

JSMX

JSMX is a simple API available for connecting your Web Applications to an AJAX front end. The main difference between JSMX and other AJAX implementations is that JSMX allows you to pass either XML or JavaScript to the API. JSMX was originally created to be used with ColdFusion applications because of how easy it is to create JavaScript Strings natively within ColdFusion (using either the CFWDDX tag or the ToScript() function). However, because there is no server-side component to be installed, JSMX can really be used with any programming language.

  • Using the CFWDDX tag, or the toScript() function, within ColdFusion makes converting your ColdFusion Objects to JavaScript a SNAP!
  • Smaller Packet Sizes over the wire (JavaScript Vs. XML).
  • Reduced latency due to less parsing of the responses.
  • Parameters can be sent to the server in multiple formats including, strings, objects, and entire forms without having to build extra logic to handle each type.
  • API has no Server Side components which makes it more portable.
  • Extremely simple syntax shortens the learning curve and speeds up development.
  • Open-source (Creative Commons Attribution-ShareAlike License).

JSMX is the creation of Todd Kingham at LaLaBird.com and can be downloaded from the following link: http://www.lalabird.com/?fa=JSMX.downloads

CFAjax

CFAjax is the AJAX implementation for coldfusion. It makes ColdFusion method calls on server directly from HTML page using JavaScript and return backs the result to the calling HTML page. CFAjax comes with simple to use JavaScript API and simple ColdFusion implementation that marshal’s the response between your ColdFusion methods and HTML page. Using CFAjax you can create highly interactive websites with greater performance and usability.

CFAjax can be downloaded at the following link: http://www.indiankey.com/cfajax/project.asp

SAJAX for ColdFusion

Sajax is an open source tool to make programming websites using the Ajax framework — also known as XMLHTTPRequest or remote scripting — as easy as possible. Sajax makes it easy to call PHP, Perl or Python functions from your webpages via JavaScript without performing a browser refresh. The toolkit does 99% of the work for you so you have no excuse to not use it.

Sajax for ColdFusion is the creation of Steve Smith at Ordered List and can be downloaded from the following link: http://www.orderedlist.com/downloads/SAJAX_ColdFusion.zip