Dec 12 2008

Override rendering of column from SmartGWT data source

Tag: Gwt,Java,Programming,smartgwtAbhijeet Maharana @ 10:17 pm

SmartGWT widgets can render themselves sensibly using the data source definition. So for a grid, we don’t need to define the columns explicitly. However, we can override the rendering of some or all columns as needed.

Assume that our data source and data looks like this:

class CompanyDataSource extends DataSource {
	public CompanyDataSource(String id) {
		setID(id);
 
		DataSourceTextField companyName = new DataSourceTextField("company", "Company");
		DataSourceFloatField price = new DataSourceFloatField("price", "Price");
		DataSourceDateField lastChanged = new DataSourceDateField("lastChanged", "Last Changed");
		setFields(companyName, price, lastChanged);
	}
}
"3m Co", "71.72", "9/1 01:25 AM"

And the grid that renders this data

DataSource dataSource = new CompanyDataSource(“companyList1”);
dataSource.setClientOnly(true);
 
ListGrid companyGrid = new ListGrid();
companyGrid.setHeight(300);
companyGrid.setWidth(500);
companyGrid.setTitle("SmartGWT grid");
companyGrid.setDataSource(dataSource);
companyGrid.setAutoFetchData(true);

To override the display format of lastChanged column, one approach would be

ListGridField lastChangedField = new ListGridField("lastChanged", "Last Changed (new title)", 180);
CellFormatter dateFormatter = new CellFormatter(){
	public String format(Object value, ListGridRecord record, int rowNum, int colNum) {
 
		DateTimeFormat inputFormat = DateTimeFormat.getFormat("d/M hh:mm a");
		DateTimeFormat outputFormat = DateTimeFormat.getFormat("MMM dd HH 'hours' mm 'minutes'");
		Date inputDate = inputFormat.parse(value.toString());
		String output = outputFormat.format(inputDate);
 
		return output;
	}
};
 
lastChangedField.setCellFormatter(dateFormatter);
companyGrid.setFields(lastChangedField);

We define a ListGridField with the same name “lastChanged” as in the data source. SmartGWT will use this name to do the merge. Our custom cell formatter matches the input date format and returns it in a different format.

But now the grid will only display this field. To cause it to display other data source fields as they are, we need to call

companyGrid.setUseAllDataSourceFields(true);

We can also override the date format in the data source itself so that all widgets sourcing this data will reflect it. As I was thinking about this, I came across this post on the SmartGWT forums. The API will support this functionality soon and as that thread also mentions, for formatting dates, you can use ListGrid.setDateFormatter() and DateItem.setDisplayFormat().

Thats it for this time. Ill keep posting tidbits as I learn along the way.


Dec 07 2008

GWT-Ext Store to SmartGWT DataSource

Tag: Ext,Gwt,Java,Programming,smartgwtAbhijeet Maharana @ 2:18 am

GWT-Ext Store instances are all over my code. And I am populating them by various means. While migrating from GWT-Ext to SmartGWT, converting Stores to DataSources will probably take up a lot of time. I was wondering if I could migrate and test only the grids first and deal with the stores later. Code below could help do just that. It creates a DataSource from a Store. You can use this data source to populate SmartGWT grids and when the grids are working fine, replace the stores completely. Isn’t exactly a life saver but nevertheless. Have tested it only on a trivial store.

It doesn’t matter but assume that the RecordDef used to create the Store looks like this:

RecordDef recordDef = new RecordDef(new FieldDef[] {
	new StringFieldDef("company"), 
	new FloatFieldDef("price"),
	new FloatFieldDef("change"), 
	new FloatFieldDef("pctChange"),
	new DateFieldDef("lastChanged", "n/j h:ia"),
	new StringFieldDef("symbol"), 
	new StringFieldDef("industry") 
});

Create a DataSource with the same fields:

private DataSource createDataSource(Store store){
	DataSource dataSource = new DataSource();
	dataSource.setClientOnly(true);
 
	String[] fields = store.getFields();
	for(String field:fields) {
		DataSourceField smartgwtField = new DataSourceField();
		smartgwtField.setName(field);
		dataSource.addField(smartgwtField);
	}
	return dataSource;
}

Add a method that copies records from the Store to the data source created above and call it in the Store’s onLoad handler

