Monday Nov 03, 2008

Be Social by running SocialSite on Tomcat

Sometime ago, I saw an announcement of the first release of SocialSite. Basically it is a Java implementation to add social features to your existing website. Check out Arun Gupta's blog on the usage of SocialSite. I thought of trying it out and it works fine on Glassfish. Out of the box there was no way of getting it to work on another container, such as Tomcat. Not very social I thought :-)

Anyway thought of trying to get it to run on Tomcat. Following is the procedure to get SocialSite to work on Tomcat. If you understand and follow what is going on, and why each of these steps is being done, it should be trivial to port SocialSite to run on any other container.

These instructions are for Tomcat 5.5 and MySQL. I would rather you proceed with the source code download of SocialSite and build the distribution from there. You can download the distribution from the SocialSite site, and add the following things mentioned in your downloaded bundle, but I haven't tested that. But I don't see a reason why that shouldn't work either.

So go ahead, download the source code for the SocialSite as per instructions given here. Once you have the source code downloaded, follow the steps given below to get SocialSite to work on Tomcat.

SOCIALSITE_SRC_HOME is where you downloaded the source code for SocialSite.

Configure the Global JNDI Resource for the database.

SocialSite uses a JNDI resource by the name of 'jdbc/SocialSite_DB' to access your database. So you need to create a JNDI resource by that name. You can refer to the Tomcat 5.5 documentation page here to get information on how to define a per-application JNDI resource using the <Resource> tag in your context.xml. Or you can read along as I show below how to do it.

Under the SOCIALSITE_SRC_HOME/web/META-INF there is a file called context.xml. Make sure it looks following and save the file. Ofcourse make sure that entries for url, username and password do match for your MySQL database, so that the connection to the DB succeeds. The other JNDI resource is about javax.mail.Session that SocialSite uses to send out e-mails.

<Context path="/socialsite">

<Resource name="jdbc/SocialSite_DB" auth="Container"
type="javax.sql.DataSource" user="root" username="root" password="abc123"
driverClassName="com.mysql.jdbc.Driver" url="jdbc:mysql://localhost:3306/socialsite"
maxActive="100" maxIdle="30" maxWait="10000"/>

   <Resource name="mail/SocialSite/Session" auth="Container"
description="Mail Session for SocialSite" scope="Shareable" />


Update persistance related entries of SocialSite so Tomcat loves them

The default SocialSite install works on Glassfish. Glassfish is a container which supports the JavaEE 5 specification and hence has a persistence engine built-in. SocialSite uses the JPA features to interface to a database. So to get SocialSite to work with Tomcat we need to enable persistence capabilities in it. Fortunately SocialSite bundles the EclipseLink libraries which include a persistence provider.

However, the persistence.xml included in the SocialSite includes a persistence.xml which tries to lookup the DB via a JNDI lookup. This doesn't work outside a EJB container by default, and Tomcat is not a EJB container. So to enable EclipseLink to pick up the DB details we need to configure it as we would be doing in a pure Java SE environment. For doing this you will have to modify the SOCIALSITE_SRC_HOME/src/java/META-INF/persistence.xml accordingly. The entries which you have to modify are indicated in red. Make sure the entries for the DB marked in red are correct for your DB install.


 Copyright 2007-2008 Sun Microsystems, Inc. All rights reserved.

 The contents of this file are subject to the terms of either the GNU
General Public License Version 2 only ("GPL") or the Common Development
and Distribution License("CDDL") (collectively, the "License"). You
may not use this file except in compliance with the License. You can obtain
a copy of the License at
or legal/LICENSE.txt. See the License for the specific language governing
permissions and limitations under the License.

 When distributing the software, include this License Header Notice in each
file and include the License file at legal/LICENSE.txt. Sun designates this
particular file as subject to the "Classpath" exception as provided by Sun
in the GPL Version 2 section of the License file that accompanied this code.
If applicable, add the following below the License Header, with the fields
enclosed by brackets [] replaced by your own identifying information:
"Portions Copyrighted [year] [name of copyright owner]"


 If you wish your version of this file to be governed by only the CDDL or
only the GPL Version 2, indicate your decision by adding "[Contributor]
elects to include this software in this distribution under the [CDDL or GPL
Version 2] license." If you don't indicate a single choice of license, a
recipient has the option to distribute your version of this file under
either the CDDL, the GPL Version 2 or to extend the choice of license to
its licensees as provided above. However, if you add GPL Version 2 code
and therefore, elected the GPL Version 2 license, then the option applies
only if the new code is made subject to such option by the copyright

<persistence xmlns="" version="1.0">

 <persistence-unit name="SocialSite_PU" transaction-type="RESOURCE_LOCAL">
<!-- <provider>oracle.toplink.essentials.ejb.cmp3.EntityManagerFactoryProvider</provider> -->
<!-- <provider>org.apache.openjpa.persistence.PersistenceProviderImpl</provider> -->
<!-- <provider>org.hibernate.ejb.HibernatePersistence</provider> -->


