Every developer sooner or later ends up in a situation in which he is confronted with a new interesting technique and/or its corresponding API. This always happens on a moment in time where you simply do not have the time to really get into it, or where you have the time but simply do not know where to start. The books have not yet been published, or they have been published, but you’re not much of a reader; you’re the ‘doing’ type. Nobody will ever do you a favor by getting you a book, … any book.

In such a situation one  needs an environment in which you can experiment at your heart’s content without running the risk of ruining something. An environment in which it is always possible to return to the original situation. An environment which allows you to re-use, extend and change relevant code. We now have such an environment.

Mid January Google introduced its ‘AJAX playground’; the place for freely playing and experimenting with all kinds of functionality Google has been offering for some time now. The place for getting acqainted with the underlying code, for ‘stealing’ code, and – foremost – for gaining an understanding of the multiple Google API’s.

Visualisation

The playground offers opportunities for freely playing around with attractive and often more usable ways of displaying data. Not only does the API offer easier, more attractive and dynamic data display. The API also offers you more interactive data display, for instance in socalled ”Motion Charts’. With these one may display data in a way in which dependencies and developments become more obvious using sliders and animation. Next to all this the Google API offers multiple ways to enhance interactivity in tables.

Google Maps

A frequently used API is of course Google Maps. It is hard nowadays to imagine a web without Google Maps. The playground shows some of the possibilities Google Map offers. Of course you may play around with alle the parameters and methods on offer.

Google Earth

Perhaps less used, but definitely not less interesting, is the API involved with Google Earth. To use this API, one needs the  Google Earth Plugin installed on its computer.

Javascript libraries

The Google API’s can be quite easily integrated with existing libraries like jQuery, Prototype, Dojo etc. The playground makes the first steps in this area easy to take.

Code ‘jatten’

Through the ‘Code Menu’ in the upper right corner of the interface, you are offered multiple ways of reusing and adapting source code to fit your own demands. Because the playground interface has its limitations, the export functions are a great way to take the examples and code to your own local development environment.

Conclusions

Google definitely reaches out to the development community with this ‘AJAX playground’. Businesses could definitely profit from what Google has on offer with all these API’s. The playground is a nice way of discovering what it exactly is that Google offers.

The solution is found in a combination of Javascript and CSS. Basically it’s quite simple: we provide every link that needs to be opened in a new window with a class. Then we use Javascript to track down all these links and assign the appropriate behaviour. Let’s see how this works.

The CSS part

We apply a separate class to all links to be opened in a new window. We may call this class something like ‘newwin’, so we get some indication on its purpose. If needed we may add some visual styling tothis class, but the principal purpose of the class is to identify these links so we can add some onclick behaviour.

<a href="http://www.somewebsite.com" class="newwin">Some website</a>

The Javascript part

We include a function in the head of the document that makes it possible to open a url in a new window.

<script type="text/javascript" src="openstrict.js"></script>

We see the following when we look at the file ’openstrict.js’.

function looplinks(){
   var links = document.getElementsByTagName("a");
   if(links){
      for (var i = 0; i < links.length ;i++){
         if(links[i].className == "newwin"){
            links[i].onclick = openstrict;
         }
      }
   }
}
function openstrict(){
   window.open(this);
   return false;
}

The function ’looplinks()’ is called at the end of the xHTML document. This function looks up all links in the document and checks whether a link has a class ‘newwin’ added to it. If so, an onclick event is defined for the link. In this onclick event, the function  ‘openstrict()’ is called.

The function ’openstrict()’ catches the clicked element and uses the value of its href attribute to open this url in a new window, using the Javascript method window.open. We add the ‘return false’ statement to prevent opening the url in the current window.

The last thing left to do, is calling  ‘looplinks()’. We do this by placing the following just before the closing body tag.

<script type="text/javascript">looplinks();</script>

That’s it. No rocket science, valid xHTML Strict and an easy way to open links in a new window. Tested under Windows  in IE6, IE7, Firefox 2 en 3 and Safari 3.1.