Posts Tagged ‘GWT’

GWT Hosted Mode and Log4j

Posted in GWT, Java, Programming on January 19th, 2009 by Nick – 2 Comments

This is a short tutorial on getting log4j to run in the embedded Tomcat included with GWT.  Before I go on I need to say that log4j will only work on the server-side. GWT doesn’t support logging with log4j on the client side (yet…maybe). To log on the client side you’ll still have to use GWT.log()

There are four things we’ll need to accomplish:
1. Place the log4j.properties file
2. Write a servlet that will initialize the logger.
3. Modify the web.xml file.
4. Modify the GWT -shell and -compile scripts.

1. Place the log4j.properties file

Under <gwt-project>/tomcat/webapps/ROOT/WEB-INF/ create a “classes” dir.  The “classes” dir is where you put the log4j.properties file.  Here’s the log4j.properties file I’m using:
log4j.rootCategory=DEBUG, dest1, dest3

! Log to the console
log4j.appender.dest1=org.apache.log4j.ConsoleAppender
log4j.appender.dest1.layout=org.apache.log4j.PatternLayout
log4j.appender.dest1.layout.ConversionPattern=%-5p %d{HH:mm:ss.SSS} [%-15.15t] [%-25.25c{1}] %m%n

! LOG TO A FILE
log4j.appender.dest3=org.apache.log4j.RollingFileAppender
log4j.appender.dest3.layout=org.apache.log4j.PatternLayout
log4j.appender.dest3.layout.ConversionPattern=%-5p %d{EEE MMM dd HH:mm:ss.SSS zzz yyyy} [%-15.15t] [%-25.25c{1}] %m%n

! Specify the file name
log4j.appender.dest3.File=./logs/hosted-log4j.log

! Control the maximum log file size
log4j.appender.dest3.MaxFileSize=3000KB
log4j.appender.dest3.MaxBackupIndex=3

2. Write a servlet that will initialize the logger.

Next you’ll want to have a servlet that will load the properties file and init the logger. This file (Log4JInitServlet.java) will go in the <gwt-project>/src/ dir.

package com.nick.example.server;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import org.apache.log4j.Logger;
import org.apache.log4j.PropertyConfigurator;
/**
* Log4JInitServlet
*
* This class should get loaded first (based on the web.xml),
* so it can init the logger.
*
* @author Nick
*/
public class Log4JInitServlet extends HttpServlet {
  static final Logger logger = Logger.getLogger(Log4JInitServlet.class);
 
  public void init() throws ServletException {
    System.out.println("Log4JInitServlet init() starting.");
    String log4jfile = getInitParameter("log4j-properties");
    System.out.println("log4jfile: "+log4jfile);
    if (log4jfile != null) {
      String propertiesFilename = getServletContext().getRealPath(log4jfile);
      PropertyConfigurator.configure(propertiesFilename);
      logger.info("logger configured.");
    }else{
      System.out.println("Error setting up logger.");
    }
      System.out.println("Log4JInitServlet init() done.");
  }
}

This servlet should be loaded first, which can be accomplished by modifying the web.xml file.

3. Modify the web.xml file.

