Google releases Closure!

When Gmail was released I was very enthusiastic in knowing how they built the application around the Ajax technology. Since Gmail, Google have released many successful web application to the public and now they have decided to release the core javascript library that they used to build these application.

Introducing the Closure library and javascript tools built by Google to build applications that scale! They are open sourcing these tools to the web development community. The toolkit consists of :

Closure Complier - A javascript compiler that is used to optimize the code. The compiler is said to remove dead code and minimize the code. It also checks the syntax, variable references and warn about javascript pitfalls.

Closure Library - Is a broad, modular and cross browser javascript library. Developers can make use of the wide range of UI widgets and controls, server communication, effects, data structures etc etc..

And finally, the Closure Templates - are web templates that are precomplied to efficient javascript. Interesting part of templates is that they are implemented for both javascript and java! Meaning you can use the same template on client and sever side.

But, I really wonder why they named the library "Closure" as it very related to programming language terminologies. I also wonder why they released it into Google Labs if they have been using it. According to Google the Closure started out as 20% projects and all google applications currently use it. Open sourcing such a tool is a great boon to web developers!

Google Introduces AJAX Libraries API

With plenty of open source AJAX libraries out there (and increasing), Google has come up with the idea of host the most popular once. This will developers instant access to AJAX libraries like jQuery, Dojo etc. Web developers ; I would say mostly people who have blogs and wikis hosting on free services like blogger, wordpress etc, will now be able to use these libraries by just loading them using the new API.

AJAX Libraries API will simply help you to loading architecture for the most popular open source Java Script libraries. These libraries are hosted on Google's servers. Developers can use Google's API loader's google.load method to load the library. Presently, Google hosts the following Java Script libraries:

• jQuery
• Dojo
• prototype
• script.aculo.us
• MooTools

And Google promises to keep the list growing! Google has struck a deal with all these libraries to host the latest versions as they release. But I am not sure for how long they will retain the old versions. The major advantage of using this API will be the ability to access these open source libraries even without hosting them. Also, you will be able to use features from multiple libraries in your blog or web site. I am the major reason for Google to come up this library API and hosting them is to enable these Java Script libraries to their App Engine. With these libraries at developers disposal developers will be able to embed lot of UI and client side features to the web applications they develop.

All these look good, but did Google miss somebody? Or did they ignore them? I am talking about Ext JS. Ext has been recently "hot" on web for wrong reasons! I was just wondering Google really missed them or ignored them? And I don't have to comment on YUI. I am sure, Yahoo's java script library is not going to make to the list!Polities aside; lets have look at how to use this library!

Introducing google.load() Method
Google with its vast API set, has a very simple API loading technique. To use the basic API you need to load a JS from the URL http://www.google.com/jsapi. Some API will require you to have the Google API key. But the AJAX library do not require one. Developers load the necessay Java Script files on the client side using a simple method google.load(). For example; if we need to load jQuery version 1.2.3:

<script src="http://www.google.com/jsapi"></script>
<script>
  // Load jQuery
  google.load("jquery", "1.2.3");
</script>

Ok, so now I have the jQuery library load. How do I use it? Google also provides a callback function which is invoked once the module (library) is loaded. The callback method is specified by google.setOnLoadCallback(myMethod) method. And finally, myMethod will have all my logic!

Trying an example!
To have a feel of the need API, I just tried out some simple tasks using jQuery. Here is the example and its source:

<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.3");

google.setOnLoadCallback(function() {

 $("a").click(function() {
     alert("Hello world!");
   });

 $("#sam").click(function() {
  alert("display");
  $("#hidden").show();
 });

});
</script>
</head>
  <body> 
   The content begins.. <br/>
   <div class="divStyle newStyle">
 <a href="http://www.google.com">This</a> is a test </div>   <br/>
   <div id="sam"> This is another Test <div id="hidden" style="display:none">hidden text</div></div>
   The content ends.. <br/>
  </body>
</html>

I will give a demo on adding some useful components and widgets from these libraries later. Till then bye!

Spry framework : A less cared framework?

I wonder how many Ajax developers know about Adobe Spry? I too feel, I have ignored it for long. Everything apart, lots of question arises about a Ajax framework from Adobe. The reason? Adobe is one of the tough competitor to Ajax. With its Flex and AIR technology to build RIA, they are still ahead in RIA technology. Still in prerelease, Spry offers a way to incorporate XML, JSON or HTML data into pages using HTML, CSS, and a minimal amount of JavaScript. Lets have a look at this framework and unearth its pros and cons.