<property name="eclipselink.jdbc.platform" value="oracle.toplink.platform.database.mysql"/>
<property name="eclipselink.jdbc.driver" value="com.mysql.jdbc.Driver"/>
<property name="eclipselink.jdbc.url" value="jdbc:mysql://localhost:3306/socialsite"/>
<property name="eclipselink.jdbc.user" value="root"/>
<property name="eclipselink.jdbc.password" value="abc123"/>

<persistence-unit name="SocialSite_PU_Standalone" transaction-type="RESOURCE_LOCAL">
<!-- <provider>oracle.toplink.essentials.ejb.cmp3.EntityManagerFactoryProvider</provider> -->
<!-- <provider>org.apache.openjpa.persistence.PersistenceProviderImpl</provider> -->
<!-- <provider>org.hibernate.ejb.HibernatePersistence</provider> -->


Build the SocialSite distribution


ant dist

The above will build a folder called SOCIALSITE_SRC_HOME/dist under which the SocialSite distribution is created. In the distSocialSite/webapp folder is the socialsite.war file. Make sure the two steps you did above do end up showing properly in the built war file.

Create tables in database of your choice

Under the SOCIALSITE_SRC_HOME/dist/SocialSite/dbscripts directory there are directories, one for each database supported. Choose MySQL ( since I did the setup with MySQL ). Login to MySQLAdmin, and create a database of name 'socialsite'. The DB name can be anything of your choice. Make note of this name, as this is the name of the DB we will be using in all JDBC URL's which get configured in different steps in this blog. Now go ahead and execute the createdb.sql script in the context of the 'socialsite' database.

Create the Realm for SocialSite

Socialsite by default authenticates users to a realm named "SocialSite_UserRealm". So you must create this realm in Tomcat. You can refer to docs for information on how to create a realm. Or if you are impatient here is how you do it. Open the file TOMCAT_HOME/conf/server.xml and add the following line to it. There are several entries in this file for JDBCRealm, but they are commented by default. Uncomment the one for MySQL, and make sure your entry matches the one below. Ofcourse, change parameters to match your database configuration.

<Realm  className="org.apache.catalina.realm.JDBCRealm"
connectionName="root" connectionPassword="abc123"
userTable="userapi_user" userNameCol="username" userCredCol="passphrase"
userRoleTable="userapi_userrole_view" roleNameCol="rolename"
resourceName="SocialSite_UserRealm" digest="SHA"/>

Enable SSO Valve

Enable the SSO valve in TOMCAT_HOME/conf/server.xml. It is already there and probably commented out.

   <Valve className="org.apache.catalina.authenticator.SingleSignOn" />

Prepare Tomcat for being SocialSite enabled by making JARS available to apps.

Glassfish is a JavaEE compliant App server and hence has the full webservices stack bundled with it. For Tomcat you need to enable this stack, since SocialSite uses some parts of it. For that purpose,

  1. Download the JAX-WS RI from hte JAX-WS site. Copy all jars (except sjsxp.jar) from the JAX-WS-INSTALL/lib folder to the TOMCAT_HOME/shared/lib folder.

  2. Copy sjsxp.jar to the TOMCAT_HOME/common/endorsed directory.

  3. Also download the stax.jar from here and copy that jar also the TOMCAT_HOME/common/endorsed directory.

  4. Copy mail.jar and MySQL JDBC Driver (mysql-connector-java-3.1.12-bin.jar) to TOMCAT_HOME/common/lib folder.

Enable JSTL in Tomcat

Tomcat 5.5 doesn't have JSTL support by default. From the Jakarta JSTL site, they seem to suggest to use the Glassfish JSTL implementation. So following that, we pick up the appserv-jstl.jar from the GLASSFISH_HOME/lib to TOMCAT_HOME/common/lib folder.

Enable SSL on tomcat, or disable SSL login in SocialSite

Follow this page on Tomcat docsIf you enable SSL on Tomcat on port 8443.

SocialSite Admin Site

To enable SocialSite administration, under the SOCIALSITE_SRC_HOME/dist/SocialSite/bin folder there is a setup-glassfish.xml file. In this there is a create-admin-user target. Run that target as follows:

ant -f setup-glassfish.xml create-admin-user

to create an admin user for your socialsite installation. You might have to fill in properties in the sjsas.props file to get it to work fine.

Tuesday Oct 16, 2007

JSR-286 compliant ajax enabled Atom and RSS news reader Portlet

A colleague of mine, Satya a few days ago talked about JSR-286 and resource serving. He was describing what it is, and how it is a part of the JSR-286 spec. Satya incidentally was one of the key folks in implementing the same for the Open Source Portlet Container. He pointed me also to a nice article by Deepak Gothe and himself about the new JSR-286 specific features in the portlet container.

 After going through the article I was waiting to get started with the JSR-286 implementation of the portlet container and resource serving in particular. So I have implemented a "RSS and Atom feed reader" portlet using the Open Source Portlet Container. The portlet is AJAX enabled as well. To see a small screencast of it in action click here.

