Popular JavaScript Framework Libraries: Dojo, Rialto and Spry / Page 3

Popular JavaScript Framework Libraries: Dojo, Rialto and Spry [con't]

The GWT Project

A more powerful way to create Web applications is to use the Rialto GWT, which is a widget toolkit that extends the Google Web Toolkit and wraps the Rialto JavaScript library. If you haven't heard of it, the Google Web Toolkit assists in the development of high-performance Ajax applications. You write your front end in Java and the GWT compiles your source into highly optimized JavaScript. You have the option of creating project files for the Eclipse IDE using the projectCreator command line tool or creating a GWT project with the applicationCreator.

With GWT comes with a much steeper learning curve than other JavaScript Frameworks, requiring the creation of JAR and XML files, interfaces, wrappers and Java class compilation. It's not a suitable solution for loading some HTML into a Web page!

Adding GWT to Your Web Page

If you're not up to creating a new project from scratch, you can integrate GWT into your existing Web page. Let's say, for example, that your Web site was built with PHP. You'd like to add some client-side behavior to one of your pages using GWT. Add a <SCRIPT> tag pointing to the GWT startup script inside your PHP page's HEAD section:

The GWT JavaScript file will fill in the <DIV> with visual content. You can add GWT widgets and client-side behaviors to it just as you can with static HTML host pages. Since GWT runs on the client-side, it's not aware of whether or not the host page was dynamically generated; hence, GWT works with any server-side Framework, be it PHP, Ruby on Rails or ASP.NET.

Spry

URL: https://labs.adobe.com/technologies/spry/home.html
Docs: https://labs.adobe.com/technologies/spry/docs.html
Demos: https://labs.adobe.com/technologies/spry/samples/
Blog: https://blogs.adobe.com/spryteam/

A strong argument for giving the Spry Framework serious consideration is that it was developed by Adobe Systems - yes, the same Adobe that brought you Photoshop, Coldfusion and the Portable Document Format (PDF). The Spry team had a different outlook than Rialto's when they set about creating their Framework. In fact, the whole reason for starting the Spry project was in reaction to existing Frameworks, which tended to be quite complex and relied on many dependent files and markup injection (HTML code that is generated by a script). To make the Spry Framework easy to work with, it utilizes a lot of HTML and CSS and some JavaScript, in conjunction with custom attributes or small constructor scripts, to activate the functionality. CSS files come with clear class names as hooks for customization. The makers of Spry avoid markup injections so all the HTML code is on the page, rather than buried within script tags.

Spry is divided into three main modules:

Data: using XML, JSON or HTML data to populate the page.
Widgets: page controls that can be installed using simple markup. Accordion and Sliding Panels are examples of widgets.
Effects: these add polish to the page by moving, showing and hiding elements on the page. Slide and Fade are examples of Effects.

Data

Spry Data is arguably the most powerful part of the Framework since it was the first piece of Spry to be released. It's divided into two main components: retrieving the data and using the data on the page.

Spry uses the concept of a data set to describe any data format, whether XML, JSON or HTML. The data can be contained in a file or returned from a server-side function call (e.g.: PHP, ColdFusion, or ASP). Once the data has been retrieved from the server, the contents are converted into a JavaScript table object, with rows and columns, just like a database table. From there, reading and massaging the data always follows the same procedure. By default, Spry downloads the data file once and caches it for future use. If you want to get new data from the server directly, you can turn off caching and tell Spry to get new data at regular intervals, or when you specify. You can have multiple data sets on a page, data sets can depend on other data sets, and data set types can be mixed (you can have one XML data set and one JSON data set, for example). Here's all the code required to create an XML data set:

The constructor takes two arguments: the first is the path to the XML source; the second parameter is the XPath within the XML document. XPath is a language for navigating through elements and attributes in an XML document.

Spry Regions

Spry regions are elements on the page where Spry processing happens. These elements are denoted by custom attributes applied to tags on the page, such as <div spry:region="datasetname"></div>. Spry regions can be used with just about any HTML tag. Spry attributes also support logical processing such as 'spry:if' and 'spry:when,' as well as behaviors like 'spry:hover.'

Data references are used to add the data set to the page. These are placeholders for the real data. A data reference is the data node name, wrapped in curly braces {}. For example, the following code would display the name "Unconscious" in the Web page:

Widgets

A widget's structure is defined in HTML on the page; a small constructor script is used to convert that markup into the functioning widget. Widgets are delimited by a container tag around them. These container tags have an ID that Spry uses to identify the widget markup. You can put in any HTML you wish within these structure tags, as long as the main structure is correct. It's important that the constructor script comes after the widget markup because the widget needs to exist before Spry executes the script to create the widget. Spry doesn't use a window.onload-type event. The widget's various options are set by passing them to the constructor via its arguments. The following example creates an AutoSuggest widget that displays product names:

Most widgets have methods that allow control of the widget's behaviors from other parts of the page:

Effects

The effects in the Spry Framework include base effects and combination effects. Base effects are simple animations such as move, size, opacity or color. All other effects, like puff, are combinations of these base effects.

To use effects in your page, include the SpryEffects.js file, define the effect as a JavaScript object (remember that the constructor scripts come after the markup), then add functions to your page to start or stop the effect:

In the code above, we define an Effect called myEffect. We pass the ID of the element we will fade to the constructor: fadeMe, along with the options:

from: the starting opacity
to: the final opacity
duration: how long to complete the effect, in milliseconds.
toggle: tells the effect to reverse when clicking the link again.

In the <A> tag we call the start() method to render the effect: onclick="myEffect.start();".

Today's Frameworks highlighted the extent to which they can vary from one another in style. It bears repeating that, while all the Frameworks we look at here are good ones, the deciding factor should be which suits your needs and skill set best. Next week, we'll be rounding off our overview of the top dozen JavaScript Frameworks with two promising newcomers: qooxdoo and SproutCore, and Microsoft's ASP.NET Ajax Framework.

Original: November 16, 2008

[prev]