Happy New Year Techies!!!

I just wanted to say happy new year to the community, without you guys, we would still be living in the dark ages. Here are a few that I am looking forward to in the new year:

  1. Oracle Sun merger:- The untold future of NetBeans, MySQL, Swing and every open source that Sun has been working on in the past. What would happen to Sun Open Source (SOS!!!) Movement.
  2. Looking forward to JavaFX1.3 release, Authoring tool and improved Composer plugin.
  3. Android uprise against iPhone (not because I can easily write Android based application) and hopefully with Visual XML builder to build Android UI. JavaFX running on Android, anybody????
  4.  Looking forward to seeing real-world JavaFX application and possibly a showcase linked to the JavaFX.com site.
  5. Java EE 6 support in Google App Engine
  6. Google Wave open to the public and how well it does against Twitter and Facebook
  7. Java Store open to Europe (well this is where I am based and want to sell applications not just provide free).
  8. My new video blog ( well that’s me trying to be more Armel 2.0 – the sequel) to better engage with the community.
  9. looking forward to networking with fellow developers and techies.
  10. looking forward to the new buzzwords (old technology, new name)

Well, 2009 is was good year for Java and tech scene. I hope that you all enjoyed the year as much as I did. Why not share what wish list with me (comment box). Subscribe to follow my blog as I will try to bring more interesting articles in the new year.

Happy 2010 New Year, wish you all; success, properity, fame (yup) and fortune. Don’t forget, if you need a server-side, UI, Android or JavaFx developer, just mail me.


Dummies Guide to GWT and OpenID – with example code

Once (?) in awhile, we developers browse the web for some quick and dirty solutions to some of our coding problems (sometimes not even problems, right?). This is another of those days, everything was going fine on this project I am currently working on. This is not a social networking sites but a site for sharing and comunicating (how I missed the days of the chatrooms) similar in many aspect to Digg and DZone but which also allows users to communicate in realtime and leave comments. So the back-end was sort of completed but so now time to focus on the user registration.

The sites needed to be open and avoid repeatitive tasks such registering users. The way forward was to implement some authentication to allow users to register with some sort of universally accessible ID (or sort of). Facebook Connect, OpenSocial and Google Accounts have their advantages but to me personally; the disadvantages outweight the pros. These are some of the disadvantages of those platform:

  1. Facebook is a popular site hence is its platform, Facebook Connect, in mostly Europe and America but not everybody in Europe and America have a Facebook account.
  2. OpenSocial, when it comes to single logon, has more advantages than Facebook. I supposed that if we do take into consideration all the OpenSocial sites, we might have apossible larger user based than supporting Facebook alone. Even that was too limited.
  3. Google Accounts, one thing Google does not advertise its user base. I could be wrong but do anybody actually knows how many people uses the various Google services (excluding search). Google has the same disadvantages as Facebook.

Enter OpenID. OpenID has been around longer than most Internet-based decentralised authentication platform. The beauty of this platform is that it also supported by most (if not all) large site on the Internet. From AOL, BBC, CNN to YAHOO and ZIMBRA, as I said most sites (based on the alphabet) support OpenID, check the OpenID Directory. It was recently announced that OpenID has reached 1Billion enabled accounts (read here). Based on those figures, I decided that OpenID for now was the authentication choice for this application. I will not be discussing any security issues in this entry, there are plenty of resources available on the Internet for that.

OK, so I am a Java developer and I am developing the front-end using GWT and Java on the server-side. I searched on the Internet for solutions on how to implement the authentication as GWT RPC are different to normal servlet call. I spent more time reading about the OpenID specification and implementations examples on the Internet. I have to admit that some of tutorials that I found on the Internet were somehow confusing and not helpful at all. Therefore I decided to write my own Dummies Guide to GWT and OpenID.

Dummies Guide to GWT and OpenID

First of all, it is important to know how OpenID works (please check the OpenID site for more info).

In a nutshell, OpenID allows you to authenticate with website (supporting the standard) with just an URL and voila. Your URL has to be hosted by an OpenID provider in order for it to work. For example, my blog is hosted by Google on blogspot.com. Google supports OpenID authentication therefore if a reader wanted to leave a comment on my blog, he does not have to have a Google Account as he can log-in with his Yahoo or AOL or Facebook or WordPress or any other OpenID provider sites, and then leave a comment, that simple.

GWT to OpenID and back

