In our last article we discussed jQuery, Google Web Toolkit, MooTools and Prototype. In this segment we’re going to look at two more JavaScript libraries: qooxdoo and Spry.
qooxdoo, the Object Oriented JavaScript Framework
The qooxdoo framework is a design rich, open source, object-oriented JavaScript framework that is used for creating desktop-style web applications. Although the qooxdoo website would have you believe that no HTML, CSS nor DOM knowledge is required, you are still required to work within a text editor (or your own WYSIWYG tool such as DreamWeaver, Expression Web, etc.). As such, qooxdoo is platform independent, and works on any OS.
If you are already using JavaScript on your site–and you likely are–you can still safely use qooxdoo on your site without any issues with existing native JavaScript types. It also comes with a very detailed API Reference. The graphical user interface (GUI) toolkit that is included with qooxdoo is full-featured, and includes a large set of GUI widgets that look and feel like native desktop application elements.
Styling is handled differently in qooxdoo than it is in other frameworks we have discussed such as Dojo. Whereas Dojo uses CSS for styling, qooxdoo apples CSS styles directly to the DOM nodes to accomplish the task of rendering visuals, and doesn’t require CSS instructions in the code.
To use qooxdoo, you will need to have Python installed on the computer you will be using. If you are using the Windows operating system, you can download and install ActivePython Community Edition, which is free for development use. The same page also has versions available for Mac, Linux, Solaris and HP-UX operating systems.
One thing that might put off some developers is the use of a command line interface for creating the applications using qooxdoo. For instance, to create an application named HTMLGoodies, we would use the following command:
C:qooxdoo-1.3-sdktoolbincreate-application.py –name=HTMLGoodies –out=C:
It’s not difficult, but in today’s WYSIWYG world, many developers are used to visually developing applications, and using a command line interface is a different animal. That said, qooxdoo has such an extensive feature-set, and ships with a myriad of examples and demo code, so it’s worth the extra hassle.
Spry Framework for Ajax
The Spry framework for Ajax–created by Adobe Labs–is a JavaScript framework specifically created for web designers. It enables web designers to take advantage of the functionality of Ajax, and can be used in conjunction with Dreamweaver 8, as well as other web development tools. Spry was designed to feel more like an extension of HTML and CSS than a separate library, allowing non-programmers to create exciting web applications that use the power of Ajax.
Like the other JavaScript libraries we have discussed, Spry is free to download and use. Adobe does require you to register in order to download Spry, but it’s free and only take a moment.
Spry ships with many demos, and includes a concise listing of widgets, the CSS and JavaScript files that make them up, along with links to the demos:
The Effects Demo page includes some very nice transitions for images, including:
- Fade
- Blind
- Slide
- Squish
- Grow
- Shake
- Hilite
- Fade & Blind
- Fade & Slide
- Pulsate
- Puff
- Dropout
- Fold
- Reload
The latest release of Spry, version 1.6.1, is comprised of three parts: Spry Data, Spry Widgets and Spry Effects. As their names suggest, one works with datasets, one works with GUI elements, and the last deals with animations and other effects. It was also designed with Adobe AIR compatibility in mind, so if you already work with Adobe tools, you can work with Spry with confidence that it won’t “break” your current application.
Conclusion
In this installment we looked at two very different JavaScript frameworks, both of which can enhance the web developer’s toolkit to include functionality and effects that can enhance the websites that they create with a minimum of investments in both time and effort. Next time we will look at two more JavaScript frameworks, SproutCore and SimpleJS.