This file is located in <gwt-project>/tomcat/webapps/ROOT/WEB-INF/
My web.xml file looks like:

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
  <servlet>
    <servlet-name>Log4JInitServlet</servlet-name>
    <servlet-class>com.nick.example.server.Log4JInitServlet</servlet-class>
    <init-param>
      <param-name>log4j-properties</param-name>
      <param-value>/WEB-INF/classes/log4j.properties</param-value>
     </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet>
    <servlet-name>shell</servlet-name>
    <servlet-class>com.google.gwt.dev.shell.GWTShellServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>shell</servlet-name>
    <url-pattern>/*</url-pattern>
  </servlet-mapping>
</web-app>

Notice the line <load-on-startup>1</load-on-startup>, which tells tomcat to load the Log4JInitServlet first.

4. Modify the GWT -shell and -compile scripts.

Modify your gwt –shell and –compile files to add the log4j jar into the class path. Here’s my <project>-shell.cmd file. Take note of the log4j jar that I added.

[Windows]
@java -Xmx256M -cp “%~dp0\src;%~dp0\bin;C:/lib/gwt-windows-1.5.3/gwt-user.jar;C:/lib/gwt-windows-1.5.3/gwt-dev-windows.jar;C:/lib/gwt-windows-1.5.3/log4j-1.2.12.jar” com.google.gwt.dev.GWTShell -out “%~dp0\www” %* com.nick.example.HostedLog4j/HostedLog4j.html

[linux]
#!/bin/sh
APPDIR=`dirname $0`;
java -Xmx256M -cp “$APPDIR/src:$APPDIR/bin:$HOME/projects/gwt-linux-1.5.3/gwt-user.jar:$HOME/projects/gwt-linux-1.5.3/gwt-dev-linux.jar:$HOME/projects/lib/log4j-1.2.15.jar” com.google.gwt.dev.GWTShell -out “$APPDIR/www” “$@” com.nick.example.HostedLog4j/HostedLog4j.html;

Make sure to change the <project>-compile.cmd in the same way.
You can then run your <gwt-project>-shell.cmd and the logger should work. It will create a log directory in under <gwt-project> and place your log file inside there.

GWT-Ext to Ext-GWT

Posted in GWT, Java on January 13th, 2009 by Nick – 12 Comments

Trying both GWT-Ext and Ext-GWT

In trying to make a decision on whether to go GWT-Ext or Ext-GWT I’ve done some reading including the websites of those two technologies, forums, and various blogs like:

http://www.gwtsite.com/top-5-gwt-libraries/
http://roberthanson.blogspot.com/2008/04/gwt-ext-vs-ext-gwt.html
http://ajaxian.com/archives/to-gwt-ext-or-to-ext-gwt

The most talked about topic when discussing this comparison seems to be licensing, but I don’t want to spend much time on that.  Instead of comparing the two technologies line by line, I take a small existing vanilla GWT application and add new needed functionality such as drag and drop, resizable columns, sortable columns, and additional layouts.  This was done first using GWT-Ext and then again using Ext-GWT.  The opinions I gather are based on coding with both over a few days.

GWT-Ext Experience

This was actually my second choice, and became my first choice based on comparing the licenses of the two.  My first steps were changing out widgets used and hoping that the underlying code dealing with the model wouldn’t need to be modified (much).  Layouts are one thing I noticed that are considerably different.  Instead of using VerticalPanel or HorizontalPanel, you use a Panel and add a modifier to make it flow vertical or horizontal, much like Swing.  While this is good if you know Swing, and are starting the app from scratch, it can be a pain if converting like i am.

Another difference when dealing with going vanilla GWT to GWT-Ext was rewriting code that handles FlexTable or GridPanel updates or, in other words, the way you get data into the table.  In GWT land, you can treat the FlexTable as the data, much like a two-dim array, and set data to the cells.  GWT-Ext uses something called a Store, which is basically the data itself.  When you add to the Store, the GridPanel gets updated.  There are pros and cons to both methods I suppose, but that’s another discussion.  I will say the reason I stopped using GWT-Ext was because of problems rendering the grid to the screen when using the GridPanel with certain layouts.  I suspected this was due to it being a js wrapper.  It turned out there was a known bug which required a workaround just to get the grid to show.  After spending many hours dealing with this problem and a few others I decided I shouldn’t be wasting my time with something that has problems taking one panel and adding it to another like panel.add(grid).  In GUI building, an operation like that is simple and frequent.

On to Ext-GWT

Last thing I wanted to do was revert back and start again, but here it goes.

One big difference between the two Exts is that GWT-Ext is just javascript wrapper.  It’s visible while configuring because you’ll add scripts and javascript libraries to your public folder.  With Ext-GWT none of that needed to be done.  This is because Ext-GWT is a GWT library and doesn’t wrap javascript.  I like this.

So I start again changing out widgets, and notice that there’s almost no work to be done.  The new widgets use same function calls as old ones.  They did drop the ball on the Button class and it’s listener (actually, I don’t like the way events are coded).  Not sure why you would not stick with a ClickListener and onClick()….but whatever.   The layouts are similar, and they include VerticalPanel as well.  Changing the FlexTable out for the Grid took some work, but less than GWT-Ext.  It does use a StoreList (similar to GWT-Ext’s Store) but I felt it made a little more sense.  There was little time spent correcting column sizes and dealing with autofills, which makes me happy, and there were no issues getting the Grid to show up.

Final Decision

Well, everything was fine but another day has passed and I’m just not 100% happy with Ext-GWT.  Running the hosted browser and compiling has become slower than ever (still faster than GWT-Ext though).  I got to thinking and realized that the only enhanced component I really needed was the Grid over the FlexTable, and I did get the grid setup just like I wanted.  Since one of the things I really hated about Ext-GWT was the event handling code, I asked myself: Do I really need to have all of my buttons, checkboxes, panels, etc in Ext-GWT?  Can’t I just use the fancy Grid and then make everything else using vanilla GWT?  I decided to try this, and not only did it work perfectly, but there was noticably lower load times and increased speed.

My final take is, use vanilla GWT for events and where you can use it.  For GWT components that are missing features you need use Ext-GWT.

** Unable to load Mozilla for hosted mode ** (GWT & Ubuntu 8.10 Linux)

Posted in GWT, Linux, Ubuntu on January 2nd, 2009 by Nick – 18 Comments

I’ve recently been working with GWT (Google Web Toolkit) and ran into a small snag configuring it on my Ubuntu 8.10 setup.  This will be a short HOW-TO for configuring GWT on Ubuntu or other linux distros.  The three topics I’m going to talk about are:

  • Getting the hosted browser working in linux
  • Dealing with an external browser error when using Compile/Browse
  • Adding GWT to the path.

Getting the Hosted Browser Working in Linux
When trying to run using the hosted browser (shell) I got the following exception:

** Unable to load Mozilla for hosted mode **
java.lang.UnsatisfiedLinkError: /home/hellz/projects/gwt-linux-1.5.3
/mozilla-1.7.12/libxpcom.so: libstdc++.so.5:
cannot open shared object file: No such file or directory
 at java.lang.ClassLoader$NativeLibrary.load(Native Method)
 at java.lang.ClassLoader.loadLibrary0(ClassLoader.java:1778)
 at java.lang.ClassLoader.loadLibrary(ClassLoader.java:1674)
 at java.lang.Runtime.load0(Runtime.java:770)
 at java.lang.System.load(System.java:1005)
 at com.google.gwt.dev.shell.moz.MozillaInstall.load(MozillaInstall.java:190)
 at com.google.gwt.dev.BootStrapPlatform.init(BootStrapPlatform.java:49)
 at com.google.gwt.dev.GWTShell.main(GWTShell.java:354)

The key to troubleshooting the problem is in the second line, libstdc++.so.5 to be exact.  It can’t find this C++ library.  Turns out the hosted browser needs libstdc++5, but the version currently installed on my 8.10 system is libstdc++6.  So you can either:

Open System->Administration->Synaptic Package Manager and install libstdc++5
or
At a console type: sudo apt-get install libstdc++5

Now you should be running in a hosted browser fine.

Error on Compile/Browse
The second issue you might run into is GWT not recognizing your external browser.  You’ll know you have this problem after clicking on the Compile/Browse button.

You get an error that looks like:

[ERROR] Unable to find a default external web browser
[WARN] Try setting the environment variable GWT_EXTERNAL_BROWSER to
  your web browser executable before launching the GWT shell

The problem is that GWT can’t find your default installed browser (which is most likely firefox).  This is easy to fix:

  1. Open your .bashrc or .profile file, which is located in your home directory.  So type gedit ~/.bashrc or nano ~/.bashrc or however else you want to open it.  The reason I listed both files is because IMO the environment and pathing system of Ubuntu (and some other distros) is a spiderweb mess.  I modified my .bashrc, but I’m not sure if that’s best practice.
  2. Add this line to the bottom of the file: export GWT_EXTERNAL_BROWSER=/usr/bin/firefox
  3. Logout and log back in for the changes to take affect.

Now the Compile/Browse button should bring up your external browser.

Adding GWT to the path

Add PATH=”$HOME/projects/gwt-linux-1.5.3:$PATH” to your .bashrc (or .profile) file.  Of course you might have to modify the directory name to point where you have GWT installed.  For this to take effect you’ll have to logout and log back in as well.  You can double check your path to see if GWT has been added by typing echo $PATH. Once you have GWT added to your path you’ll be able to execute projectCreator and applicationCreator from anywhere.