Spry claims to be "Ajax for Everyone". It provides a set of easy to implement set of widgets, effects and data handlers. The main advantage is each component in the framework can be used independently of one another. So, developers need only to include what they need! Other frameworks have lots of files and folder structure to implement widgets like accordion, tabbed panels etc. The major disadvantage of these hierarchical and dependency oriented frameworks are:

• The framework becomes big and complex.
• To implement a single feature, you require to host the entire framework.
• Implementing a small feature might have a big learning curve.
• Difficult to deploy the framework in a restrictive environment.

Spry framework is the solution to all these plus other advantages. It makes implementing features to the existing web pages very easy. The widgets created into the HTML tags and the framework do not create its own tags. This increases debugging capabilities and readability of the displayed HTML. Dojo toolkit also uses the same methodology to embed widgets. But Spry takes things further to reduce the amount of Java script involved. Advantages does not end here. Each widget is coded independent and developers need to include only the widget files he is going to use. Developer has to use the appropriate CSS and JS files. All he has to do is copy these files to his existing web site folder structure, link them from the page and all the code.

Another advantage with Spry is its ability to work in restrictive environment. Let me explain a restrictive environment. Lets assume I need a accordion in my blog which is hosted on blogger. I am going to host my external java script files in google pages and not any file sharing service available on web; the reason - many corporates blocks these sites and if I host my external files, I am guaranteed of getting my blog messed up for some users. And adding accordion can be made possible by keeping Spry files in google pages and using it in my blog. I will soon demonstrate this feature on my blog.

So why is Spry not so popular? The main reason for this could be Adobe's RIA technology using Flex and AIR. You will also notice that they have not given much UI effects to the widgets in the Spry framework. So, Flex technology itself is shadowing Spry. But Spry can be very helpful when developers need only certain functionality in their web page or application. So if you are an web developer looking to add some features to your pages, have a look at Spry framework!

Implementing Section 508

One fellow programmer raised this question in jGuru forum; "if a user logs-in to my web application written in PHP in Firefox, Java Script should simulate doing 'Ctrl+' so that the screen size increases". For me it sounded like implementing one of the points mentioned in Section 508. Section 508 was an amend to US congress which says electronic and information technology should be accessible to people with disabilities. Many sites like BBC have implemented this. Let have a look how we can implement one of the point in Section 508.

Here we will implement in a very small way. The solution I have provided is not complete, but you need to take it forward and modify if you need to use it in blogs or sites. For experiencing a good implementation of Section 508 check out this.

The Requirement:
As a simple statement: Provide keyboard shortcuts to increase and decrease font size in a browser. Usually sites will have button where users can select the size, font and even colour of the page’s text. In this work, we will focus on to provide button to increase and decrease font size and also provide keyboard shortcut.

Why Keyboard shortcut?
Until recently, web application never supported keyboard shortcuts. They have become famous through Gmail and Google Reader and it has been success ever since. Providing shortcuts to you web applications and web pages can improve the productivity of the user. It can also help in quick navigation. But the problem is providing a “standard” set of shortcuts which will work on all browsers. For example, you can increase the font size in Firefox with “Ctrl + Plus”, but this is not applicable in IE.