This is how it looks (click to enlarge and see in a new window):

 If you want to use this portlet, or try it out, you will need a portlet container which supports the JSR-286 spec, and resource serving in special. As mentioned earlier the Open Source Portlet Container is one of the best. You can get it from the web site as mentioned in the link, or get is as part of the JavaEE Tools Bundle (Choose to "Download with Tools"). If there is interest in this portlet, let me know and I can make it available.

 Read where you can get this portlet source code from on my personal blog@blogspot.

Monday Oct 08, 2007

Presence - Dial tone of this century ...

How many times you have wanted to make an important business or a personal call, and picked up the phone to call the other party, but the call ended unsuccessfully, since all you managed to reach was the other party's voice mail? Such unsuccessful calls can be a serious drag on productivity and not to mention the frustration it causes, since instead of talking to each other the parties get to talk to the infamous 'voice mail'.

Or maybe the person you thought was in office actually was on the customer site today and was not reachable on his office number you just dialed. Well this brings in the concept of 'presence' which is so prevalent in the IM world. You begin to chat with a party only when his icon in the chat indicates that he is 'present'.

Now wouldn't that be really nice if we can apply this concept to telephone dialing as well. And why just telephones, we should be able to extend the concept of presence far beyond that.

A user, may opt for several ways in which he can be reached, phone, IM, SMS, Email etc. All of these are different modes of reaching the person. Now, imagine that this same person, can specify or update a unique "address" or a "URI" for each of the means to reach him. Then under his buddy icon, in a client application ( a universal communicator client), on right clicking his name, there appear several of these options to interact with him.

Clicking on the URI corresponding to a phone, will place a IP telephony based call, clicking the URI for email, could launch an application capable of sending an email. As long as the person has kept his information updated on the "Presence" server, the other parties are always able to get in touch with the person, based on his preferences of course.

Thus it would be appropriate to call "Presence" as the dial tone of this century. SIP ( Session Initiation Protocol ) seems to be right way to achieve this kind of communications.

From the portal perspective, the concept of "Presence" makes an absolute sense, since portal is a great way of achieving collaboration and bringing people together. Using a SIP server and a proxy, it seems that getting this above mentioned concept of "presence" into a portal has great potential value. Watch this space for more information on this topic.

Monday Jul 23, 2007

How about a Semantic Community Portal?

Community can be defined as a group of users having common interests. As organizations become highly dynamic and the people that join them become more geographically dispersed, the need for improved ways to share and distribute data and information amongst the community or organization members has increased dramatically.

Speaking in terms of the Semantic Web, these community members share similar ontology items since in most probability their cultural backgrounds, work activities etc might be similar. "Semantic community portals" can make use of Semantic Web technology and shared community terms to create connections between people and people, and also between people and the information that they produce.

So how exactly would you define semantic community portal?

Orkut and LinkedIn are examples of community web portals where the people and their relationships were clearly defined using online social networking. However there is a strong connection between these social networking services and semantic community portals. For example consider Orkut or Linkedn using the FOAF ( Friend of a Friend ) ontology to describe its members profile and their relationships. This will bring these now separate social networking sites to inter operate with each other. This will help in bringing the people together in a 'universal social network'. For this to become a reality more and more of these social networking sites need to start using the FOAF and other related ontologies, in an attempt to make the data within them distributed and decentralized.

The onltologies that are typically most commonly used by the community web portals are the ones used to define people (vCard, FOAF) and documents ( RSS). However staying within these ontologies is far too limited for the currently evolving semantic web.

SIOC is an initiative that seems to be a step in the right direction from the semantic community portal perspective. Basically the SIOC tries to capture as much information as possible about the community web sites and the information that is contained within them. Have a look at the two figures below taken directly from the SIOC web site which clearly demonstrate the future of the semantic community portal.

SIOC Model

SIOC Integration with Legacy Apps and Today's Apps
SIOC has the ability to link all sorts of entries like Blogs, Forums, Mailing Lists from and amongst various community sites. Using SIOC we will have the ability to make the information contained within links in HTML documents, discussions in forums, trackbacks, replies, followups etc available explicitly for machine-processing. (That is the goal of the semantic web )

However, a full-fledged framework for community-driven ontology management should go beyond simple tagging and should enable merging of community portals with established practices for ontology management. The objective of community-driven ontology management is to provide means for a large number of users to build and adopt the Semantic Web, via practices for ontology management all in the community space. Such a portal will allow end users to define the structure of the content (i.e., develop ontologies), populate ontologies and define the ways in which this content is managed on Semantic Web community portals.

Reference: Berners-Lee, T., Hendler, J., & Lassila, O. (2001). The Semantic Web : Scientific American

Tuesday Jul 03, 2007

New Version of Eclipse Portal Pack with Action Support

