Using Cinematic Effects on your Web Applications

Overview

This is the first in a series of tutorials from my experience building Solution Grove's Web 2.0 Demo.

I'll start easy by showing you how to use the Ajax Helper Package to add neat effects to your OpenACS applications. The Ajax Helper package is a helper package that hopes to make it easy for OpenACS developers to incorporate Ajax and other javascript effects to OpenACS web applications

If you're wondering how the portlets disppaer and appear in our mashups demo, you'll find out in this tutorial.

Prerequisites

The tutorial expects you to be familiar with OpenACS and its concepts.

You will need OpenACS with the Ajax Helper package installed. It can be found in OpenACS CVS Head. Please consult the documentation in http://www.openacs.org/doc for information on how to checkout a copy of openacs and the ajax helper package.

Sourcing The Javscript Libraries

Ajax Helper provides a layer of abstraction to the Scriptaculous Javascript Library. It merely generates the javascript code you can put into your adp pages. Therefore, the javascript libraries for scriptaculous need to be loaded in the head section of an html page that intends to use it.

Ajax helper uses ah::js_sources to generate the code that declares the javascript sources. This is the code in your tcl file.

	set sources [ah::js_sources -default]

This is what your adp file will look like.

	< property name="header_stuff" > @sources;noquote@ < / property>

When you view the web page on your browser and view source, you will see this in the head section of the page

	< script type="text/javascript" src="/ajax/prototype/prototype.js" >< /script > 
< script type="text/javascript" src="/ajax/scriptaculous/scriptaculous.js" >< /script > 

Note that you can also opt to put this in the blank-master.adp file.

Effects

The tcl wrapper procedure used to generate the javascript code for effects is ah::effects. Here is a sample of how it is used

	[ah::effects -element "test" \
-effect "Fade" \
-options "duration:2.0,afterFinish:function() { alert('I am done'); }" ]

Javascript generated by the above code can be placed in the onClick attribute of an image or link. When this image or link is clicked,

• the html element with the id = "test" will disapper with a fade effect.
• the effect will last about 2 seconds
• when the effect is finished it will execute "alert('I am done');" which is javascript that pops up an alert box.

Practical Example

Our practical example will show an HTML div element with 2 links. Clicking the first link will hide the html element while the second link will make the link reappear. To keep it simple we'll create pracitcal examples in openacsroot/www

1. Create a tcl file (tutorial1.tcl) with the following code

		set sources [ah::js_sources -default]
	set fadescript [ah::effects -element "test" \
	-effect "Fade" \
	-options "duration:2.0,afterFinish:function() { alert('element is gone'); }" ]
	set showscript [ah::effects -element "test" \
	-effect "Appear" \
	-options "duration:2.0,afterFinish:function() { alert('element has appeared'); }" ]
	

2. Create an adp file (tutorial1.adp) with the following code

	  		< html >
	< head >
	< title > Tutorial One < /title >
	@sources;noquote@
	< /head >
	< body >
	< a href="javascript:void(0)" onclick="@showscript;noquote@" > Show < /a > < br >
	< a href="javascript:void(0)" onclick="@fadescript;noquote@" > Hide < /a >
	< div id="test" style="width:100;height:100;background:gray" >< /div >  
	< /body >
	< /html >
	

View the example here .

More Effects

ah::effects is a wrapper to the scriptaculous effects javascript function. Consult the scriptaculous documentation for more information about effects and options you can use in addition to "Appear" and "Fade".