Most of the web designers are inclined towards creating good and vibrant interfaces but are not sure how to get started with AJAX. Considering the steep learning curve for AJAX, an utmost need is felt by the developers for and HTMLcentric framework which can help add basic functionality and interactivity to the pages.
The implementation of spry consists of two basic prerequisites.
- Spry data set
- Spry dynamic region
The SpryData.js file is dependent on xpath.js file. Hence it is important that the link for the file xpath.js file comes first in the code.
Some of the functionalities considered in this document include:
- Widgets – Tabbed panels
- Tool tip
- Photo Gallery
* The files are to be obtained from adobe website(http://labs.adobe.com/technologies/spry/) Spry_P1_6_10-01.zip
The details for implementation of each of the above functionalities are as follows:
Spry consists of HTML, CSS and custom Spry attributes. There are no additional learning for custom tags included with Spry. This makes it easier to use and implement.
Example of a Spry widget.
From the code above it is easy to figure out how to build a tabbed panel.
Main container DIV
A DIV for each panel
A DIV for panel header
A DIV for the content.
One of these kinds includes working with tabbed panels:
This is basically used to store the contents in the compact space. This allows the designer to reveal and hide the contents simultaneously by clicking the tabs. In tabbed panel widget only one content panel is open at any given time. The figure shows the working example for the same.
Fig1: Tabbed Panels
You can set a panel to be open when the page containing the Tabbed Panels widget loads in a browser.
Set the defaultTab option in the constructor as follows:
Note: The Tabbed Panels widget uses a zero-based counting system, so setting the value to 0 opens the first tabbed panel.
This feature is used for the Search box where the matching search hints will be displayed to the user, underneath the text field. This matching results can thereby be selected by the user.
The autosuggest widget has the container DIV, an input DIV and another DIV tag which contains the search results.
The constructor has the four required values and an optional value.
The outer DIV is the main container of the widget. The ID attribute is reference by the constructor, hence an mandatory field
The widget contains a text field for the search term.
The inner DIV is the container for the results. The container also includes a spry region so that it can display the results.
Fig:2 AutoSuggest Example
The tooltip widget gives the flexibility to the user to move the mouse over a desired content to reveal the additional information.
For the implementation of tooltip, the file SpryTooltip.js is an important resource to be included in the code.
The arguments for the constructor are:
The ID of the tooltip container.
The CSS selector of the trigger. Notice that we have to put the # in front of this ID, to transform the ID in a CSS selector. The selector can specify an element ID, can be a class name, HTML tag name or a more complex selector as a combination of the these.
Please refer the figure below for the implementation.
The implementation for display for photo galley includes the CSS definitions for display of thumbnails and when clicked on any of the thumbnails, corresponding pictures are displayed. This path as well as other display properties for these thumbnails and pictures are provided in the xml file
A snippet of the file image.xml is as below.
The data set is created in the html file with the use of following code snippet.
The snapshot of the application is as follows:
Fig 4: Photo Gallery
Advantages of Spry
- Often used with Dremweaver.
- No working knowledge required of AJAX functionality for its usage with Spry.