public void copyStore(Store store, DataSource dataSource) {
	Record[] records = store.getRecords();
	String[] fields = store.getFields();
 
	for(Record gwtextRecord:records) {
		ListGridRecord smartgwtRecord = new ListGridRecord();
		for(String field:fields) {
			smartgwtRecord.setAttribute(field, gwtextRecord.getAsString(field));
		}
		dataSource.addData(smartgwtRecord);
	}
}

For heavy stores, this code will probably punish the browser and column data types are ignored as well but it is meant only for the dev environment until all components have been replaced eventually.

PS: If you need it, here is a small sample with GWT-Ext and SmartGWT grids being populated from the same RPC method. You will need to add gwtext.jar and smartgwt.jar and use Cypal studio plugin or add compile/run scripts.


Oct 07 2008

GWT-Ext Combo helper method

Tag: Ext,Gwt,Java,Javascript,ProgrammingAbhijeet Maharana @ 10:25 pm

While working with a GWT-Ext application, I found that most of the Combo boxes used are just meant to be readonly drop down lists. Like the style 2 combo boxes we had in VB. A 2D array with display and value fields is all that is needed. Yet, every combo needs 6-7 lines to get going.

This utility method may be handy in such situations:

public static ComboBox getDropDownCombo(Object[][] data, String fieldLabel, String emptyText, int width, int listWidth)
{
	Store store = new SimpleStore(new String[]{"display", "value"}, data);
	ComboBox combo = new ComboBox();
	combo.setEditable(false);
	combo.setStore(store);
	combo.setDisplayField("display");
	combo.setValueField("value");
	combo.setMode(ComboBox.LOCAL);
	combo.setTriggerAction(ComboBox.ALL);
 
	if(fieldLabel != null)
		combo.setFieldLabel(fieldLabel);
	else
		combo.setHideLabel(true);
 
	if(width != -1)
		combo.setWidth(width);
 
	if(listWidth != -1)
		combo.setListWidth(listWidth);
 
	if(emptyText != null)
		combo.setEmptyText(emptyText);
	else
		// if there is no empty text, select the first value by default
		combo.setValue(data[0][1].toString());
 
	return combo;
}

Sample usage could be:

String[][] data = {{ "Mark as read", "1"}, {"Mark as unread", "2"}, {"Add star", "3"}, {"Remove star", "4"}};
ComboBox cmbMin = UIHelper.getDropDownCombo(data, "Actions", "[Select]", 275, -1);

Sep 28 2008

GWT-Ext and jQuery input mask plugin

Tag: Ext,Gwt,Java,Javascript,Programming,WebAbhijeet Maharana @ 1:59 am

Yesterday, while dabbling with jQuery and getting amazed by the wealth of plugins and effects available for this library, I came across http://digitalbush.com/2008/07/31/masked-input-plugin-114/. It allows you to fit text fields with an input mask to allow only fixed-width input in a certain format. I had seen it first in MS Access a long long time ago.

To use it with GWT-Ext, include jquery.js and jquery.maskedinput.js in your host HTML file. Use <script></script> and not <script/> to avoid wasting time later.

<script language = "javascript" type="text/javascript" src="js/jquery.js" ></script>
<script language = "javascript" type="text/javascript" src="js/jquery.maskedinput.js" ></script>

Now write some native code to call the plugin’s methods:

private native void addPlaceholder(String placeholder, String maskString) /*-{
	$wnd.$.mask.addPlaceholder(placeholder, maskString);
}-*/;
 
private native void mask(String id, String maskString, String placeholderString) /*-{
	if(placeholderString != null)
		$wnd.$('#' + id).mask(maskString, {placeholder:placeholderString});
	else
		$wnd.$('#' + id).mask(maskString);
}-*/;

Add the mask to a text field:

addPlaceholder("~", "[+-]");
textField.doOnRender(new Function(){
	public void execute() {
		mask(textField.getId(), "Rs. ~9999.99/-", " ");
	}
});

This will only allow values of the type “Rs. +2345.50/-” with “Rs. ” and “/-” already filled in for the user.

Update: See this: http://gwt-ext.com/forum/viewtopic.php?f=9&t=2984. Thanks mdeg and vanderbill!


Jun 11 2008

Gwt-Ext 2.0.4 is out

Tag: Ext,Gwt,Java,Programming,WebAbhijeet Maharana @ 10:37 pm

Gwt-Ext 2.0.4 was released today. Mario announced the release at http://gwt-ext.com/forum/viewtopic.php?f=12&t=1622. I quote from the release notes.