There are two ways to authenticate a user with an OpenID provider and GWT supports both. When authenticating a user, the relaying site (the site the user is trying to access) redirects to user to the OpenID provider (i.e. Google) login page.

The problem will be with the GWT RPC mechanism. GWT RPC calls are asynchronous and you cannot make any redirections. Therefore we need a way to execute the redirection from the client side, here is the code (I use OpenID for Java to handle the openID discovery from the RPC servlet), I then used USER object (just a simple POJO which only stores the redirection URL and the parameters) to be sent back and forth between the front-end and back-end.

public User authenticateOpenId(String provider_url) {
    try {
        ConsumerManager manager = new ConsumerManager();
        // This is the URL where the OpenID provider will redirect the user
        // once logged in.
        String returnToUrl = “http://localhost:8084/GwtOpenId“;
        // the provider URL will be used to identify the user OpenID provider
        List discoveries = manager.discover(provider_url);
        DiscoveryInformation discovered = manager.associate(discoveries);
        // OpenID 4 Java needs to  have an HttpServletRequest object, GWT sevlet 
        // convenient methods to retrieve the HttpServletRequest object 
and manipulate its
        // parameters
        this.getThreadLocalRequest().setAttribute(“openid-disc”, discovered);
        this.getThreadLocalRequest().setAttribute(“openid.mode”, “popup”);
        AuthRequest authReq = manager.authenticate(discovered, returnToUrl);
        FetchRequest fetch = FetchRequest.createFetchRequest();
        // I want to exchange the following attributes from the OpenID provider
        // remember that teh attribute will be returned only if it exits
        // Simple POJO to persist the data
        User user = new User();
        // In a normal servlet development, the following statement would make
        // a redirect call but this would not work when using GWT RPC
            // fakes the redirect by sending the POJO with the required parameters
            // to make a client-side redirect
            return user;
            } else{
            // fakes the redirect by sending the POJO with the required parameters
            // to make a client-side redirect
            return user;
        } catch (MessageException ex) {
        Logger.getLogger(GWTServiceImpl.class.getName()).log(Level.SEVERE, null, ex);
        return null;
        } catch (DiscoveryException ex) {
        Logger.getLogger(GWTServiceImpl.class.getName()).log(Level.SEVERE, null, ex);
        return null;
        } catch (ConsumerException ex) {
        Logger.getLogger(GWTServiceImpl.class.getName()).log(Level.SEVERE, null, ex);
        return null;

The above codes will format the request in order for the front-end to execute a redirect and allow the user to authenticate with his OpenID provider. Now here is the front-end code which executes the authentication and reads the data back.

// This is an extract from the openidEntryPoint.java

// This is where the magic happens – This code is only usefull when the OpenID 
// redirects the user back to your site – please visit openid.net for valid 
// The “if” statement checks to make sure that it is a valid response from 
the OpenID
// provider – You can do anything you want with the results here such 
as verifying the
// response with the server-side code
if(Window.Location.getParameter(“openid.rpnonce”) != null){
    String s = Window.Location.getParameter(“openid.mode”);
    // executes this if the user cancels the authentication process and the OpenID
    // providers returns to the your site
        sign.setText(“Server returned openid.mode=cancel”);
        openIdUrl.setText(“You need to Accept not Cancel”);
    // Here, I am assuming that everything is fine and that the user has 
been sucessfully logged in
        sign.setText(“You have successfully signed in”);


private class UserAsyncCallback implements AsyncCallback<User> {
    public void onFailure(Throwable caught) {
    public void onSuccess(User result) {
        if (result != null) {
            //                    Window.open(result.getRedirect(), “_blank”,
 “height=200,width=400,left=100,” +
            //                            “top=100,resizable=no,scrollbars=no,
            // this the most important line in order to make the authentication.
 Here, I am redirecting the user
            // from the client side to the OpenID provider URL with the discovery
 data generated from the
            // RPC call to the servlet.
            } else {
            Window.alert(“Ooops!!! Couldn’t find your provider”);

I have attached the full NetBeans project with dependencies. The code is provided as-is and use at your own risk ;). Here is a screenshot of the working application:

Step1: Authenticate on the site (enter the URL)

Step2: Redirect to OpenID provider (Google is my provider ūüôā ), authenticate with your provider

Step3: Allow the application to access your OpenID details and redirect back to the original site

Step4: final step, check the parameters from the provider and proceeds accordingly

Take a look at the URL in each of the above step to see the OpenID data. OK, so my code actually works (yuppie), now you know that it is possible form GWT to OpenID and it’s not as complicated as many other sites are trying to show. The code is just for authentication but once authenticated, you can retrieve any parameters that you need. In this example, the query is sent through the browser URL (GET) but you can change it to be encoded in a form submit action. Iwrote some of the code to allow the user to authenticate via a popup window, the code is not complete and maybe someone else might want to have a go. My only problem is getting the redirect back to the original window but apart from that it works.

Download the source code

I hope you guys enjoyed it and Happy Coding.


JavaFX vs GWT – A developer dilemma in building a RIA application

For the past few days, I have been working on a simple proof of concept; a web based stock streaming application with a community theme to it. I set myself to building the backend first. As you can guess, I am developing in Java and here are some of the requirements that I have to meet, at least:

  1. The application shall allow the user to query a stock (quotes) either using the stock ticker or the company name and display the following: stream stock price with basic info, stock historical price; tabular view and financial chart analysis.
  2. The ability to rate, comments and share stock information.
  3. provide a real-time chat features for users of the application to interact together.
  4. single sign-on integration with OpenSocial, OpenID and Facebook connect.

The above are some basic features in order for people to actually use the site. As you can see, they are mostly front-end requirements. Here is another important requirement:

  • The application will be hosted on a Cloud-based service, the application shall keep to a minimum the load on the server as CPU and memory use will be charged per request.

I believe that last requirement was the key decision factor. I needed something that will make use of the user resources instead of stressing the server. Something that would execute on the browser, client-side. Being a Java developer, it is only normal for me to look for something that I can grasp easily and freely available on the market. I looked at a few RIA frameworks and tools but I needed something that can integrate within my development environment without the need switch between IDEs.

I had a look at JavaFX and GWT. Having worked on GWT in the past, I found that I could implement most of the requirements. GWT has a rich api and components sets (widgets). I could use the Google search, map, visualization… to build the front-end and implement the client side code.

It took me about two days to implement the basic front-end and back-end features; mostly concentrating requirements 1 and the last. But then I hit a brick wall, something that all Javascript developers already knew but I just came across:

The application is a mashup of different services from around the net. Some of those services were available for free and others were not available at all but I will still be connecting and parsing the relevant data to displayed on the screen. As requirement “1” was working fine, there was a disaster about to happen. Here is the basic architecture:

  • when a user queries a stock, the data is sent to the back-end services.
  • the back-end services queries a third-party web service which I do not have control over. ZERO.
  • when the third-party web service returns, the data is then parsed into a format understood by the front-end and sent to the front-end services to display.¬†

The services was working fine until I had about 12 stocks displayed on my screen for testing purpose. The data was being streamed with a 1 minute interval. After about 30minutes later (and 360 requests = 12 *1 pm * 36m), I have noticed that the stock data was not being updated anymore and some screens were blank. No errors were logged and some other queries were still working such as the historical data. As I could not see the errrors from my debugging session, I therefore decided to query the third-party service manually through Firefox and IE and VOILA! The service provider had put a temporary ban on my IP address for making too many requests, it says. This was a major blocker as it seems that I could not access my primary data anymore. This left me questioning the feasibility of the project.

If a single user gets banned for tracking 12 stocks, what would happen when 100 or more users start watching their stocks?

OK, so I did not give up, at least not without a fight!

I looked at the problem from another perspective, the third-party view. How do they track my request as I do not have to register or sign-in? The obvious answer is my IP. So I thought, instead of making the request to their services from the back-end, I should send the request directly from the front-end. If each users make the same request, the third-party services would register different IP addresses for each one of them. Correct indeed but one big problem:

The front-end code is written in GWT which is then compiled to Javascript. Being a Java developer, I was not aware of the limitation of using AJAX in a mashup such as mine. After making the necessary changes, I then run the app just to get hit with another blocker – SOP (Javascript Same Origin Policy). What’s in a monkey name was this all about? So after researching it – Google and Wikipedia, I knew what I was dealing with and I am sure all Javascript developers already knew that but not me :(. I never give up, it is not part of my nature, therefore I decided to look for ways around it and came across a tutorial on GWT site that shows you how to implement a workaround. Did the tutorial, implemented some basic methods and that worked fine but implementing the third-party service, did not work :(. The problem was simple, the workaround needs to be in JSON format which I coded but the third-party service needs to be able to send the request back to a “callback” method. This is it!!! Remember that I mentioned that I had ZERO control over the thrid-party service and therefore I could not implement this feature.

Remember, I never give up; when there’s a will there’s a way. So I hit a major blocker due to the technology, in this case it was Javascript. I know that if I was working on a pure java front-end GUI, this would have never occurred and Flex allows you to query other third-party services but I have no knowledge of ActionScript. I decided to go for JavaFX just because it is Java and allows me to connect and get my data (actually it’s not mine). My options were Webstart, Applet and JavaFX. First of all, it has to be part of the site so my real options were Applet and JavaFX. Applet do not have a rich set of tools such as Map, Chart and everything else that JavaFX provides and I do not want to waste time coding them.

So same adventure but different episode; I am currently looking to implement the JavaFX UI so stay tune for the sequel and screenshot. I could have never anticipated those problems with the third-party and then Javascript but believe me it was a good experience and my Javascript just went +1.


GWT Visualization Example – Annotated Time Line Chart Tutorial

If you are a server-side Java developer such as myself, I am sure you want an easy way to create AJAX based application but pure JavaScript (ECMAScript) is not your strong skills. The beauty of JavaScript is that it runs on any web server, no need for a servlet container or anything of that sort.

So, I have been writing AJAX based UI using the GWT framework for the past year and half. I am still not a web developer but I understand enough CSS to spice up my site. Anyway, I am writing this tutorial because I think that the GWT Visualization team, even tough they did a good job, over complicates the creation of charts in their tutorial. I was trying to create an Annotated Time Line chart so I looked up my previous code I wrote for the GWT Portlet JSR-168, see here. I also decided to run a search (don’t be evil, Google is your friend) to try to find different examples and hopefully some nice custom charts. First of all, based on the search result; I thought that some of examples, including Google’s own, were confusing and over complex. Most examples uses AJAXLoader to load the Visualization API, but you shouldn’t have to use this. This is the simplest way to create a GWT Annotated Time Line Chart.

gwt annotated time line chart

1. Using your favorite development tool with support for GWT framework, create a new Java web application, you can export the compiled JavaScript later to a non-based web application, if you use an IDEW you should code-completion support.

2. Make you sure you have included the GWT Visualization API module in your classpath.

3. In your project source code root directory, you should <AppNamexxxx>.gwt.xml file. make sure to add teh following line to it in order to make the  module available to your application.

<inherits name=”com.google.gwt.visualization.Visualization”/>

4. In order to keep this tutorial short and straight to point, I have included the chart creation code in my <AppNamexxxx>EntryPoint.java class

public class MainEntryPoint implements EntryPoint
    * Creates a new instance of MainEntryPoint
    public MainEntryPoint()
    * The entry point method, called automatically by loading a module
    * that declares an implementing class as an entry-point
    public void onModuleLoad()
        Runnable onLoadCallback = new Runnable()
            public void run()
                DataTable data = createHistoryTable(result);
                AnnotatedTimeLine.Options options = AnnotatedTimeLine.Options.create();
        VisualizationUtils.loadVisualizationApi(onLoadCallback, AnnotatedTimeLine.PACKAGE);
    // This method will create the Data used by the chart
    private DataTable createHistoryTable()
        DataTable data = DataTable.create();
            data.setValue(0, 1, 100);
            data.setValue(0, 2, 120);
            data.setValue(0, 3, 90);

            data.setValue(1, 1, 90);
            data.setValue(1, 2, 110);
            data.setValue(1, 3, 100);

            data.setValue(2, 1, 100);
            data.setValue(2, 2, 180);
            data.setValue(2, 3, 80);

            data.setValue(3, 1, 130);
            data.setValue(3, 2, 100);
            data.setValue(3, 3, 130);

            data.setValue(4, 1, 130);
            data.setValue(4, 2, 170);
            data.setValue(4, 3, 150);
        return data;  

Don’t forget to import all the necessary classes and voila!

I hope this will save you some time in creating your charts.



Next stop… Google Wave… I have received my invite!!!

I am sure by now, must geeks around the world have heard about Google Wave and its endless capabilities. I am not sure of the last one. Anyway, I have received my invitation from Google about 2 weeks, yippie, but I did not logged in until today mainly because I was too busy on other projects of mine.

When first logged, I have to admit that I was not very much impressed. I thought looked like a better version of Twitter based on the user interface. Nevertheless, I am looking to build a demo Wave application that can be embed into the Google Wave. I want to build something simple but I am not getting any inspiration. By the way, initially this blog entry was going to be a tutorial about how to build a wave app.  This is what I decided to do. I have created a wave or should i say a wavelet, which will be used to brainstorm ideas about what to build.

Ooh, I have an idea. I think that I should make a tutorial which will show to build a Google Wave application that extract phone numbers from “blips” and make it possible to dial them straight¬† using the “callto” protocol. This will allow a participant to dial a number from the wave app to let’s say their Skype phone. This should be simple enough. Now let’s find the time to do it. Hopefully my next entry will be it.

Until then, keep the channel open.

My Google Wave Screenshot


Building Portlet 1.0 (JSR168) with GWT 1.7 on NetBeans 6.7

In this tutorial, I will build a Portlet 1.0 (JSR168) which I will then deploy on Liferay and OpenPortlet Container. Alternatively, the portlet should be able to run on any other JSR168 compliant portlet container. I like the “Hello World” tutorial that we are accustomed to but I wanted to do something different this time. I decided to build the a GWT 1.7 based portlet which also make use of the Google Visualization API for GWT.
In order to follow this tutorial, you will need the following:

This is not a tutorial about GWT or JSR168 Portlet but a focus on how to make them both work together to provide a nice UI. Prior knowledge of building and deploying portlet applications and developing GWT applications is required.
Once the development environment is ready, launch NetBeans and create a new web application project with Portlet and GWT support. Follow these steps in order to create web application with Portlet and GWT support.

  1. Create a new web project
  2. Give a project name and click next
  3. Choose your deployment portlet container and click next

  1. Add Google Web Toolkit (GWT) framework to your project

  1. Add Portlet Support to your project, chise any version and tick the boxes to create portlet and jsps. Fill in any required fields and click finish

NetBeans then generates all the required files in order to build the application. Initially, the two frameworks; Portlet and GWT are unaware of each other. Depending on your folder structure the following will be different. Here is a screenshot of my project structure in NetBeans.

My project is called LiferayHomePortlet as my Portlet Container is Liferay 5.2. My root package is com.etapix. This package will be used by GWT as the default package and will create the client and server packages as follow:

  • Com.etapix.client: this is package will have all my client side code including my xxxxEntryPoint.java class (xxxx being the name that you have chosen for your GWT)
  • Com.etapix.server: this package will not be used for the purpose of this tutorial

xxxx.gwt.xml (xxxx should be replaced with the name you are chosen will setting up the GWT framework for the project) was created in my root package “com.etapix”

NetBeans portlet generation feature has created, among other files, three jsps file under the WEB-INF/jsp folder

  • xxxxPortlet_edit.jsp
  • xxxxPortlet_help.jsp
  • xxxxPortlet_view.jsp

and the java class which will be used to render the portlet are allocated in com.etapix.liferay.portlet folder as LiferayHomePortlet.java.

In order for the portlet to display the chart from the GWT Visualization API, I have changed the generated code from portletEntrtyPoint.java. Once the changed to the GWT file was done, change the following file:

  • xxxxPortlet.java to include the following line in the “doView” method. Here is how you doView method should look like

    public void doView(RenderRequest request, RenderResponse response) throws PortletException, IOException {


    PortletRequestDispatcher dispatcher =


    PrintWriter writer = response.getWriter();

    writer.println(“<script language=’javascript’ src='” + request.getContextPath() + “/com.etapix.portlet/com.etapix.portlet.nocache.js’></script>”);

    dispatcher.include(request, response);


  • xxxxPortlet_view.jsp. This is what your code should look like

    <%@page contentType=”text/html”%>

    <%@page pageEncoding=”UTF-8″%>

    <%– Uncomment below lines to add portlet taglibs to jsp

    <%@ page import=”javax.portlet.*”%>

    <%@ taglib uri=”http://java.sun.com/portlet_2_0″ prefix=”portlet”%>

    <portlet:defineObjects />

    <%PortletPreferences prefs = renderRequest.getPreferences();%>


    <div id=”gwt”></div>

Once the changes are completed, build your application and deploy it to your portlet container of your choice.

This is what it looks like in Liferay Portlet container

this is what it looks in OpenPortal Portlet Container.

This was my first blog tutorial as I am looking to provide more tutorials in the future. I hope you found this helpful. I have included the NetBeans project folder for your to play with.
download NetBeans project

Please support my blog and its advertisers by clicking on the interesting products/ services on the right (Google ads).  Cheers.