4124677046_69aa7a07b3

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();
                options.setDisplayAnnotations(true);
                options.setDisplayZoomButtons(true);
                options.setScaleType(AnnotatedTimeLine.ScaleType.ALLFIXED);
                options.setLegendPosition(AnnotatedTimeLine.AnnotatedLegendPosition.SAME_ROW);
                AnnotatedTimeLine atl = new AnnotatedTimeLine(data, options, “600px”, “200px”);
                RootPanel.get().add(atl);
                
            }
            
            
            
        }      
        ;
        VisualizationUtils.loadVisualizationApi(onLoadCallback, AnnotatedTimeLine.PACKAGE);
        
    }
    
    
    
    // This method will create the Data used by the chart
    private DataTable createHistoryTable()
    {
        
        DataTable data = DataTable.create();
        data.addColumn(AbstractDataTable.ColumnType.DATE, “Date”);
        data.addColumn(AbstractDataTable.ColumnType.NUMBER, “Price”);
        data.addColumn(AbstractDataTable.ColumnType.NUMBER, “Low”);
        data.addColumn(AbstractDataTable.ColumnType.NUMBER, “High”);
        data.addRows(5);
                  
            DateTimeFormat dtf = DateTimeFormat.getFormat(“yyyy-MM-dd”);
            data.setValue(0, 0, dtf.parse(“2009-11-21”));
            data.setValue(0, 1, 100);
            data.setValue(0, 2, 120);
            data.setValue(0, 3, 90);

            data.setValue(1, 0, dtf.parse(“2009-11-22”));
            data.setValue(1, 1, 90);
            data.setValue(1, 2, 110);
            data.setValue(1, 3, 100);

            data.setValue(2, 0, dtf.parse(“2009-11-23”));
            data.setValue(2, 1, 100);
            data.setValue(2, 2, 180);
            data.setValue(2, 3, 80);

            data.setValue(3, 0, dtf.parse(“2009-11-20”));
            data.setValue(3, 1, 130);
            data.setValue(3, 2, 100);
            data.setValue(3, 3, 130);
          

            data.setValue(4, 0, dtf.parse(“2009-11-19”));
            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.

 

netbeans-choose-server

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 {

    response.setContentType(“text/html”);

    PortletRequestDispatcher dispatcher =

    getPortletContext().getRequestDispatcher(“/WEB-INF/jsp/LiferayHomePortlet_view.jsp”);

    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.