Spry Effects
While Spry Effects have been part of the framework for some time there has been a rewrite of the Effects library for version 1.5 -- notably changes have been made to the names of the methods themselves to make them more consistent with other languages.
The purpose of the Spry Effects is to add visual effects to visual elements on an HTML page. These effects can include animated transitions and content highlighting. I'm a big believer in the judicial use of animation, keeping its use to a minimum, but there are times where it can be used to do things like indicate application state. A transition from one state to another can be subtly animated to give the user better feedback.
The Spry Effects are:
- Blind
- Fade
- Glow
- Highlight
- Shake
- Slide
- Squish
Observers can be used to combine effects together so that, for example, as one panel is reduced in width another is proportionally increased in width by the same amount giving the switch between the two panels a sliding effect.
Clustering allows effects to be run one after another so that a panel could first increase in width then increase in height instead of simultaneously which is what an observer could do.
Below is an excerpt from an HTML page where the Blind Effect has been used. In this example the effect is triggered by clicking on a hyperlink; the Blind Effect will make the div containing the text reduce in height gradually until it's disappeared and will work from the hyperlink in both directions. The Spry Effects library is part of the standard includes directory from within the Spry download.
<title>Spry Effect Example</title>
<script src="includes/SpryEffects.js" type="text/javascript"></script>
<style type="text/css">
.animationContainer{
height: 220px;
}
.demoDiv{
height: 200px;
width: 400px;
overflow: hidden;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<a href="#" onclick="blind_toggle.start(); return false;">Blind Example</a>
<br />
<div class="animationContainer">
<div class="demoDiv" id="slideItUp2">
<h4>Spry Blind Effect Example</h4>
<p class="sampleText">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</div>
<script type="text/javascript">
<!--
var blind_toggle = new Spry.Effect.Blind('slideItUp2', {toggle:true});
//-->
</script>
Spry and Dreamweaver CS3
An enhanced version of Spry 1.4 is integrated into Dreamweaver CS3, with tag editors making the job easy. Spry Data, for example, is easier to implement through the dialogs in Dreamweaver CS3 because you can do things like import the XML schema and preview data. Dreamweaver CS3 will also include the necessary JavaScript and CSS files in the current site.
Included in the Spry toolbar are three sets of objects discussed previously; for displaying XML data, form validation elements, and menus and panel sets.
Dreamweaver CS3 can introspect the XML data used by the Spry XmlDataSet library, displaying the individual properties of a row within the Bindings panel -- these properties can be dragged from the Bindings panel into the page and provided they're within a Spry Region or Spry Repeat will be dynamically rendered within the browser.
Conclusion
The Spry framework is an easy to implement Ajax framework, especially for designers, who are the intended user group. Web standards adherents have made criticism that the implementation of Spry makes use of custom HTML attributes, for the uninitiated this may not be an issue as the Spry components work as promised.
While Spry is integrated in Dreamweaver CS3 it is easy to deploy from within a text editor -- Adobe supply a multitude of examples with the Spry download. The current release has an API that allows developers to create their own widgets to use within the Spry framework.
Do you need help with AJAX? 
1
Sohail - 23/07/07
Good article. But is there any article that helps me how to update the dynamic contents from another file.
Regards
Sohail
Web Developer
www.seomaterial.com
» Report offensive content
2
Belal - 22/07/08
when i use external xml file "from another server" i cant see the result in IE and firefox, my code did't have any bugg.
but when i use file from internal ; i see result.
» Report offensive content
3
physicsguru - 22/07/08
I am fairly new to using XML; however, I have been reading up on it over the last few weeks. O'Reilly puts out a book called XML and in it, I believe the XML file and javascript have to be within the same domain name (no cross-server scripts). I could be wrong, and if I am, someone please show me how to do it.
» Report offensive content
4
akihon - 27/09/09
ok this very good.
» Report offensive content