Features

  • Support for GWT 1.5 RC1
  • FF3 Support
  • PageBus
    Messaging support which allows loosely coupled components to communicate with each other via traditional pubhish / subscribe paradigm. See demo in Showcase under ‘Miscellaneous -> Publish Subscribe’

  • Eclipse Project Files
    You can now use GWTExt directly from SVN as an Eclipse project. You just need to add the GWT_HOME variable to point to the GWT Directory in Eclipse
    Windows|Preferences|Java|Build Path|Classpath Variables

Changes

  • Various Bug Fixes
  • Fixed Memory leak when add and remove Panels (Mix of GWT and GWT-Ext)

GwtExtUx Changes

  • FileTreePanel
  • SwfUploadPanel
  • CustomReader
  • Removed individual UX from GwtExtUx.gwt.xml. This means whenever a UX is needed, They have to be added individually in the users gwt.xml file.
  • Latest patch in Multiselect.js including memory leak fixes, drag back, etc…

Download the latest version from http://gwt-ext.com/download/. Gwt-Ext-UX is being subjected to some last minute tests and a new version should be out in a couple of days.

If you have just started, the forums are always buzzing with activity and you are most welcome. These beginner screencasts may also be helpful.


Jun 04 2008

Gwt-Ext Custom Reader

Tag: Ext,Gwt,Java,Javascript,Programming,WebAbhijeet Maharana @ 11:36 pm

Screenshot

If I had to populate a Gwt-Ext store with data in arbitrary format,

  1. I could parse data on the client and use a MemoryProxy + ArrayReader or

  2. I could have the server do the parsing and send JSON data to the client which could then be handled by a JsonReader for populating the store.

This thread at Gwt-Ext.com made me wonder if a good third option would be to have a reader that can be used directly with the store and proxy mechanism and that allows one to write parsing logic in Java on the client. I have attempted a CustomReader that does just that. You can use it with a proxy that fetches remote data.

CustomReader registers an Ext user extension of the same name. Ill refer to them as JavaCustomReader and JSCustomReader to avoid confusion. JavaCustomReader has a static method for registering the user extension.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
...
static {
	init();
}
...
private static native void init()/*-{
	$wnd.Ext.namespace("GwtExt");
 
        $wnd.GwtExt.CustomReader = function(meta, recordType, readerInstance) {
	      	meta = meta || {};
	       	this.readerInstance = readerInstance;
	        $wnd.GwtExt.CustomReader.superclass.constructor.call(this);
	};
 
	$wnd.Ext.extend($wnd.GwtExt.CustomReader, $wnd.Ext.data.DataReader, {
	      	read : function(response){
	       		return this.readerInstance.@com.maharana.gwtextcustomreader.client.CustomReader::read(Lcom/google/gwt/core/client/JavaScriptObject;)(response);
	        	},
 
        	readRecords : function(o){
			alert('Custom reader does not work with local data.');
        	}
        });
}-*/;

JSCustomReader is passed one additional parameter when it is instantiated. This parameter is a reference to the JavaCustomReader that created it.

1
2
3
protected native JavaScriptObject create(JavaScriptObject config, JavaScriptObject recordDef)/*-{
	return new $wnd.GwtExt.CustomReader(config, recordDef, this);
}-*/;

JSCustomReader’s read() method is called by a proxy which has finished loading remote data. The proxy expects a return object with the success status, total record count and actual records as its fields. JSCustomReader invokes JavaCustomReader.read() which looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public JavaScriptObject read(JavaScriptObject response) {
	ReaderResult r = handleRemoteResponse(new RemoteResponse(response));
	JavaScriptObject o = JavaScriptObjectHelper.createObject();
 
	JavaScriptObjectHelper.setAttribute(o, "success", r.success);
 
	JavaScriptObject[] jsRecords = new JavaScriptObject[r.records.length];
	for(int i =0; i<r.records.length;i++)
		jsRecords[i] = r.records[i].getJsObj();
 
	JavaScriptObjectHelper.setAttribute(o, "records", JavaScriptObjectHelper.convertToJavaScriptArray(jsRecords));
	JavaScriptObjectHelper.setAttribute(o, "totalRecords", r.records.length);
 
	return o;
}
 
// subclass and put your parsing logic here
public abstract ReaderResult handleRemoteResponse(RemoteResponse remoteResponse);