Our implementation:
We will have a non-standard keyboard shortcut to increase and decrease the font in our implementation. :( (I can’t help it!). To handle keyboard events through javascript you will find many libraries available on web. I will be using the openjs library and the reason? It’s a simple, single file library. To keep your implementation simple and easy to handle we will have the styles, script and HTML in one file.

To start with, we will be using CSS to apply style to all content in your page. Let say we have many styles, but what we need is the list of CSS class which needs to be updated when user request to increase or decrease font size. We will update all these CSS styles through JavaScript when user click on the appropriate button or hit the keyboard shortcut. To handle keyboard, we will initialize listeners in an init method.

shortcut.add("Ctrl+Shift+A",increment);
shortcut.add("Ctrl+Shift+Z",decrement);

This method will be called on onLoad event of the web page. We will track Ctrl+Shift+A and Ctrl+Shift+Z keystrokes and the appropriate methods will be called (increment and decrement).

To modify the font attributes, we need to search through styleSheets object list of a document. I have created my own method to do so.

function getStyleByName(styleName) {
 for (i=0; i<document.styleSheets.length; i++) { 
  if (document.styleSheets[i].cssRules) {
   for (j=0;j<document.styleSheets[i].cssRules.length; j++) {
       if (document.styleSheets[i].cssRules[j].selectorText == styleName) {
         return document.styleSheets[i].cssRules[j].style;
       }
     }
  } else {
   for (j=0;j<document.styleSheets[i].rules.length; j++) {
       if (document.styleSheets[i].rules[j].selectorText == styleName) {
         return document.styleSheets[i].rules[j].style;
       }
     }
    } 
  }
}

Given a CSS class name, the method traverse through the styleSheets objects and return the style object. In this example we will modify only one style, but if you need to modify multiple CSS styles, you will have to stores these names in an array.

Now have a look at the complete code:

<html>
  <head>
  <style>
  .divStyle {
   color: red;  
  }
  .newStyle {
   font-weight: bold;
  }
  </style>  
  <script type="text/javascript" src="shortcuts.js"></script>
    <script type="text/javascript">
    //<![CDATA[ 
function getStyleByName(styleName) {
 for (i=0; i<document.styleSheets.length; i++) { 
  if (document.styleSheets[i].cssRules) {
   for (j=0;j<document.styleSheets[i].cssRules.length; j++) {
       if (document.styleSheets[i].cssRules[j].selectorText == styleName) {
         return document.styleSheets[i].cssRules[j].style;
       }
     }
  } else {
   for (j=0;j<document.styleSheets[i].rules.length; j++) {
       if (document.styleSheets[i].rules[j].selectorText == styleName) {
         return document.styleSheets[i].rules[j].style;
       }
     }
  }
  }
}
 
function testStyleSheet() {  
 var styleObj = getStyleByName(".divStyle");
 if(styleObj) {
  alert('style.font-size: ' + styleObj.fontSize);
 } else {
  alert('style not found.');
 }
} 

function increment() {
 var styleObj = getStyleByName(".divStyle");
 if(styleObj) {
  styleObj.fontSize = "20px";  
 } else {
  alert('style not found.');
 }
}

function decrement() {
 var styleObj = getStyleByName(".divStyle");
 if(styleObj) {
  styleObj.fontSize = "10px";  
 } else {
  alert('style not found.');
 }
}

function init() {
 shortcut.add("Ctrl+Shift+A",increment);
 shortcut.add("Ctrl+Shift+Z",decrement);  
}
 //]]>
   </script>
  </head>
  <body onLoad="init()"> 
   <input type="submit" onclick="increment()" value="Increment Size"/>
   <input type="submit" onclick="decrement()" value="Decrement Size"/>
   <input type="submit" onclick="testStyleSheet()" value="Test StyleSheet"/>
   <hr/>
   <div class="divStyle">A sample text</div>
   <div> Without the disStyle class attched to the DIV tag. the fonts will not increment and decrement. The big trouble is the key combination in mozilla.
    http://www.openjs.com/scripts/events/keyboard_shortcuts/
   </div>
   <div class="divStyle newStyle"> This is a test </div>
  </body>
</html>

So, there you go! Remember, this is NOT complete and you can take it forward.
Keep programming :)

jQuery introduces UI and Special effects

jQuery is one of the simplest JavaScript library available for handling events, performing animations, and add Ajax web pages. jQuery team has announced the alpha release of two new JavaScript libraries: jQuery UI and jQuery Ehchant! These two libraries add UI and special effects to existing jQuery library.

Like any other JavaScript library, jQuery UI provides a set of themable widgets on top of the jQuery core library. The (Alpha) library provides widgets like Accordion, Dialog boxes, Tabbed content panes, Tables etc. And the team still working on widgets like Menu, Toolbars, Tree, Splitter, Rich Text Editor etc. for a demo on the existing widgets try the URL : http://ui.jquery.com/1.5a/demos/.

On the other side, jQuery Ehchant is meant for special effects. You can see dome cool examples of this library here! To use these, you will need the jQuery core library. So download jQuery 1.2.3! this new release includes support for Adobe AIR, Namespacing and of course, jQuery UI. You can download these libraries at:

jQuery UI: http://jqueryjs.googlecode.com/files/jquery.ui-1.5a.zip
jQuery Enchant: http://jqueryjs.googlecode.com/files/jquery.enchant-1.0a.zip

You can also access all the documentations here. Happy jQuerying!