Working with Adobe Spry: An Ajax framework

Adobe Spry is an Ajax framework developed for Web designers, making it possible to create a richer experience on an HTML page. Spry is intended to be a way of easily implementing Ajax – designers with entry level HTML, CSS and JavaScript experience should find Spry an easy way to integrate content. Spry differs from other Ajax frameworks because it has been created for designers rather than developers. It is less reliant on server-side technology compared to some other Ajax frameworks; instead it relies on XML, which is easily consumed by Spry’s components with a minimum of fuss.

In its attempt to make the implementation of Spry simple, Adobe has drawn some fire from Web standards adherents with criticism that it makes use of custom HTML attributes.

Adobe released an updated version, Spry 1.5, recently on its Adobe Labs site; this is the sixth release since the original beta last year with new features added for interacting with different kinds of data including:

  • Nested Data Sets
  • JSON Data Sets
  • HTML Data Sets
  • Session Handling
  • Form Submission
  • Paged Data View
  • Rewrite of existing Effects
  • Radio Button Validation Widget
  • Auto Suggest Widget
  • Spry API

The Spry framework contains the following components:

  • Spry Data and Dynamic Region
  • Data Utilities
  • Server Side Utilities
  • Widgets
  • Effects

Spry is a free download from Adobe, included in the download is a multitude of demos, samples, articles and documentation. Documentation is also available online via Adobe’s LiveDocs, there is also a developer centre for Spry where you can find numerous articles already available.

Working With Data

XML Data

Enough talk; let’s put the framework to the test. The first thing that we evaluated was Spry’s ability to handle XML data. We created some sample data in the form of an XML file with the details for the employees of a fictitious municipality. A sample below:

You can see that the data has multiple rows each with the same properties, there’s no DTD (Data Type Definition) required by Spry to interact with XML, which is typically a problem of consuming XML — no standardization. The goal here is to have Spry handle data for us and output that in an HTML page, you nominate the attributes and properties from the data and tell Spry where on the page to display them.

Using a text editor we’ll work on the HTML content. Below is a snippet from between the tags. I’ve imported two .js files, the first uses Google’s open source code to utilize XPath so that we can filter data later on, the second is the Spry data library — it’s dependant on the XPath library which is why the other is declared first.

Next an instance of the Spry XMLDataSet is declared; here we’ve called it dsEmployees. The instantiation requires two parameters: the location of the XML file and an XPath expression that identifies the XML node or nodes that the data is contained within. The XML can also be loaded from a URL. Note that the XPath expression identifies the XML root node then the name of the child node that represents each row of data.

Outputting the Spry data set within the body of the page is simple. Spry dynamic regions are used to display XML data on the page; they update themselves when the data set changes. A dynamic region is declared within a div tag using spry:region, HTML tags then are used as dynamic region containers. The region is an “observer” of the Spry data set, curly braces are used to identify columns from the data set, the spry:repeat tag iterates through the data set displaying all the rows.

DepartmentEmail
{department}{email}

Name
{fname} {lname}

 

Spry has provisions to do master/detail dynamic regions from one or more sets of data. The sample code below uses the same logic within the head tag to declare a Spry data set as above. An onclick event has been added to the repeated table row that links to a Spry XMLDataSet method called setCurrentRow passing the id of the current row as parameter. The second table is surrounded with a div that uses the spry:detailregion to populate the detail portion of the code. Sorting table data by column headings is just as easy.

Name
{fname} {lname}

 

 

DepartmentEmailMobile Phone
{department}{email}{mobilePhone}

Name
{fname} {lname}

 

Leave me a comment and let me hear your opinion. If you’ve got any thoughts, comments or suggestions for things we could add, leave a comment! Also please Subscribe to our RSS for latest tips, tricks and examples on cutting edge stuff.

Free PHP-AJAX Chat applications

Chat  applications are very common in social networking sites, dating sites and other web applications where you need your users to interact with each other or even to site admin. Previously, there were many PHP chat applications which needed page refreshing annoying the users. Then came AJAX chat applications which doesn’t need page refresh and looks very similiar like any flash chat applications. Following is a list of PHP AJAX chat applications you can use in your web applicaitons for free.

  • AJAX Chat is a free and fully customizable open source web chat software implemented in JavaScript, PHP and MySQL. Sound support is implemented using Flash, Socket support using Flash on client-side and Ruby on server-side. AJAX Chat integrates nicely with phpBB, MyBB, PunBB, SMF, vBulletin and other PHP community software. View Demo
  • phpFreeChat is a free, simple to install, fast, customizable and multi languages chat that uses a simple filesystem for message and nickname storage. It uses AJAX to smoothly refresh (no flicker) and display the chat zone and the nickname zone. It supports multi-rooms (/join), private messages, moderation (/kick, /ban), customized themes based on CSS and plugins systems that allows you to write your own storage routines (ex: Mysql, IRC backends …), and you own chat commands. View Demo
  • Mia Chat is an Ajaxed PHP chat application which is very simple to use & install. It functions similar to the messenger applications, you can add buddies, chat with several users at the same time, change your online status & more. View Demo
  • AJAX-IM is a browser-based instant messaging client. It uses AJAX to create a near real-time IM environment that can be used in conjunction with community, intranet, and social websites. No refreshing of the page is ever needed for this “web application” to work, as everything is updated in real-time via JavaScript. view demo username: “test” ,  password: “test”.
    ajax_im.gif
  • Blogoscoped is avatar based ajax chat application built in PHP. This chat program doesn’t need any special plug-in (like Java or Flash) but simply runs in your browser. It was tested with Internet Explorer 6, Firefox 1, and to some degree Konqueror.
  • Chatr is a chatroom on your site. It’s a set of php scripts and some javascript to create an AJAX/php chatroom with php as the only server requirement. It has two skin support. view demo
    chatr.gif
  • AJAX Chat is a simple productive an light weight chat application which can be used in your PHP applications.
  • toksta is a free instant messenger, which is easy to implement and customize into your social networking site or forum. toksta* IM enables your users to chat via text chat or webcam in real time – without having to switch to programs like Skype, MSN or ICQ!
    It is a hosted application that can be integrated to your website & user database. With this feature, your users won’t have to re-login to the messenger. toksta* also provides plug-ins for phpBB2, phpBB3, punBB, phpMyForum and vBulletin.
    free_webcam_chat.jpg
  • firefly is a totally different chat system which can power your websites by adding a line of JavaScript, your visitors can chat with each other in an overlayed screen.
    javascript_chat.jpg

All the above chat applications are for free but please read their terms and conditions before use in commercial applications.

Shout me your experiences with the above applications their pros and cons. If you like this post kindly subscribe to our RSS for free updates and articles.