In turn, it handles the to/from JavaScriptObject stuff and calls handleRemoteResponse(). Users just need to provide their parsing code in this method in derived classes. RemoteResponse and ReaderResult are convenience classes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class RemoteResponse {
	JavaScriptObject response;
 
	public RemoteResponse(JavaScriptObject response) {
		this.response = response;
	}
	public String getResponseText() {
		return JavaScriptObjectHelper.getAttribute(response, "responseText");
	}
	public String getResponseXML() {
		return JavaScriptObjectHelper.getAttribute(response, "responseXML");
	}
}
 
class ReaderResult {
	public final boolean success;
	public final Record[] records;
 
	public ReaderResult(boolean success, Record[] records) {
		this.success = success;
		this.records = records;
	}
}

This completes CustomReader. As an example, I made a simple CSV parsing reader as mentioned in that thread at Gwt-Ext.com. This reader gets stock quotes from Yahoo finance as a CSV file and creates records out of them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
RecordDef recordDef = new RecordDef(  
	new FieldDef[]{  
        	new StringFieldDef("name"),
                new StringFieldDef("lasttrdate"),
                new StringFieldDef("lasttrval")
        }
); 
 
CustomReader c = new CustomReader(recordDef,1){
       	 public ReaderResult handleRemoteResponse(RemoteResponse remoteResponse) {
 
       		String csvalue = remoteResponse.getResponseText();
 
       		String[] lines = csvalue.split("n");
       		Record[] records = new Record[lines.length];
 
       		for(int i=0; i<lines.length; ++i)
       		{
       			String[] columns = lines[i]. replace('"', ' ').split(",");
       			records[i] = this.recordDef.createRecord(columns);
       		}
 
       		return new ReaderResult(true, records);
       	}
};

For getting the file from Yahoo, I made a utility Servlet Redirect.java which fetches the contents of a url and passes it to the client.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	String queryString = request.getQueryString();
	String address = queryString.split("url=")[1];
	URL url = new URL(address);
 
	PrintStream out = new PrintStream(response.getOutputStream());
	String inputLine = "";
	BufferedReader br = new BufferedReader(new InputStreamReader(url.openStream()));
	while((inputLine = br.readLine()) != null)
	{
		// System.out.println(inputLine);
		out.println(inputLine);
	}
 
	out.close();
}

It is invoked by an HttpProxy on the client as follows:

1
2
3
4
5
6
...
String url = "http://download.finance.yahoo.com/d/quotes.csv?s=INFY+XOM+BBDb.TO+JNJ+MSFT+GOOG+YHOO&f=nd1l1";
DataProxy proxy = new HttpProxy("redirect?url=" + url);
 
Store store = new Store(proxy, c);	// CustomReader c from above
...

Once we have the utility servlet and CustomReader as part of the project, I think it will be relatively easier to populate stores with any arbitrary format data. Feel free to drop your comments / suggestions. I would love to hear them.

Download Eclipse project from Gwt-Ext.com or Rapidshare

Reference: GwtProxy by michal.bergmann


May 16 2008

Gwt-Ext and Number Madness

Tag: Ext,Gwt,Java,Javascript,Programming,WebAbhijeet Maharana @ 11:52 pm

Gwt-Ext Number Madness screenshotThis is the 3rd form of my game Number madness. I had first written it using TurboC during the vacation after junior college. And then as a Firefox extension. Both are available in the projects section.

Using Gwt-Ext for writing something like this sounds a bit silly. But it did make me learn something new: button templates; thanks to gwtext+ and sjivan. I have described the program below in brief. You can download Eclipse project from the link at the end of this post.

An Ext button is made up of a table with 3 columns. All three columns have parts of the button sprite as their background image and the center TD holds a <button> element. You can see this template in Button.java above the setTemplate() method definition:

1
2
3
4
5
6
7
8
9
10
<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap">
	<tbody>
		<tr>
	     		<td class="x-btn-left"><i>&#160;</i></td>
	     		<td class="x-btn-center">
	     			<em unselectable="on"><button class="x-btn-text" type="{1}">{0}</button></em></td>
	     		<td class="x-btn-right"><i>&#160;</i></td>
	     	</tr>
	</tbody>
</table>

We can override this template to make the button look as we want it to. My modified template looks as shown below. There is only one extra CSS class for the table (see notes at end):

