google
yahoo
bing

August 2006

Monthly Archive

Thu 17 Aug 2006

Google Calendar API and the Java Client Library

Posted by anadeau under Developer Wing , Coding Tips & Info
[2] Comments 

Hey Everyone! Yeah, it’s been awhile since my last blog… been traveling a bit… waiting for a laptop to get fixed… blah blah.

So, Google is in the news a lot these days. Google and Web 2.0 seem to almost go hand in hand. Almost as much as Microsoft trying to take down Google :O (sorry MS fans… just a cheap shot)

Our company Evolving Solutions is working on a new web application that is going to try and integrate a few Web 2.0 applications within it… let’s say a Calendar (Google Calendar possibly?)… maybe some uploading of videos (Google Video possibly?) and maybe a couple other features. So, I figured it was time to dive into the Google API’s that I’ve heard so much about.

First thing I have to say is their site is very difficult to navigate around. I think partly it’s just because they have so much on the go, but I found it difficult to find the information for “Integrating the Google Calendar”. But after searching around and reading some (which I’m terrible at when looking for something new… as most developers are). I stumbled across 2 important links:

One nice thing is that Google is trying to develop all their services to be accessed through similar API code… the technical term is: The Google data APIs (”GData” for short) and you can read more about it at the following link: http://code.google.com/apis/gdata/overview.html

