Tue 1 Aug 2006
Want to Web 2.0 your application? OpenSource it with script.aculo.us!
Posted by anadeau under Developer Wing , Open Source , Coding Tips & InfoNo Comments
WEB 2.0 IS HOT RIGHT NOW! A lot of people are talking big about the new way of technology and building applications. It's hard to describe WEB 2.0 because it can mean so many different things to so many people. So, I'm going to steal a quote from the Wikipedia documentation on it:
The term Web 2.0 refers to a second generation of services available on the World Wide Web that lets people collaborate and share information online. In contrast to the first generation, Web 2.0 gives users an experience closer to desktop applications than the traditional static Web pages. Web 2.0 applications often use a combination of techniques devised in the late 1990s, including public web service APIs (dating from 1998), Ajax (1998), and web syndication (1997). They often allow for mass participation (web-based social software). The concept may include blogs and wikis.
So, me being the prototypical techie, I am always interested in new technologies... so I've gotten myself involved in Web 2.0... which involves a lot of AJAX. AJAX is new... and it can be a bit overwhelming at first (as I posted previously).
I bought a book to start off with (AJAX Hacks)... which was a good starting point. Lots of good examples to get started with AJAX and WEB 2.0. I read an interesting chapter that talked about an AJAX Framework called script.aculo.us. First thing I thought was weird name, still not sure how to say it to be honest 
. Then, I read how it's used to create some really, really neat (and useful) AJAX effects for applications. Even they state the obvious on their homepage:
script.aculo.us provides you with easy-to-use, compatible and, ultimately, totally cool JavaScript libraries to
make your web sites and web applications fly, Web 2.0 style.
Visit the site to read up more on it. There site can be a bit confusing, but basically it's a refreshing JavaScript library that is very easy to setup and use. Here are some key links to the site to assist if you want to looking into it more:
- Setup/Usage -http://wiki.script.aculo.us/scriptaculous/show/Usage
- Really cool demos - http://wiki.script.aculo.us/scriptaculous/show/Demos
- Library Documentation - http://wiki.script.aculo.us/scriptaculous/show/Prototype
- Visual Effects Documentation - http://wiki.script.aculo.us/scriptaculous/show/VisualEffects
- Developer Notes for prototype.js by Sergio Pereira - http://www.sergiopereira.com/articles/prototype.js.html
I think the best way to figure out this library is to dive in, setup up the files (very easy 5 step process) and play around with all the different method calls. If you need assistance, here is what I did to become familiar with the library. I created a JSP Page with the following code:
-
<title>Evolving Solutions Ajax Examples</title>
-
-
<script src="/evolve/javascripts/prototype.js" type="text/javascript"></script>
-
<script src="/evolve/javascripts/scriptaculous.js" type="text/javascript"></script>
-
<script src="/evolve/javascripts/custom/ade_functions.js" type="text/javascript"></script>
-
-
<div id="ade_test">
-
<table width="500" border="1" cellpadding="0" cellspacing="0">
-
<td valign="top">
-
<b>Text box:</b>
-
</td>
-
<td valign="top">
-
<input type="text" size="40" maxlength="100" id="txBox" value="Type something here, it will stay...">
-
</td>
-
</tr>
-
</table>
-
<table width="500" border="0" cellpadding="0" cellspacing="0">
-
<td valign="top">
-
</td>
-
</tr>
-
</table>
-
</div>
-
-
-
<table width="500" border="0" cellpadding="0" cellspacing="0">
-
<td valign="top">
-
<input type="button" value="Appear" onclick="testFunction('appear');">
-
<input type="button" value="Fade Me" onclick="testFunction('fade');">
-
<input type="button" value="Fade Slow" onclick="testFunction('fadeslow');">
-
<input type="button" value="Puff Up" onclick="testFunction('puff');">
-
<input type="button" value="Drop Me" onclick="testFunction('dropme');">
-
<input type="button" value="Shake Me" onclick="testFunction('shake');">
-
-
-
<input type="button" value="Hilite" onclick="testFunction('hilite');">
-
<input type="button" value="Switch Off" onclick="testFunction('switchoff');">
-
<input type="button" value="Blind Up" onclick="testFunction('blindup');">
-
<input type="button" value="Blind Down" onclick="testFunction('blinddown');">
-
<input type="button" value="Slide Up" onclick="testFunction('slideup');">
-
<input type="button" value="Slide Down" onclick="testFunction('slidedown');">
-
-
<input type="button" value="Pulse" onclick="testFunction('pulse');">
-
<input type="button" value="Squish" onclick="testFunction('squish');">
-
<input type="button" value="Fold" onclick="testFunction('fold');">
-
<input type="button" value="Grow Top Left" onclick="testFunction('growtl');">
-
<input type="button" value="Grow Center" onclick="testFunction('growc');">
-
<input type="button" value="Shrink" onclick="testFunction('shrink');">
-
</td>
-
</tr>
-
</table>
-
-
</BODY>
-
</HTML>
Then inside the file referenced at the top of the JSP page named ade_functions.js, I added this simple method call to test all the different methods available:
-
function testFunction(affect_type) {
-
if(affect_type=="fade"){
-
Effect.Fade('ade_test');
-
}
-
else if(affect_type=="fadeslow"){
-
Effect.Fade('ade_test',{duration:5, from:1.0, to:0.0});
-
}
-
else if(affect_type=="puff"){
-
Effect.Puff('ade_test');
-
}
-
else if(affect_type=="dropme"){
-
Effect.DropOut('ade_test');
-
}
-
else if(affect_type=="appear"){
-
Effect.Appear('ade_test', { duration: 3.0 });
-
}
-
else if(affect_type=="shake"){
-
Effect.Shake('ade_test');
-
}
-
else if(affect_type=="hilite"){
-
new Effect.Highlight('txBox', {startcolor:'#ff99ff', endcolor:'#999999', duration: 3.0});
-
}
-
else if(affect_type=="switchoff"){
-
Effect.SwitchOff('ade_test');
-
}
-
else if(affect_type=="blindup"){
-
Effect.BlindUp('ade_test');
-
}
-
else if(affect_type=="blinddown"){
-
Effect.BlindDown('ade_test');
-
}
-
else if(affect_type=="slideup"){
-
Effect.SlideUp('ade_test');
-
}
-
else if(affect_type=="slidedown"){
-
Effect.SlideDown('ade_test');
-
}
-
else if(affect_type=="pulse"){
-
Effect.Pulsate('ade_test');
-
}
-
else if(affect_type=="squish"){
-
Effect.Squish('ade_test');
-
}
-
else if(affect_type=="fold"){
-
Effect.Fold('ade_test');
-
}
-
else if(affect_type=="growtl"){
-
new Effect.Grow('ade_test', {direction: 'top-left'});
-
}
-
else if(affect_type=="growc"){
-
new Effect.Grow('ade_test', {direction: 'center'});
-
}
-
else if(affect_type=="shrink"){
-
new Effect.Shrink('ade_test');
-
}
-
-
}
That was it really... once you have this setup you can load the page and click on all the buttons to see the different effects that script.aculo.us provides. I'm now using this library in a number of applications and clients really seem to enjoy the refreshing new look and features... nice work script.aculo.us!!!
Cheers,
Adrian