1
2
3
4
5
6
7
8
9
10
<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap mybutton">
	<tbody>
		<tr>
	     		<td class="x-btn-left"><i>&#160;</i></td>
	     		<td class="x-btn-center">
	     			<em unselectable="on"><button class="x-btn-text" type="{1}">{0}</button></em></td>
	     		<td class="x-btn-right"><i>&#160;</i></td>
	     	</tr>
	</tbody>
</table>

This enables us to use CSS nesting to define x-btn-left, x-btn-center, x-btn-right and x-btn-text with the attributes we want while preventing the normal buttons from being affected. Thus we can use both Ext’s buttons and out custom buttons at the same time. I have defined them as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.mybutton .x-btn-right {
	background: transparent url('button_right_06.png') no-repeat scroll right; 
	height: 150px;
	padding-right: 15px;
}
 
.mybutton .x-btn-left {
	background: transparent url('button_left_06.png') no-repeat scroll right; 
	height: 150px;
	padding-right: 15px;
}
 
.mybutton .x-btn-center {
	background: transparent url('button_06.png') repeat-x center; 
	height:150px;
	width:80px;
	text-align:center;
}
 
.mybutton .x-btn-text {
	line-height: 150px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:60px;
	font-weight:bold;
}

I have used custom images that make up the button’s left, center and right components. I have also changed the appearance of the text displayed on the button.

Now that we have the buttons which make up the game board, lets take a brief look at the rest of the game. An integer array holds the numbers that map to each button on the board. This array is populated randomly at start. Although the board is 2D, I decided to use a 1D array as it turned out to be slightly simpler while populating the random numbers. So arr2D[i][j] becomes arr1D[i * numcols + j] where numcols is the number of columns in each row.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
private void generateRandomNumbers()
{
	int i,j;
	int temp;
	boolean suitable;
	int total = numRows*numCols-1;
 
	for(i=0;i<=total;i++)
	{
		do
		{
			suitable = true;
			temp = (int) Math.round(Math.random() * total);
			for(j=0;j<i;j++)
			{
				if(numbers[j] == temp)
				{
					suitable = false;
					break;
				}
			}
		}while(!suitable);
 
		numbers[i] = temp;
	}
}

Once the array is ready, I set the Panel’s layout to TableLayout with 3 columns and call createGrid() to create buttons that make up the grid. Every button knows its (row,column) position and the blank square is made up of an invisible button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
private void createGrid()
{
	for(int i=0; i<numRows; ++i)
	{
		for(int j=0; j<numCols; ++j)
		{
			int index = i*numCols + j;
 
			String label = String.valueOf(numbers[i*numCols + j]);
			final Button btn = new Button(label);
			btn.setTemplate(buttonTemplate);
 
			// listener is an instance of SquareListener
			btn.addListener(listener);
 
			// every button keeps track of its row and column number
			final int finali = i, finalj=j;
			btn.addListener("render", new Function(){
				public void execute() {
					JavaScriptObjectHelper.setAttribute(btn.getJsObj(), "row", finali);
					JavaScriptObjectHelper.setAttribute(btn.getJsObj(), "col", finalj);
				}
			});
 
			// empty square = invisible button
			// maintain a class-level reference to the empty square
			if (numbers[index] == 0)
			{
				emptyButton = btn;
				btn.setVisible(false);
			}
 
			add(btn);
		}
	}
}

The button listener checks if the clicked button is adjacent to the empty square. If it is, it swaps numbers in the array and on the buttons. The invisible button is now made visible and clicked button becomes invisible. I have added a fade in and fade out effect. However, this is shaky and sometimes the button doesn’t fade in for too long. It does irritate a bit. After this, the endgame is checked i.e. if numbers in the array are in ascending order.

I have left out some code to keep the post short. You can download the complete project from Gwt-Ext.com or Rapidshare.

Note:

  1. Since our new template just has an extra CSS class, the whole template thing could be avoided by calling btn.setCls(“mybutton”). This was an after-thought when I was done playing with the template.
  2. When you change the template, keep the <button> element otherwise you will get an exception at load time
    1
    2
    3
    4
    5
    
    [ERROR] Unable to load module entry point class com.maharana.gwtextnumbermadness.client.MainModule (see associated exception for details)
    com.google.gwt.core.client.JavaScriptException: JavaScript TypeError exception: btnEl has no properties
    	at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:481)
    	at com.google.gwt.dev.shell.ModuleSpace.invokeNativeHandle(ModuleSpace.java:225)
    	...
  3. Also keep the x-btn-center CSS class name otherwise you will get an exception when the button is clicked
    1
    2
    3
    4
    5
    
    [WARN] Exception thrown into JavaScript
    com.google.gwt.core.client.JavaScriptException: JavaScript TypeError exception: this.el.child("td.x-btn-center " + this.buttonSelector) has no properties
    	at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:481)
    	at com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:270)
    	...