I have uploaded the source code for the new version of Eclipse-Portalpack. I have been playing with the idea of making portlet development easy... and not just for rendering the view mode or the edit mode of the portlet but also in processing actions easily from the portlets. To this extent this is my first attempt in making this happen. Check it out and let me know if you find it useful and suggest any enhancements requests if any. I will be enhancing this further myself ( as there are areas I think that need it, but do let me know your suggestions )

Okay back to the new version. The new version supports the following new things :

    - It is now built on the latest version of JAXB .i.e version 2.1.
    - It has a new feature of adding a new portlet action very easily to your portlet, and to implement the action you just need to implement one method "execute()" in your action class and almost no code change to your portlet class is needed. You just specify what page to go to once the action is processed and the portlet has the code to automatically send you to the new page once the action is executed sucessfully. In case of an error that happens in your action's "execute()" method, the portlet will redirect you to the error page that gets created automatically for you when the portlet project was initially created.

Enhancements to this :

There are a couple of enhancements that I am still working on. If you think you can contribute to any of these please join in and contribute.

   - There are enhancements to the GUI for action creation needs some work. 

Suppose I want to develop a simple portlet which shows a form to collect some inputs from the user. The form might ask the user for his first name, last name and the email address. When the user submits this form, the data is collected at the server, and persisted to a data store. Once the data is persisted the user is shown a thank you page. Now assume the above needs to be done in a portlet. The scenario described above can be done using a portlet as shown below in the picture:

When developing this portlet the developer needs to write code in his processAction() method to do the following :

  • Recognise the type of action this request is. In our case there is only one action so this case is simple.

  • Collect the data from the form and populate a bean with that data.

  • Put the bean in session data to be accessed in doView() mode.

  • Now when the portlet container calls the doView() method, access the bean stored in session in previous step and do the actual action

  • Dispatch the request to the destination JSP page.

All the above needs to be done by the developer whenever he writes a particular action. ( This is one way of doing this )

I wanted to make this a little easier to do, so I have added new code to the Eclipse Portal Pack project to make this easier. This is a very early version of it, so please bear with it, as I make further improvements. But feel free to try it out and give suggestions, or better still join on the project and contribute.

Developing the above portlet with the Eclipse Portal Pack Project

A screencast of creating a simple portlet project and a sample portlet is shown here.

Now that we have a sample portlet ready. Let's go about adding this new action that we wanted. Let's first create the JSP page that will show the form to the user in the view mode. By default the project would have created a JSP for the view mode called view.jsp in your /WEB-INF/jsps/ folder. Open this JSP file and add the following code to it.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="UTF-8"%>
<%@page import="javax.portlet.\*" %>
<%@ taglib uri="" prefix="portlet" %>

<portlet:actionURL var="portletUrl" />

<form id="form1" name="form1" method="post" action="<%=portletUrl.toString()%>">
First Name : <input type="text" name="fname" type="text"><br/>
Last Name : <input type="text" name="lname" type="text"><br/>
Email : <input type="text" name="email" type="text"><br/>
<input type="submit" name="Submit">

The lines in bold indicate the form that will be displayed to the user in the view mode. It presents the user with fields to accept his first name, last name and email address and then there is the submit button which submits the form to the portlet via the portlet:actionURL variable defined above.

Now this is where the new Eclipse Plugin can help you in making your life easier. Let's call the action to collect the user data and put it to datastore as "CollectData". Right click on the portlet project in Eclipse, and down at the bottom you will see a menu entry called "Portlets->Create new Portlet Action" as shown below in the picture.