Now, it might seem a bit overwhelming at first… but if you are a Java developer (or C# developer, there is a client library also) I suggest taking an afternoon and looking into this stuff. For example, if you or a client of yours has a Google Account and use the Calendar service to organize their life, you can easily integrate it within your web applications. So, basically you can set it up so they can add/edit/remove events directly to and from their Google Calendar while logged into your application. You can also grab all the events and have them displayed. Very powerful stuff when you think about it. Takes them 5 seconds to sign up and you gain the advantage of a powerful Web 2.0 application supported by one of todays best technology companies (not a bad deal really for free)… well, I guess you have to build a few pages to interact with it, but that’s about it. Welcome to WEB 2.0 my friend!

I won’t put many code examples here, they step you through it pretty well in the Java Client Library Tutorials (working with the Calendar actually).

After about a day or 2 of working with the Google API’s, I feel very comfortable and excited to look into more potential integration with Google services. I don’t think they are going away any time soon… so it wouldn’t hurt to jump on board! It’s only gonna get better!

Cheers,
Adrian

 

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 & Info
No 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:

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:

PLAIN TEXT
HTML:
  3. <title>Evolving Solutions Ajax Examples</title>
  4.  
  5. <script src="/evolve/javascripts/prototype.js" type="text/javascript"></script>
  6. <script src="/evolve/javascripts/scriptaculous.js" type="text/javascript"></script>
  7. <script src="/evolve/javascripts/custom/ade_functions.js" type="text/javascript"></script>
  8.  
  12. <div id="ade_test">
  13. <table width="500" border="1" cellpadding="0" cellspacing="0">
  14.     <tr>
  15.         <td valign="top">
  16.             <b>Text box:</b>
  17.         </td>
  18.         <td valign="top">
  19.             <input type="text" size="40" maxlength="100"  id="txBox" value="Type something here, it will stay...">
  20.         </td>
  21.     </tr>
  22. </table>
  23. <table width="500" border="0" cellpadding="0" cellspacing="0">
  24.     <tr>
  25.         <td valign="top">
  26.             <center><img src="anadeau_482_portrait.jpg"></center>
  27.         </td>
  28.     </tr>
  29. </table>
  30. </div>
  31.  
  33.  
  34. <table width="500" border="0" cellpadding="0" cellspacing="0">
  35.     <tr>
  36.         <td valign="top">
  37.             <input type="button" value="Appear" onclick="testFunction('appear');">&nbsp;
  38.             <input type="button" value="Fade Me" onclick="testFunction('fade');">&nbsp;
  39.             <input type="button" value="Fade Slow" onclick="testFunction('fadeslow');">&nbsp;
  40.             <input type="button" value="Puff Up" onclick="testFunction('puff');">&nbsp;
  41.             <input type="button" value="Drop Me" onclick="testFunction('dropme');">&nbsp;
  42.             <input type="button" value="Shake Me" onclick="testFunction('shake');">&nbsp;
  43.            
  44.             <BR><BR>
  45.            
  46.             <input type="button" value="Hilite" onclick="testFunction('hilite');">&nbsp;
  47.             <input type="button" value="Switch Off" onclick="testFunction('switchoff');">&nbsp;
  48.             <input type="button" value="Blind Up" onclick="testFunction('blindup');">&nbsp;
  49.             <input type="button" value="Blind Down" onclick="testFunction('blinddown');">&nbsp;
  50.             <input type="button" value="Slide Up" onclick="testFunction('slideup');">&nbsp;
  51.             <input type="button" value="Slide Down" onclick="testFunction('slidedown');">&nbsp;
  52.            
  53.             <BR>
  54.             <input type="button" value="Pulse" onclick="testFunction('pulse');">&nbsp;
  55.             <input type="button" value="Squish" onclick="testFunction('squish');">&nbsp;
  56.             <input type="button" value="Fold" onclick="testFunction('fold');">&nbsp;
  57.             <input type="button" value="Grow Top Left" onclick="testFunction('growtl');">&nbsp;
  58.             <input type="button" value="Grow Center" onclick="testFunction('growc');">&nbsp;
  59.             <input type="button" value="Shrink" onclick="testFunction('shrink');">&nbsp;
  60.         </td>
  61.     </tr>
  62. </table>
  63.  
  64. </BODY>
  65. </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:

PLAIN TEXT
JavaScript:
  1. function testFunction(affect_type) {
  2.  if(affect_type=="fade"){
  3.         Effect.Fade('ade_test');
  4.  }
  5.  else if(affect_type=="fadeslow"){
  6.        Effect.Fade('ade_test',{duration:5, from:1.0, to:0.0});
  7.  }
  8.  else if(affect_type=="puff"){
  9.        Effect.Puff('ade_test');
  10.  }
  11.  else if(affect_type=="dropme"){
  12.        Effect.DropOut('ade_test');
  13.  }
  14.  else if(affect_type=="appear"){
  15.        Effect.Appear('ade_test', { duration: 3.0 });
  16.  }
  17.  else if(affect_type=="shake"){
  18.        Effect.Shake('ade_test');
  19.  }
  20.  else if(affect_type=="hilite"){
  21.        new Effect.Highlight('txBox', {startcolor:'#ff99ff', endcolor:'#999999', duration: 3.0});
  22.  }
  23.  else if(affect_type=="switchoff"){
  24.        Effect.SwitchOff('ade_test');
  25.  }
  26.  else if(affect_type=="blindup"){
  27.        Effect.BlindUp('ade_test');
  28.  }
  29.  else if(affect_type=="blinddown"){
  30.        Effect.BlindDown('ade_test');
  31.  }
  32.  else if(affect_type=="slideup"){
  33.        Effect.SlideUp('ade_test');
  34.  }
  35.  else if(affect_type=="slidedown"){
  36.        Effect.SlideDown('ade_test');
  37.  }   
  38.  else if(affect_type=="pulse"){
  39.        Effect.Pulsate('ade_test');
  40.  } 
  41.  else if(affect_type=="squish"){
  42.        Effect.Squish('ade_test');
  43.  }
  44.  else if(affect_type=="fold"){
  45.        Effect.Fold('ade_test');
  46.  }
  47.  else if(affect_type=="growtl"){
  48.        new Effect.Grow('ade_test', {direction: 'top-left'});
  49.  }
  50.  else if(affect_type=="growc"){
  51.        new Effect.Grow('ade_test', {direction: 'center'});
  52.  }
  53.  else if(affect_type=="shrink"){
  54.        new Effect.Shrink('ade_test');
  55.  }
  56.  
  57. }

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