May 28, 2008

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!

May 15, 2008

JavaFX still has a long way to go!

I am not sure when it was launched but I just happened to see JavaFX site! One look things are quite impressive, but as you navigate I just lost the impression. I must agree that the effects are great but it was slow at certain point of time. Even made me feel that my browser had hung! But Firefox handled everything smooth. The site do not feature any demo on available widgets but have really good videos and access to preview SDK. Comparing JavaFX to its competitors, Flex and SilverLight are way ahead. Even though the FX coding seems very simple Sun needs to have a look at trimming JRE. They have been doing this with the lastest Java SE which is still in beta stage. JavaFX

May 14, 2008

Using Ext JS library in Documentum

Documentum provides a very good framework for web applications called WDK. If you have worked with WDK, I am sure you must have come across the Ajax and webtop examples. When ExtJS 2.1 was released I needed to test it features, and the idea of using Ext in Documentum struck me! Here we will integrate Ext and Documentum in a simple WDK application. We will use WDK widgets to build the regural forms but add Ext Slider widget (not available in WDK) to the form.

Integrating or mashups are not always easy. As web developer we all would think that just adding the Ext java script files to the WDK application folders will be enough to get things started. But that turned out to be wrong. So lets start with troubled water.

Troubled Water
We will have few questions first and try answering them. Where will be deploy our Ext files? Where will we access Ext files from (container JSPs or our custom component JSPs)? I will answer these questions collectively. I assume you already have a skeleton WDK application on your server and I am sure you know our customizations will go into to custom folder.

We will hold all Ext related files in customjs folder under the custom folder. And as any normal WDK application, I will have my configurations in config and create appropriate JSPs. Now lets come to the second question. We will access these files from component JSP and will use complete context path to access the java script files. The reason to use complete context path is that, container JSPs access all java script files from /wdk/include folder. Now you know the folder structure, let move to programming.

Setting up Ext
Like any other Ext enabled application I will have a appjs which hold my custom Ext files. In customjs folder I have two folders : appjs and extjs. extjs will hold all the Ext library and appjs will hold our application.js file. In our application we will just be adding a slider to the Documentum form. My application.js will look like this:
app = function() {   
var sampleSlider; 
var sliderClick = function(slider,event) {

sobject = document.getElementById("agetxt");
sobject.value = slider.getValue();

sobject = document.getElementById("sliderval");
sobject.value = slider.getValue();

}
return {
init:function() {        
sampleSlider = new Ext.Slider({renderTo:'sample-slider',width: 200,minValue: 0,maxValue: 100});
sampleSlider.addListener('dragend',sliderClick);

}   
}; 
}();
Note that I have simply initialized Ext.Slider object and rendered it to "sample-slider". I also have added a listener to listen clicks on the slider. We will come back to this later.

Programming your WDK component
I will just create a simple component with a JSP and a behaviour class. The JSP will have a form that will request Name, Age and a slider with which user can select a value. The user will be able to select his age using the slider. But the demo I have displayed a text field for the Age. Ideally we will not need this and we will use a hidden field to hold data. But why do we need hidden fields? In the behaviour class you will not have direct access to the Ext widgets. But you have access to all WDK widgets. This is where hidden field comes to rescue. From the behaviour class you will be able to access the values user sets using the slider. The listener methods that we attached to the slider helps in storing the slider value to the hidden field in the JSP page.

Finally on running the WDK application you will get a good looking Ext widget. You can download all the files (I only have the components & ext js files). But you will have to build the skeleton by yourself. Let me know if you have better ideas or problems.

May 13, 2008

Google introduces Friend Connect

Google launched its new Data portability platform called Friend Connect. The service that helps website owners grow traffic by enabling any site on the web to easily provide social features for its visitors. This these features enabled on your blog or site you will be able to attract more visitors, add social networking features with no or very less programming.

This is Google's next step in social networking. Initially they launched OpenSocial an API for social applications. Then Google profile was launched and integrated with Google Reader. Recently they added commenting (notes) feature in Google reader. Plus they have API that I need not mention (Google Calendar Data API,Google Contacts Data API etc). So with Google Friend you will be able to integrate social features like user registration, invitations, members gallery, message posting, and reviews other other applications built on openSocial. You will also be able with other social networks like facebook, hi5, Plaxo, LinkedIn etc. So, you will be able to connect people from different networks and broadcast activities to friends in their social networks.


I went through an example and was able to login using my Google ID. The application gave me options to connect with my facebook and orkut accounts. With this Google will stay way ahead in social networking and intergration. With OpenSocial around these platforms, I am sure facebook and Yahoo have lots to learn from this.

May 09, 2008

Yahoo and SearchMonkey invitation!

My week long Websphere training kept me away from mails and I was not so surprised to see a mail from Yahoo with the subject line - "Invitation : SearchMonkey Developer Launch Party 5/15". So, they are ready to launch their new approach to searching. The launch party is at Yahoo HQ on May 15th. Apart from the live demos you will get tasty food & beer.

For those who don't know SearchMonkey - Its a new open developer platform that allows developers and site owners to use semantic web standards and structured data to enhance Yahoo! Search results and make them more useful, relevant, and visually appealing.

You can register for the event at upcoming!