References:

  1. Images for new button template: http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx
  2. CSS nesting: http://webdesignfromscratch.com/css-inheritance-cascade.cfm
  3. Centering block level elements: http://dorward.me.uk/www/centre/#content

Do let me know if you have any corrections or suggestions.


May 01 2008

Gwt-Ext and Google Maps – II (handle click)

Tag: Ext,Gwt,Java,Javascript,Maps,Programming,WebAbhijeet Maharana @ 5:54 pm

Lat and Lon info being shown in a message box
This post is related to my earlier post on Gwt-Ext and Google Maps. While browsing the Gwt-Ext forum, I came across this thread with a simple-looking question from Martin: How can I get the LatLonPoint from a map when a user clicks on the map ??

I looked at the available methods to see if I could figure this out. When I realized I wasn’t getting anywhere, I tried looking at the source to figure out what was going on. I found that Mapstraction does have a facility to register callback functions for events. Below code snippets are from mapstraction.js.

1
2
3
4
5
6
7
8
9
10
11
Mapstraction.prototype.addEventListener = function(type, func) {
    var listener = new Array();
    listener.push(func);
    listener.push(type);
    this.eventListeners.push(listener);
    switch (this.api) {
    case 'openlayers':
        this.maps[this.api].events.register(type, this, func);
        break;
    }
}

When the callback functions registered for ‘click’ event are invoked, they are supplied with a LatLonPoint instance with the latitude and longitude information of the location which was clicked. See line 4 below.

1
2
3
4
5
6
7
Mapstraction.prototype.clickHandler = function(lat, lon, me) {
    for (var i = 0; i < this.eventListeners.length; i++) {
        if (this.eventListeners[i][1] == 'click') {
            this.eventListeners[i][0](new LatLonPoint(lat, lon));
        }
    }
}

However, this argument is lost because of the way Gwt-Ext API exposes this functionality: MapPanel class registers a function with no parameters. Below code snippet is from MapPanel.java. Note the native method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public void addEventListener(final String event, final Function listener) {
	if (!mapRendered) {
		addListener(MAP_RENDERED_EVENT, new Function() {
			public void execute() {
				doAddEventListener(event, listener);
			}
		});
	} else {
		doAddEventListener(event, listener);
	}
}
 
private native void doAddEventListener(String event, Function listener) /*-{
        var map = this.@com.gwtext.client.widgets.map.MapPanel::mapJS;
        map.addEventListener(event, function() {
            listener.@com.gwtext.client.core.Function::execute()();
        });
}-*/;

The solution is to override these two methods. For that we need an interface with an execute() method that can accept arguments. I added an interface ‘OneArgFunction’ that does this. We need a proper fix for this so that we can handle more arguments. For now, a one-argument method will suffice.

1
2
3
4
5
package com.maharana.gwtextmaps.client;
 
public interface OneArgFunction {
	public void execute(com.google.gwt.core.client.JavaScriptObject arg);
}

In the overridden methods below, I register a function which accepts the LatLonPoint instance as parameter and hands it over to the execute() method for further processing. Then I invoke the overridden addEventListener() to register an event handler that places a new marker and centers the map on the clicked location. GoogleMap inherits from MapPanel.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
mapPanel = new GoogleMap() {
	public void addEventListener(final String event, final OneArgFunction listener) {
		if (!this.isRendered()) {
			addListener(MAP_RENDERED_EVENT, new Function() {
				public void execute() {
					doAddEventListener(event, listener);
				}
			});
		} else {
			doAddEventListener(event, listener);
		}
	}
 
	private native void doAddEventListener(String event, OneArgFunction listener) /*-{
	      	var map = this.@com.gwtext.client.widgets.map.MapPanel::mapJS;
	      	map.addEventListener(event, function(llp) {
	            	listener.@com.maharana.gwtextmaps.client.OneArgFunction::execute(Lcom/google/gwt/core/client/JavaScriptObject;)(llp);
	      	});
	}-*/;
 
	// constructor - attach event listener
	{
		addEventListener("click", new OneArgFunction(){
			public void execute(JavaScriptObject arg) {
				LatLonPoint llp = new LatLonPoint(arg);
				mapPanel.setCenterAndZoom(llp, mapPanel.getZoom());
				mapPanel.addMarker(new Marker(llp));
				MessageBox.alert("Clicked Location", "Lat: " + llp.getLat() + "<br>Lon: " + llp.getLon());
			}
		});
	}
};

