What Does Spry Include?
NOTE - Adobe released Spry version 1.4 on Dec 15, 2006. You can get a copy of Spry 1.4 here: http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_spry. Much of what Spry 1.4 includes is described below since I included a description of some material the Spry development team had released unofficially after 1.3 was released. However, Spry 1.4 does include alot more documentation on these features and some additional capabilites not mentioned below.
I've been using Adobe's Spry ajax tool set in some of my web applications so I've decided to add a Spry category to my blog and post some examples of how you can use Spry. But step one is to understand what Spry includes and how to get the Spry files.
As of October 30, 2006, Adobe has "pre-released" version 1.3 of Spry. You can get this version here: http://labs.adobe.com/technologies/spry/. After you download the zipped file and unzip it you will have a folder named Spry_P1_3_08_11. Under this folder will be several other folders including one named articles where you can find information about how to use the various Spry technologies. The actual Spry files you need to build your own applications that use Spry are in the includes folder.
The Spry developers have also "pre-released" some additional Spry "widgets" that were not included in version 1.3, but will be in version 1.4. You can get a look at these widgets at http://labs.adobe.com/technologies/spry/samples/preview.html.
So given what Adobe has provided so far, what makes up Spry?
Spry data sets and dynamic regions. Spry can load XML data into a JavaScript object. This data can then be used to dynamically populate areas of the web page that are bound to the data. You can link data sets to create a master - detail page. Click on a different record in the master and the detail area is updated without refreshing the page. Read the Spry_Help.pdf that is in the articles folder of the unzipped download. You will need the SpryData.js, xpath.js, and possibly the SpryXML.js to build web pages using Spry data sets and dynamic regions.
Spry Effects. Spry has seven effects described in articles/effects_model/index.htm file (in the unzipped download). You will need to include the SpryEffects.js to use these effects on a web page. The effects available are
QUOTE
| Appear/Fade | Makes an element appear or fade away |
| Highlight | Flashes a color as the background of an element |
| BlindUp/BlindDown | Simulates a window blind, up or down, where the contents of the affected elements stay in place |
| SlideUp/SlideDown | Simulates a window blind, where the contents of the affected element scroll accordingly |
| Grow/Shrink | Increases/reduces the size of the element |
| Shake | Moves the element slightly to the left, then to the right, repeatedly |
| Squish | Reduces the element to its top-left corner and disappears |
UNQUOTE
Spry Widgets. According to Adobe, "A widget is a block of HTML, CSS and JavaScript that encapsulates a piece of advanced user interface. Common widgets are accordions, trees and tabbed interfaces." These are the widgets Spry has so far:
Accordion - see articles/accordion_overview/index.html (in the uzipped download). You will need to include the SpryAccordion.js and SpryAccordion.css in the web page to use the Accordion widget. These two files are found in the widgets\accordion folder of the unzipped download of Spry 1.3.
The following widgets were released after Spry 1.3 and will be included in Spry 1.4. You can see demos of these widgets at http://labs.adobe.com/technologies/spry/samples/preview.html. These widgets are:
Collapsible Panel - requires SpryCollapsiblePanel.js and SpryCollapsiblePanel.css.
Menu Bar - requires SpryMenuBarHorizontal.css, SpryMenuBarVertical.css, and SpryMenuBar.js
Tabbed Panel - requires SpryTabbelPanels.css and SpryTabbedPanels.js
Form Select - requires SpryValidationSelect.css and SpryValidationSelect.js
Form Text Field - requires SpryValidationTextField.css and SpryValidationTextField.js
Form Text Area - requires SpryValidationTextArea.css and SpryValidationTextArea.js
Form Checkbox - requires SpryValidationCheckBox.css and SpryValidationCheckBox.js
Auto Suggest - requires SpryAutoSuggest.js
In future blog entries, I'll post examples of how to use the above Spry technologies.
There are no comments for this entry.
[Add Comment]