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

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.

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.

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!

Adding Spry widgets to blogger

In my previous article I introduced you to Adobe's Spry framework for Ajax and explained its pros and cons. In this article, we will implement Spry into a blog and see how beautifully it works. Our aim will be to add an accordion in the right column. We will display a panel of badges, and widgets like Blog Rush and Feedjit in this accordion.

Spry provides widgets that are independent to one another and this makes it very easy to implement it restrictive environment. Another plus point is that your implementation of accordion is going to be very small. And the implementation is very simple. Once you have the downloaded Spry framework, you need unzip it and get hold of just two files located at \widgets\accordion. You need SpryAccordion.css and SpryAccordion.js files to build your project. If you want to make come changes, you can modify the CSS file. The file contains all the necessary style classes required for the accordion widget.

Once your custom modifications are done. Its time we move it on to the web! To host these two files, I will be using Google Pages. Many of you will be wondering why I am using Google pages and not other services that are specifically used to host files on web. The reason is, majority of these hosting services are bocked at corporate gateways and offices. I am not willing to mess up by blog when professionals access my blog. So, I will be using Google Pages. Coding a Spry widget is very simple. The accordion we are building will be represented as DIV tags. We will have a main DIV tag denoting the widget and each accordion panel will be represented as separate DIVs inside the main one. Each panel is further divided into panel heading and content. Both these parts are also denoted using DIV. So our widget code will look like this on completion:

<div class="Accordion" id="sampleAccordion" tabindex="0">
 <div class="AccordionPanel">
  <div class="AccordionPanelTab">Panel Heading</div>
  <div class="AccordionPanelContent">
   All the blog badges, images, will go in here.
 I can have multiple para tags and other tag here.
  </div>
 </div>
 <div class="AccordionPanel">
  <div class="AccordionPanelTab">Panel Heading next</div>
  <div class="AccordionPanelContent">
   Content for Panel 2 goes here!
  </div>
 </div>
 <div class="AccordionPanel">
  <div class="AccordionPanelTab">Final</div>
  <div class="AccordionPanelContent">
   Content for the last accordion panel goes here!
  </div>
 </div> 
</div>

Spry framework will not render the above code as accordion. We need to initialize the widget using Java Script. The initialization is also simple and straight forward as creating a object in Java using constructors. Have a look at how we initialize the widget:

<script language="JavaScript" type="text/javascript">
var sampleAccordion = new Spry.Widget.Accordion("sampleAccordion");
</script>

You can add this code into blogger template or use a HTML page element to hold the widget. Last modification to the blog is to add the CSS and widget JS files to the blogger template. This can be as simple as:

<link href="http://araotest.googlepages.com/SpryAccordion.css" rel="stylesheet" type="text/css" media="all" />
<script src="http://araotest.googlepages.com/SpryAccordion.js" type="text/javascript"></script>

You can see the demo on my testing blog where I build templates and test different functionalities. I am sure you will be confident enough to implement any other Spry widgets on a blog or site. Watchout for some interesting widgets to appear on my blog soon.