This does the trick. I am not using any Google Maps specific code here so it should work for other providers as well. Do let me know if I have missed something obvious or got something wrong.

I have modified the demo I posted in my earlier blog entry to include this. You can download it from Gwt-Ext.com or Rapidshare.


Apr 07 2008

Gwt-Ext and Google Maps

Tag: Ext,Gwt,Java,Maps,Programming,WebAbhijeet Maharana @ 9:14 pm

Dahisar on a Google Map

Sometime back, I uploaded few pics to Picasa. While creating an album, it asked for an optional “Location” information. I did provide it and when I went to view the album, it displayed the location on a map. I liked it. Few days later, Gwt-Ext 2.0.3 got released with some cool features. One of them is a map API built on top of Mapstraction. Mapstraction lets you use maps from different providers such as Yahoo, Google, Microsoft and lets you switch between them easily. I had not worked with maps before and thought this would be a good opportunity to try it. I wanted to create something like the one I had seen on Picasa.

I have written a small Gwt-Ext application which marks user supplied addresses on a Google Map. Click thumbnail above for a larger image of the output. It took quite some time to figure out how to geocode an address to obtain the latitude and longitude information. But at the end, it works! I have used Google Maps specific code. However, Gwt-Ext provides powerful abstraction, thanks to Mapstraction, and you may want to use that instead.

Code is given below with brief explanation. The entry point looks like this:

1
2
3
4
5
6
public void onModuleLoad() {
	createMapPanel();
	addMapControls();
	new Viewport(mapPanel);
	updateMap("mumbai", JavaScriptObjectHelper.createObject(), this);
}

In createMapPanel(), I create the panel which will hold the map:

1
2
3
4
5
6
7
8
private void createMapPanel()
{
	mapPanel = new GoogleMap();
	mapPanel.setTitle("Google Maps using Gwt-Ext [http://abhijeetmaharana.com]");
	mapPanel.setHeight(400);
	mapPanel.setWidth(400);
	mapPanel.addLargeControls();
}

mapPanel.addLargeControls() adds controls to the map which let you zoom, pan and select image type (map / satellite / hybrid).

Then, I add a textfield and a button in the top toolbar of the panel to accept user input:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
private void addMapControls()
{
	final MainModule thisModule = this;
 
	addressField = new TextField();
	addressField.setValue("mumbai");
	refreshMapButton = new ToolbarButton("Refresh map", new ButtonListenerAdapter() {
		public void onClick(Button button, EventObject e) {
			String address = addressField.getText();
			if (!address.trim().equals(""))
				updateMap(address, JavaScriptObjectHelper.createObject(), thisModule);
		}
	});
 
	Toolbar toolbar = new Toolbar();
	toolbar.addText("Enter an address: ");
	toolbar.addField(addressField);
	toolbar.addSpacer();
	toolbar.addButton(refreshMapButton);
 
	mapPanel.setTopToolbar(toolbar);
}

On line 11, updateMap() is called when user clicks “Refresh map” after supplying an address. This is a native method which uses has Javascript code to obtain the latitude and longitude of the provided address. If it can obtain valid results, it calls renderMap() to display the location. I had to resort to JSNI to geocode the address. There might be a cleaner way which would avoid any native code. I have posted a question in the Gwt-Ext forum. Lets see what comes up.