So here is what we want to do, we want to define a new action called CollectData, which we want implemented by a class of our choice, in this case lets say com.sun.portal.test.actions.CollectDataAction, and when our action is complete we want the portlet to take us to the page defined in /WEB-INF/jsps/done.jsp. So fill up the dialog box as shown below and click Ok. ( Like I said this is the first version so I haven't added any error checking as of yet, it will be coming pretty soon though ).

On clicking Ok, you will see a new action class called CollectDataAction created under the package com.sun.portal.test.actions. Open this class in Eclipse and it will appear as below:

package com.sun.portal.test.actions;

import javax.portlet.ActionRequest;
import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;
import com.sun.portlet.core.actions.ActionExecuteException;
import com.sun.portlet.core.actions.BaseActionFormBean;

public class CollectDataAction extends BaseActionFormBean {

 public CollectDataAction(ActionRequest request) {

public boolean execute(RenderRequest portletRequest,
RenderResponse portletResponse) throws ActionExecuteException {
// Put your logic of executing the action for this request here.
return true;

So as you can see, all you need to do is implement the method "execute()" in your class. In the execute() method, you can access the form parameters that your view.jsp sent in as getParameter(String), getParameterNames() and getParameterValues(String) as usual.

Also to invoke this action the only other thing you will need to do is, add a hidden field in your view.jsp form called ACTION_NAME, and its value must exactly be the action you want executed when the form is submitted, which in our case is "CollectData". So our view.jsp page in completion will look as below :

<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="UTF-8"%>
<%@page import="javax.portlet.\*" %>
<%@ taglib uri="" prefix="portlet" %>

<portlet:actionURL var="portletUrl" />

<form id="form1" name="form1" method="post" action="<%=portletUrl.toString()%>">
First Name : <input type="text" name="fname" type="text"><br/>
Last Name : <input type="text" name="lname" type="text"><br/>
Email : <input type="text" name="email" type="text"><br/>
<input type="hidden" name="ACTION_NAME" value="CollectData">
<input type="submit" name="Submit">

The only changed line is shown in Bold and Italic.

That's all that is needed to implement this action from your side. Ofcourse, you need to write the done.jsp file to which the portlet will dispatch the view after the action is executed.

To summarise, to implement any new action, all you need to do in addition to writing the source JSP and the target JSP is :

  • A hidden variable called ACTION_NAME in the source JSP page form.

  • Implement the execute() method in your Action Bean.

Rest of the stuff is handled for you!!

Let me know if you like it, by posting your comments.

Tuesday Jun 26, 2007

Mirage - Open Source CMS Based on JSR-170 Standards

I have started the Mirage Project at today. Check it out here

Mirage is an open source project which aims to deliver a professional open source content management system based on the content repository Java Content Repository (JCR) viz. JSR-170.

The project deliverables will be in terms of several individual smaller sub projects some of which may be delivered via some different but related project. The deliverables from this project will be consumed by the OpenPortal project to provide CMS functionality to the portal product. The current plan is to provide in terms of deliverables :

  • CMS Infrastructure and Generic API based on the Apache Jackrabbit implementation of the JSR-170
  • CMS Tag Libraries which developers can use to create web applications/portlets that can leverage the features offerred by the
    content repositories.
  • Sample portlets which will be a part of the Portlet Repository. The sample portlets will showcase how to use CMS Infrastructure/API's to store/retrieve/update structured and unstructured content to the JCR.
  • Tooling Plugins for developer IDE's which empower the developer to use the Mirage API and Tag Libraries with the greatest of ease. These will be available under the Portal Pack Project.

 More information will be available on the Mirage web site soon along with source code!

Dynamic JavaScript Loading

While developing a custom jMaki widget we came across a problem in which we needed to load a javascript dynamically from another javascript file. There are atleast 2 ways I know this can be done. Here is one such method.


function jsinclude( jscriptfile )

// create a script node
var s = document.createElement('script');
s.src = jscriptfile;
s.type = "text/javascript";

// add it to the node called 'SOMEPARENT'.. it could be the HEAD node of the html page as below....


Calling this function in your javascript you can load as many JS files as needed and embed them into your current DOM tree as follows :


Tuesday Jun 12, 2007

The Future, The Semantic Web

Recently at work I came across a young colleague who had done some work during his bachelors on semantic web and I kind of got involved in that discussion. During that conversation a few more folks joined in and I realized that not many were aware of the our current "not-so-semantic web". Hence this became the topic of my today's blog.

So what exactly is the "semantic web"? Let me try and explain with an example. Suppose I am wanting to buy a camcorder and I did research on the web for the camcorders and I come across the following things from different sites:

  •  Model: DC220, Manufacturer : Cannon, Price: $449, Rating : 7/10, Really small and easy to hold/operate, good batter power but menu systems on the touchpanel are a little clumsy to operate.
  • Checked out the latest Panasonic PV-GS300 and it has a really nice night shot feature, and I would rate it among the best camcorder. So go for it!

Even if I knew little or nothing about camcorders and its features, I can make a pretty good idea of what the web sites are talking about and what they mean when they say the things they say. But if a piece of software went through the exact same pieces of text mentioned above, it will really have problems in understanding the really straightforward language concepts.

This brings us to the main concern, people are really good at "interpreting" meaning, or semantics, from written language, and software is pretty bad at it. So when search engines go through blobs and blobs of text, what is missing is some standardized way for us to mark up our web content to help the software recognize the semantics of the content. If it is possible to mark up our web content in some way to associate the correct semantics of the page, then it helps us  move the Web beyond the current index/search/read paradigm that we are stuck with currently. And that is what is meant by "Semantic Web", on which currently there is a huge amount of research going on.

Thursday Mar 22, 2007

Flex Up Your Portlets!

As promised I started to do my Flex development, and boy I found it really amazing. Flex based UI is nothing but a SWF file that is run by the Flash VM running as a plugin in your browser, much like the Java Plugin. Personally I prefer Flex over Ajax, having tried both.

If you want to build a rich user interface web application that requires several state changes, spans multiple business processes and requires complex data handling at the back-end and still want to give the users a really rich and consistent experience (no refreshes!) then I think Flex definitely is the better choice.

By the way, Flex provides a platform/browser independent virtual machine in which your web application user interface runs (as long as there is a Flash VM for that browser/platform, and for most OS'es it is there). On the other hand Ajax does depend on the browser, in the sense it relies on the browser to provide the platform to build the applications. And hence it is sensitive to the browsers interpretation of JavaScript code. That makes Ajax based code sensitive to the way the JavaScript code is written and interpreted by the browser.

Another point I noticed in Flex, is that the scripting language used is ActionScript, which happens to be a much more strongly typed language as compared to JavaScript, so I believe this is in favor of Flex as well.

It has the pretty good concept of,

Application = Code + Markup.

Where Markup is provided by the declarative MXML syntax, code is provided by ActionScript. ActionScript is Object Oriented as well, that is, if you are familiar with Java, learning ActionScript is pretty much a breeze.

Flex provides inbuilt support for making calls to the backends using HTTP (GET/POST) as well as native support to make webservices Calls via the <mx:HTTPService> and the <mx:WebService> tags respectively. Using the <mx:WebService> tag to make web services calls was so easy, that it felt like reading WebServices for Dummies!!

I believe it is possible to make calls into EJB's also, but I haven't yet explored that possibility. Still in my learning phase!.

The first application I did was an application that shows the user a drawing board in which the user can draw pictures. To do this it was a breeze in Flex Builder. Opened up the 'Design' view, dropped in a panel, a canvas object and then trapped the mouse clicks in ActionScript, and made sure that lines were drawn between the mousedown's and the mouseup's. Real Simple!

Anyway, being in the portal world, I wanted to make use of the Flex Application Platform in my portal. In other words, I wanted to 'Flex Up my portlet'. This would not only involve building the user interface in Flex, but would also get me to test the webservices support in Flex. Nice!

So now I needed a nice enough usecase. After thinking for a while, I thought that maybe a E-Signature portlet would really be nice. The portlet will present a user with a document (a NDA, EULA etc) that traditionally the end users would have signed/accepted. The portlet would provide a canvas wherein a user can actually sign the document. And then this signature is posted back to the server as a bitmap and saved. Basically, this portlet could leverage my initial work on the simple standalone 'canvas board' flex application. With this idea in mind, was all charged up to flex up my portlet.

 Tools Used

So my E-Signature portlet is done. I put up a small screencast of it for download. If you are interested then you can view it here.

In my next blog, I will post instructions on how to actually integrate Flex applications into your portlets. So keep posted!


UPDATE: I didn't get time to post the entry on how to create a portlet out of the Flex application, but I helped my colleague Murali on getting his Flex app as a portlet and he has been prompt enough to post the instructions on his blog here. Thanks Murali.

Tuesday Mar 20, 2007

Explanation of the Pythagoras Therom Proof

The proof actually was "Look". Don't just see, but rather "Look". Carefully that is.

It took me a while to figure this out as well.

The picture shows two squares equal in area. Each square has 4 similar triangles albeit placed differently in the two figures. So removing these 4 triangles from each of these pictures should leave behind the same area. And now if you "look" that is the proof right there.


One line Twelfth Century Proof of the Pythagoras Theorem



Pythagoras Theorem

Sunday Mar 18, 2007

Rich Internet Applications (RIA)

I am a strong proponent of having a nice user interface, since it is the first thing the end users see about your product. I feel that we must have a strong understanding on the importance and effectiveness of a user-experience that enables our consumers/customers/users to perform their tasks with applications that are not only useful, but usable and desirable. In my opinion the same, if not more amount of time MUST be spent on designing the UI of your application, as the backend. So as the web has evolved over the past few years a lot of importance is being given to rich and responsive user interfaces. So essentially what I am talking about is the world of Rich Internet Applications (RIA) and that is the topic of today's blog.

In my previous blog entries I talked about using the Google Web Toolkit modules in your portlet projects. GWT comes with a very capable rich set of user interface widgets and you can add responsiveness to your application by AJAX enabling them. GWT provides you AJAX functionality by writing absolutely 0 JavaScript code. You write your code in Java, and the GWT toolkit comes with a compiler which compiles your java code to JavaScript. Now that was cool!

What is a RIA?

Let us understand using an analogy. My car insurance had expired and I called up the insurance company to find out how I could pay the renewal premium. I was very happy when I was told that they had an online payment facility wherein I could just fill in my details and renew my policy. So i started the process, I was taken through a set of
4 pages, at each stage asking me to fill in details and then pressing the next button to go to the next page. Each refresh taking some time, I couldn't go to the next page till I completed what I was asked for on the current page.

It asked me stuff like my VIN number, License Number etc, which I didn't have handy at that moment. What I would have really liked is to go through all the pages finishing the entries for which I had answers at the moment and then go back and fill up all the "hard" ones. ;-) But tough luck there. There are other issues with typical web interfaces, losing data due to back navigation or re-POST of data, losing data due to session timeouts etc etc. These are all problems being caused due to technical limitations of the 'typical' web.

RIA typically tries to solve this problem from the end user's perspective. Rich Internet Applications replace these multi-step, complex processes with simpler, easier, more effective singlescreen or guided-completion processes.

As I am talking about rich internet user interfaces, another one I had been wanting to try my hands for a long time was Macromedia's Flex and ActionScript. Ofcourse, now it is Adobe Flex after the acquisition but I was and still am impressed with Macromedia. That was one great company with some amazing products. With the version 2.0 of Flex now available and lots of new cool stuff added, I thought of giving it a try. For begining your Flex journey all you need is

  • Eclipse

  • Flex Builder 30 day trial which can be downloaded from Adobe.

Flex Builder installs as a plugin for Eclipse and hence the need for Eclipse. The Flex Builder provides you with a Flex Development , Flex Debug perspective and a Visual Designer for building Flex Applications. Ofcourse there is the Flex compiler which will compile your Flex application from within the IDE.

As an alternate you can also download the Flex SDK and use that to compile your Flex Applications, but you won't get the many benefits of using an IDE... Choice is yours.

I have worked a lot with Macromedia ColdFusion (Adobe now!) earlier and being a ColdFusion developer I know how powerful rapid development can be and how much of a difference that makes when building dynamic Web applications. That is exactly what Flex brings to you for developing user interfaces for the Web. Really nice looking widgets and containers, very easy to build using the Flex Builder, pretty much drag and drop.

I don't know about you, but I am off to building my Flex Application!

Friday Mar 02, 2007

Google Web Toolkit (GWT) modules as Portlets In the Open Source Portlet Container

For developing GWT modules and creating web applications from these module projects see this entry from my blog.

There are so many of these GWT modules out there, and being involved in portal technologies, what I wanted to do is, see if I can convert those modules to portlets and have them work on my portal server. I wanted to get this done, and so I dived into it equipped with the following tools.

With the above tools in my toolkit, I was prepared to convert my sample GWT LiveSearch Module into a JSR-168 Portlet. I talked about the sample LiveSearch in my previous blog entry

How it works?

When you create a new GWT module, the entry point to that module is defined in the GWT module definition file. For the example LiveSearch module that I described in the previous blog it is in the file LiveSearchPanel.gwt.xml and is as follows:

<entry-point class='com.sun.portal.gwt.poc.client.LiveSearchPanel'/>

The above class com.sun.portal.gwt.poc.client.LiveSearchPanel will be the one that will setup the UI in its onModuleLoad() method. In this method one typically gets a handle to the RootPanel and then adds GWT UI widgets to this panel. The RootPanel is retrieved by making a call to RootPanel.get() function. The interesting part is, that the get() method is overloaded and takes a String parameter. This String parameter needs to be a DIV ID, which needs to be defined in the page hosting this GWT module. The UI that you define in the entry point class for the module then gets placed under this DIV.

So we will setup the view of our GWT portlet to have a unique DIV ID in its view mode HTML. We will modify the GWT entry point class to add the UI under this unique DIV ID.

Having known that, this is how we proceed.

  1. Create a Portlet Web Application Project project and add a portlet to this project. You can use the Eclipse Portalpack or the Netbeans Portalpack to achieve this.

  2. If you followed my previous blog entry and ran the make-war-from-gwt.xml ant build file to generate a web application project then you should have a "dist" folder under your module project directory. Copy the contents of this directory (dist) to your portlet projects web source directory. If you used Eclipse PortalPack this would be a directory called "web" under your project root.

  3. In your portlet class'es doView() method, have a simple RequestDispatcher call to include the view JSP page. So if your view.jsp is the view page the doView() method would be like :

    PortletRequestDispatcher dispatcher = context.getRequestDispatcher("/view.jsp");
    try {
    dispatcher.include(portletRequest, portletResponse);
    } catch (IOException e) {

    The view.jsp looks like this. Note the DIV ID we defined here, this is where we want the GWT to put the UI we built in the com.sun.portal.gwt.poc.client.LiveSearchPanel class. This was explained above.

     <meta name='gwt:module' content='/TestPortlet/com.sun.portal.gwt.poc.LiveSearchPanel'/>
    <div id="TEST_PORTLET_DIV"> </div>

  4. Lastly, the glue that holds the whole thing together is the gwt.js file that was generated by the LiveSearchPanel-compile.cmd (see previous blog entry) and can be found in the www directory of the module project. This file is common across all the GWT modules and contains code that loads the GWT modules from your view.jsp file. Typically you want this gwt.js file to be accessible to all the GWT portlets that are there on your portal. So you can make this gwt.js file a part of the portal. For our case I am using the Open Source Portlet Container, and I will add a reference to the gwt.js file in the desktop.jsp file of the Open Source Portlet Container Driver(OSPC) . If you deployed the OSPC on Glassfish in the default domain (domain1) on Windows then you can find the OSPC Driver desktop.jsp under GLASSFISH_HOME\\domains\\domain1\\applications\\j2ee-modules\\portletdriver.

  5. Remember that the call to gwt.js file needs to be made after all the GWT modules are defined using the <meta> tags as shown in point 3 above. desktop.jsp iterates over all the portets and many of them could be GWT portlets ( I hope after reading this article ;-) ) so you need to make a call to gwt.js right at the end of calls to all these portlets. So, copy the gwt.js file into the portletdriver directory at GLASSFISH_HOME\\domains\\domain1\\applications\\j2ee-modules\\portletdriver and add the following line to the end of desktop.jsp right above the </body> tag.

    <script language="javascript" src="gwt.js"></script>

    This will make sure that the OSPC Portlet driver will call into gwt.js after all the module definitions are loaded via their appropriate view.jsp files.

    I have shown the method to add gwt.js file a part of the OSPC so that there is only one copy of this file and is accessible to all portlets. You can leave this gwt.js file in each GWT module WAR also, but in that case you will have to add the appropriate URL to call into the gwt.js from your view.jsp file. Be aware that this will make you have multiple copies of thie gwt.js file, one in each GWT module exposed as a portlet and being loaded from different URL's.

    That's it. Build the WAR file for the portlet project and deploy it on your Open Source Porltet Container and you have the same GWT module that I showed in my previous blog exposed as a portlet application.

    The steps I showed are for the OSPC but can be very easily adapted to any portal server in general.

Google Web Toolkit modules as Web Applications

Recently I tried using the Google Web Toolkit for leverging its rich client widgets and AJAX functionality. I use Eclipse a lot and luckily GWT comes with builtin support for creating Eclipse projects supporting GWT. I created the Eclipse project using the GWT command line utilities in a jiffy and imported it into Eclipse easily. Reading the documentation on GWT I was able to start coding my application immediately.

 I quickly put together a sample LiveSearch GWT module. This module, will present the users with a search text field, and will detect the users keypress events, and will asynchronously send the keystrokes to the server using the GWT framework. The server side code, will perform the search on these keystrokes and send the search results back to the client (browser). So you instantly see the search results without any page refreshes ( that is AJAX and you don't write any JavaScript, it is taken care for you by the GWT). Very cool indeed!.

In the first part of this blog entry I will show you how easy it is to develop the GWT module using the GWT toolkit. GWT Toolkit comes with an embedded browser and a light tomcat container on which you can test and debug your GWT module. I will talk about how to convert this GWT module app into a web application that you can deploy on a web container.

First step is to download and install the GWT.

Suppose the GWT is installed in GWT_HOME.

  • GWT_HOME\\projectCreator.cmd -out LiveSearch -eclipse LiveSearch

    This will create a directory called LiveSearch ( -out parameter ) and in this directory will create an Eclipse Project called LiveSearch ( -eclipse parameter ).

  • GWT_HOME\\applicationCreator.cmd -out LiveSearch -eclipse LiveSearch com.sun.portal.gwt.poc.client.LiveSearchPanel

    The above command will create the directory structure for GWT application module called com.sun.portal.gwt.poc.client.LiveSearchPanel in the directory called LiveSearch ( -out parameter ) and create a skeletal GWT module.

  • Go ahead and create the GWT module and remote service as needed.

  • Once you write your module code and write the remote service code, you can compile your application using the LiveSearchPanel-compile.cmd script and launch the module using the LiveSearchPanel-shell.cmd. Both these scripts are created by the applicationCreator.cmd script we ran in the steps above.

  • Source code for this sample LiveSearch is available here.

What follows now are steps to convert this to a Web Application. I have included a ANT build file ( make-war-from-gwt.xml ) in the source code download which will convert the module into a Web Application and will allow you to deploy it to a Web Container. It includes a sample-web.xml in the root folder. The make-war-from-gwt.xml and the sample-web.xml should be pretty much usable across all the GWT modules you write and want to use them as a web applications. Just tweak the entries in these files as per needs of your new module. The entries needing modications are marked by appropriate comments.

 Now that we know how to write a GWT module and build a WAR file from it, we can easily deploy the module to a web container.

Thursday Mar 01, 2007

Portal Pack For Eclipse

I have started the Eclipse Portalpack project and is currently hosted at Eclipse Portalpack

This is a set of plugins that currently help a developer write JSR-168 Portlet Applications using the Eclipse version 3.2+ of the IDE.

Currently it has two plugins.
One is a plugin that allows you to create Portlet Projects using a wizard based approach. One can add new portlets using the context menus that appear once the project has been created. Automatic Ant build file is created to build the project, as and when you add new portlets to the project, the portlet.xml file is automatically updated for you.

Second plugin registers the Open Source Portlet Container as a server runtime in Eclipse. Right now you can start/stop the container from within Eclipse. But with time features to deploy/undeploy portlet projects to the Open Source Portlet Container will also be added to this project.

 I uploaded the source code for the plugin today. If you are an Eclipse fan like me, please check it out and contribute to the project if you like it.




« June 2016