Posts Tagged ‘GWT’

Performance: Grid vs FlexTable

Posted in GWT, Programming on February 18th, 2009 by Nick – 3 Comments

I’ve been having some problems in GWT with a table pulling 100+ rows at a reasonable speed using the FlexTable, but before making massive changes by switching to a Grid I ran some tests comparing the two.  I originally found this issue when testing on IE for the first time after having no problems with FF
read more »

GWT Right-click Context Menu

Posted in GWT, Java, Programming on February 17th, 2009 by Nick – 39 Comments

The Google Web Toolkit has been out for a while now, and yet there is still basic functionality that is missing from the toolkit.  Don’t get me started on the lack of draggable/resizable columns for the FlexTable, because that’s a rant and a half.  Given that GWT’s event handling model isn’t bad, you’d think they’d have included from the get-go the ability to handle right-clicks and bringing up a context menu or popup menu.  Well, even with 1.6 on the doorstep it seems they forgot again or just don’t care.   Now some people will spout out “web apps don’t need or shouldn’t have right-clicks handled or context menus overridden”……and for those I say STFU!  Web apps are used for more than just banking, news, forums and dare I say blogs.  The browser is becoming the new medium for running applications and just because an application is running in a browser doesn’t mean we should limit functionality.  That’s about as narrow minded as saying that we’ve only had one mouse button for this long, why add a second one?  Duh!

Anyway, enough with the blabbing.  I’ve put together a simple example to add a right click context menu and override the default browser context menu using GWT. 
read more »

GWT Yellow Fade Technique (YFT)

Posted in GWT, Java, Programming on February 9th, 2009 by Nick – 3 Comments

This is a quick example of a fading technique which notifies that a change or update in your GWT app has happened. read more »

Inserting javascript into GWT using JSNI

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

Sure the whole point of using GWT is so you don’t have to mess with that abortion known as javascript, but sometimes you may need (or actually want) to use javascript for something in your GWT application.  For this we use JavaScript Native Interface (JSNI).  JSNI uses the native keyword, so if you’ve used JNI (Java Native Interface) in the past you’ll have little to get used to.

I needed to use JSNI recently.  Since GWT doesn’t provide a way to bring the browser to the front or top like javascript does with it’s self.focus(); I was able to use JSNI to call that line of javascript.  Here’s a quick example:

public static native void bringToFront() /*-{
  self.focus();
}-*/;

Then all you need to do is call the bringToFront() method like you normally would.  Along with noticing in the native keyword, you’ll immediate see that the block looks commented out.  JSNI has two tokens to mark the beginning and end of your javascript the /*-{ marks the begin and }-*/ marks the end.  Everything in between those tokens are assumed to be javascript.

There are more examples on GWT JSNI site.

Simple Charts in GWT with gchart

Posted in GWT, Java, Programming on January 26th, 2009 by Nick – 8 Comments

I’ve been tasked with adding some simple charts to a GWT project and after looking at several APIs I’ve settled with trying out gchart.  A couple of reasons for this choice is:

  • gchart is 100% GWT (meaning it’s not a javascript wrapper)
  • It runs on the client-side. Some other charting APIs actually build the chart on the server-side as an image and return the link for the image.  This can be an advantage for some situations, so you may need to think about if you want a client-side or server-side render.
  • Open source under Apache License, Version 2.0
  • Very simple to use.

I put together a very simple example, and it shows how quickly you can build a chart.  The example is a compound interest financial calculator shown below (go ahead and try it out).  It has a few fields to enter your initial amount, annual contributions, interest rate, number of compounds per year and the number of years.  After clicking on the calculate button it will show your future amount and chart it.


In case the iframe doesn’t show up in your browser you can see and try the charting example here.

The simplicity of this charting API is the fact that the charts are GWT widgets.  Here’s the code for my compounding interest chart:

public class AmountChart extends GChart {
	public AmountChart() {
		setChartSize(240, 200);
		setPadding("4px");
		getXAxis().setAxisLabel("Years");
		getYAxis().setAxisLabel("$");
	}
 
	public void addPoint(double x, double y) {
		GWT.log("point added ("+x+", "+y+")", null );
		getCurve().addPoint(x, y);
	}
}

Then all I did was add it to the DecoratedTabPanel, put in the event listeners, the formula (which I got from wiki) and done.
You can download the full source here, and the entire application is client side.

Updated 2008-01-28: I updated the iframe that the form is in to be more friendly with IE. Also made a change recommended by John Gunther to remedy a problem with IE. Compiled using gchart 2.4 and I updated the downloadable source.