Below is the code for updateMap() and renderMap():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
public native void updateMap(String locationAddress, JavaScriptObject llp, MainModule thisModule) /*-{
	var geo = new $wnd.GClientGeocoder();
 
	geo.getLocations(locationAddress, 
		function(response) 		// callback method to be executed when result arrives from server
		{
			if (!response || response.Status.code != 200) 
			{
   				alert("Unable to geocode that address");
			} 
			else 
	      		{
		    		var place = response.Placemark[0];
		    		llp.lat = place.Point.coordinates[1];
		    		llp.lon = place.Point.coordinates[0];
 
		    		thisModule.@com.maharana.gwtextmaps.client.MainModule::renderMap(Lcom/google/gwt/core/client/JavaScriptObject;)(llp);
	      		}
      		}
      	);
}-*/;
 
 
public void renderMap(JavaScriptObject jsObj)
{
	double lat = Double.parseDouble(JavaScriptObjectHelper.getAttribute(jsObj, "lat"));
	double lon = Double.parseDouble(JavaScriptObjectHelper.getAttribute(jsObj, "lon"));
 
	LatLonPoint latLonPoint = new LatLonPoint(lat, lon);
	mapPanel.setCenterAndZoom(latLonPoint, 12);
	mapPanel.addMarker(new Marker(latLonPoint));
}

You will need to include code below in the host HTML file to use GClientGeocoder and other Google Maps / Mapstraction related Javascript objects:

<script type="text/javascript" src="js/map/mapstraction.js"></script>
 
<!-- Replace **PLACEHOLDER** in this line with your API key -->
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=**PLACEHOLDER**"></script>

You can obtain a Google Maps API key from http://code.google.com/apis/maps/signup.html.
Do let me know what you think. Specially about geocoding addresses without making a JSNI call.

Download Eclipse project from Gwt-Ext.com or Rapidshare.

UPDATE (8 Apr):
Sanjiv has clarified in the forum that geocoding support is not available yet. So we will have to stick with JSNI code for the time being. Also, since the url in host mode is localhost:8888, you can use this key for Google Maps:

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAARrCK38aboqQKDotehUjrPhTb-vLQlFZmc2N8bgWI8YDPp5FEVBQ-MFjXfKfAvdbsbp3pa0q7fQNDDA">
</script>

Apr 02 2008

Gwt-Ext solutions by forum community

Tag: Ext,Gwt,Java,Links,Programming,WebAbhijeet Maharana @ 11:45 pm

The Gwt-Ext forum is very active and I try to participate when I can. In the process, I have bookmarked a few threads with solutions that I could use later. I am posting some of them below so that more people can stumble upon them. Within brackets is the forum id of the community member who suggested the solution.

  1. Expand / collapse a panel on button click in another panel (daverh and sjivan)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    panelB.setCollapsible(true);
    ...
    panelA.getSaveButton().addListener(new ButtonListenerAdapter(){
                public void onClick(Button button, EventObject e) {   
                   panelB.setCollapsed(false);
                   panelA.setTitle("Saved");
                   panelB.doLayout();
                   panelA.doLayout();
                }
    });
  2. Attach a clicklistener to a panel (me)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    panel.addListener(new ContainerListenerAdapter(){
       public void onRender(Component component) {
          panel.getEl().addListener("click", new EventCallback(){
             public void execute(EventObject e) {
                MessageBox.alert("Panel clicked");
             }   
          });
       }
    });
  3. Force a combo box to always go back to the server for the list items (sjivan)

    1
    2
    3
    4
    5
    
    cb.addListener(new ComboBoxListenerAdapter() {
        public void onExpand(ComboBox comboBox) {
            store.reload();
        }
    });
  4. BorderLayout throws an exception when nothing is added to its center region (sjivan)

    When using BorderLayout, you *must* have a Panel assigned to the CENTER region.

  5. Update a text field’s contents (e.g. force all lowercase) when user leaves text field (takeustoyourleader)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
    final TextField lcaseTextField = new TextField();
    lcaseTextField.addListener(new TextFieldListenerAdapter(){
    	public void onBlur(Field field) {
    		updateValue();
    	}
     
    	public void onSpecialKey(Field field, EventObject e){
    		updateValue();
    	}
     
    	private void updateValue(){
    		lcaseTextField.setRawValue(lcaseTextField.getValueAsString().toLowerCase());
    	}
    });

    The “onBlur” catches the user leaving the field by clicking off, the onSpecialKey catches them leaving by enter or tab or anything like that.

  6. Wait for an IFrame to load and then execute some code (grabka)

    1
    2
    3
    4
    5
    
    EventManager.addListener(frame.getElement(), "load", new EventCallback() {
                public void execute(EventObject e) {
                   /* do some stuff */
                }
             }, new ListenerConfig());

I may post some more links as and when I bookmark them.


Next Page »