Multiple Projects and GWT

When work­ing on sev­eral large scale projects (in Eclipse), it’s con­ve­nient and of course more effi­cient to share and reuse code via com­mon libraries. While those are in an early stage they need to be changed a lot and there­fore it’s handy to link projects in instead of cre­at­ing new jars each time the library has been updated.
Unfor­tu­nately, this stan­dard approach for Java devel­op­ment in Eclipse does not work that straight for­ward as with plain old Java projects, it requires three steps in total:

1. Link the library project to all rel­e­vant projects (“Project Pref­er­ences” -> “Java Build Path” -> “Projects” -> “Add…”)
2. Then, add the client-side code of the library (by adding it as a mod­ule.) There­fore, edit the gwt.xml of your appli­ca­tion and add for exam­ple <inherits name="net.svenbuschbeck.gwt.lib.SuperLib "/> where Super­Lib is the file name of the gwt.xml file in you library project and before that is the pack­age it lies in.
3. Add the code to the project by link­ing a source folder. Unfor­tu­nately, this is required if you do not want to write an Ant script to com­pile your appli­ca­tion. (If you pre­fer Ant check this out) I don’t like the idea of using such a script because if you for­get to run it each time you make changes, you will end up in confusion—let’s go for the con­ve­nient, auto­matic way then.
   1. Add a folder to your appli­ca­tion project; open the “advanced” sec­tion in the folder cre­ation dia­log, select “Link to alter­nate loca­tion” and pick the source folder (usu­ally “src”) of your library project. (Hint: if you work within a team using a ver­sion­ing sys­tem, you can cre­ate a vari­able for that folder and use this instead. This way, each of your col­leagues can put the library project in a dif­fer­ent folder and accom­mo­date for that by adjust­ing the vari­able )
   2. Right click the folder, “Build Path” -> “Use as Source Folder”. Done.

Sur­pris­ingly, the GWT plu­gin for Eclipse does not honor the project link­ing, thus all the ref­er­ences need to be made explicit or you will end up with lots of the fol­low­ing: ClassNotFoundException.

“An invalid or illegal string was specified” Exception in GWT

While work­ing with can­vas (draw­ing stuff on it) in GWT, sud­denly and in a seem­ingly unpre­dictable man­ner I got fol­low­ing error mes­sage now and then from within the GWT frame­work code:

com.google.gwt.core.client.JavaScriptException: (NS_ERROR_DOM_SYNTAX_ERR): An invalid or illegal string was specified;

Again, GWT tricked me into think­ing I am writ­ing Java code and made me for­get about that it is going to be com­piled into Javascript. And because of the lat­ter, a divi­sion by zero does not throw an Devi­sion­ByZe­roEx­cep­tion, no, it returns NaN even for native data types (there is no dif­fer­en­ti­a­tion between dou­ble and Dou­ble in Javascript — there is only the object-version of dou­ble, which can be of value Double.NaN).

But also GWT was not pre­pared to han­dle Double.NaN. When call­ing canvas.getContext().drawImage(image,x,y) and one of x and y or both were Double.NaN I got the error mes­sage shown above. If you got the same… you know what to do now: check all devi­sions in your code for poten­tial devi­sions by zero!!

Sorting Lists in GWT

Quick one:
Lists.sort(list, comparator) is not imple­mented in the GAE JVM.
But, as a replacement/alternative, Collections.sort(list, comparator) is.

Disable an Anchor in GWT

Unex­pect­edly, call­ing setEnabled(false) does not pre­vent a link/anchor from being clicked. That means, the click events still get trig­gered.
The rea­son is more or less a bug in GWT as it updates the list of events that are going to be trig­gered only at the moment when it gets attached to the DOM (Btw, in GWT, this process is called to sink and to unsink events, where the for­mer enables a spe­cific event to be trig­gered and the lat­ter dis­ables it).
I found a workaround by cre­at­ing my own Anchor class and forc­ing the under­ly­ing GWT Anchor to update the list of events to be sunk.

...
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Event;

public class Anchor extends com.google.gwt.user.client.ui.Anchor {

	@Override public void setEnabled(boolean enabled) {
		super.setEnabled(enabled);
		if (isAttached()) {
			onDetach();
			if (enabled) {
				sinkEvents(Event.ONCLICK);
			} else {
				unsinkEvents(Event.ONCLICK);
			}
			onAttach();
		}
	}

	@Override protected void onLoad() {
		super.onLoad();
		if (isEnabled()) {
			sinkEvents(Event.ONCLICK);
		} else {
			unsinkEvents(Event.ONCLICK);
		}
	}
}

Note the onLoad method, it sets up the state when the wid­get gets attached to the DOM the first time. It is required because setEnabled() could have been called before the anchor got attached.

If you encoun­tered the same issue, please vote for this bug report.

Java Cookies from the Future Past

While work­ing with cook­ies in Java/GWT and thus—to set the expire date—with Date, I found a doubt­ful Java behavior.

My goal was to set a cookie to expire in about one month from today like this:

Date expires = new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 30);
Cookies.setCookie("myCookie", "myData", expires);

And kept won­der­ing why the cookie never got stored.

And finally cre­ated a sim­ple test case like this:

Date today = new Date();
Date tomorrow = new Date(today.getTime() + 1000 * 60 * 60 * 24);
Date nextMonth = new Date(today.getTime() + 1000 * 60 * 60 * 24 * 30);

And got fol­low­ing dates:

today=Mon Feb 07 14:27:50 CET 2011
tomorrow=Tue Feb 08 14:27:50 CET 2011
nextMonth=Tue Jan 18 21:25:02 CET 2011

Accord­ing to Java’s cal­cu­la­tion, the cookie was expired already before even being set.

Took me a bit to under­stand why:
1000 * 60 * 60 * 24 * 30 = 2,592,000,000 = 0x9A7EC800
Thus, the first bit got set to one… a clas­si­cal over­flow caus­ing the inte­ger value to become neg­a­tive — just try:

System.out.println(1000 * 60 * 60 * 24 * 30);

It will print out -1702967296.

Fix: Add a lit­tle L will solve the issue by forc­ing the com­piler to cal­cu­late using the scope of long:

Date nextMonthLong = new Date(today.getTime() + 1000L * 60 * 60 * 24 * 30);

I guess I will fall for that one again some­time as the error is not obvi­ous in my opin­ion — espe­cially because getTime() returns a long and still, the com­piler sticks with an int for the mul­ti­pli­ca­tion part.

Disable Context Menu in GWT

To make use of the right mouse but­ton, it is nec­es­sary to dis­able the native browser con­text menu (the popup menu appear­ing on right click). This can be achieved like this:

RootLayoutPanel.get().addDomHandler(new ContextMenuHandler() {

	@Override public void onContextMenu(ContextMenuEvent event) {
		event.preventDefault();
		event.stopPropagation();
	}
}, ContextMenuEvent.getType());

Same should work for RootPanel.

After that, it is pos­si­ble to make use of the right mouse but­ton for exam­ple like this:

someWidget.addDomHandler(new MouseMoveHandler() {

	@Override public void onMouseMove(MouseMoveEvent event) {
		if (event.getNativeButton() == NativeEvent.BUTTON_RIGHT) {
		...

GWT Error Message “Asked for attribute parser of no type”

Exam­ple:

public boolean isCollapsed() {
	return panel.isVisible();
}

public void setCollapsed() {
	panel.setVisible(false);
}

Seen it? Despite the com­pli­cated and cryp­tic error mes­sage, the mis­take is rather sim­ple: the set­ter method is miss­ing a para­me­ter, i.e. “pub­lic void setCollapsed(boolean collapsed) {“.

Authentication with FlickrJ

When you know about user­name and pass­word logins, the whole Flickr authen­ti­ca­tion process for web appli­ca­tions seems a lit­tle weird on first sight, nev­er­the­less it is log­i­cal and nec­es­sary after you have done some read­ing (for exam­ple the offi­cial Flickr WebApp Auth HowTo).
To get started and into cod­ing quickly (using FlickrJ and Java) I rec­om­mend this page. Espe­cially the code exam­ple is excel­lent in my opin­ion! Thanks Andy Sacher!

Adding a New Service (GWT)

Adding a new servlet/service to you GWT appli­ca­tion is quite straight for­ward, e.g. by copy­ing the exam­ple “greet­ingSer­vice” or cre­at­ing a new servlet. But it’s easy to over­look a required change/adjustment of your project’s con­fig­u­ra­tion and you might end up with an error mes­sage like “Blocked attempt to access inter­face ‘some.package.SomeService’, which is not imple­mented by ‘some.other.package.SomeOtherServiceImpl’; this is either mis­con­fig­u­ra­tion or a hack attempt”.

Check list (some should be replaced with what­ever you want to call your new service):

• Copy or cre­ate files:
  SomeService.java and SomeServiceAsync.java in client pack­age
  SomeServiceImpl.java in server pack­age + change imple­men­ta­tion state­ment to SomeSer­vice
• Adjust web.xml:

  <servlet>
  	<servlet-name>someServlet</servlet-name>
  	<servlet-class>some.package.SomeServiceImpl</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>someServlet</servlet-name>
  	<url-pattern>/[copy base directory name from other service declaration]/some</url-pattern>
  </servlet-mapping>

• Anno­tate inter­face SomeService.java:

  @RemoteServiceRelativePath("some")

• Con­nect to your new ser­vice in the client:

  private final SomeServiceAsync someService = GWT.create(SomeService.class);

Def­i­nitely some pos­si­bil­i­ties to make a mis­takes or miss some­thing here.

GWT FileUpload: Adding Widgets to a FormPanel

If you build your first GWT form, for exam­ple some­thing like that:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
<g:FormPanel ui:field="form"> 
<g:FileUpload ui:field="uploadField" name="file"/>
<g:SubmitButton ui:field="submitButton">Upload</g:SubmitButton>
</g:FormPanel>
</g:HTMLPanel>
</ui:UiBinder>

And your con­sole keeps telling you dur­ing run­time some­thing like this: “java.lang.IllegalStateException: Sim­plePanel can only con­tain one child wid­get”. Instead of writ­ing a long page of expla­na­tions and com­plaints like I did before, it’s sim­ply like that:

“Just put all your wid­gets in a panel (like Hor­i­zon­tal­Panel) and add that panel to the Form­Panel.” (Jake − cf. com­ment below)

Thanks Jake!

First GWT Steps

Just started to work with GWT – a pretty inter­est­ing approach for web devel­op­ment com­pared to PHP or JSF. The whole Appli­ca­tion engine is quite impres­sive espe­cially allow­ing you to quickly test your appli­ca­tions locally by sup­port­ing auto­matic hot deploy­ment after each code update.
One thing that took me a while was one of that “[ERROR] Unable to find ‘[some-file].xml’ on your class­path; could be a typo, or maybe you for­got to include a class­path entry for source?” errors. If you are sure the file is in place, I real­ized restart­ing the App Engine or Eclipse mostly solves that problem.

How to Make Jquerymenu for Drupal Keep its State on Page Reload

While set­ting up the web­site for my new project “Glo­cal” www.glocal-project.eu), I came across the prob­lem of find­ing a proper menu mod­ule. Some­thing easy to use, sta­ble and effi­cient in the same time for the com­plex intranet struc­ture (there­fore, sorry, but you will not be able to see my solu­tion there unless you are a project mem­ber). Some­thing with a high usabil­ity in the end. Active­menu is still quite buggy and DHTML Menue requires a dou­ble click to actu­ally open a page — unbear­able in a non-doulbe-click envi­ron­ment like the Inter­net — who is sup­posed to guess, that this menu requires a dou­ble click?? Leav­ing me with JQuery­menu.

First impres­sion: per­fect! Open and close branches by click­ing (+) or (-) — view page by click­ing menu item label. Even the few styling issues could be fixed eas­ily by using CSS. But as soon, as some­one clicks a label, the menu col­lapses to its default sta­tus. It does not remem­ber its last sta­tus after load­ing a dif­fer­ent page with the same menu.

Is this it? All mod­ule have crit­i­cal down­sides like this? I was quite dis­ap­pointed!

But I taught JQuery­menu to remember!

As it is quite some code, I will not post it here directly, but added it to the tracker page for this “fea­ture request” or you can down­load the two updated files (jquerymenu.js and jquerymenu.module) here and replace the once in your /sites/all/modules/jquerymenu folder.

But please be care­ful, it should be con­sid­ered an alpha ver­sion, there are quite some weak­nesses (see tracker page). Any feed­back or sug­ges­tions are very wel­come!

Simple redirection using PHP and HTML meta tag

Some­thing every­one needs once in a while… maybe you moved a file on your server or you did not install word­press in the root folder of your web­server — like I did nei­ther — a redi­rec­tion or for­ward­ing can be an easy answer.

The script is rather sim­ple — it redi­rects in three ways to pro­vide a rea­son­able fall back if any of the auto­matic redi­rect­ing fails. To use it on your server, just enter the URL/address/file name/folder you would like the user to be redi­rected to in the sec­ond line of the page/script.

In my case, every user end­ing up at “www.svenbuschbeck.net” should to be for­warded to “www.svenbuschbeck.net/wordpress/home”. So I adjusted the script below like “$url = ‘wordpress/home’”, named the file “index.php” and put it in the root folder. Done .

<?php
$url = 'put your URL between the parenthesis';
header("Location: $url");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta http-equiv="refresh" content="0;url=<?php echo $url; ?>"/>
<title>You will be redirected... </title>
</head>
<body>
If you are not redirected automatically, please click <a href="<?php echo $url; ?>">here</a>.
</body>
</html>

fixing flex VideoDisplay CuePointManager

I was cre­at­ing a Flex appli­ca­tion to show slides and a pre­sen­ta­tion video of pre­vi­ously recorded pre­sen­ta­tions. Accord­ingly, each slide should appear at a cer­tain point of time in the video — calls for cue points!

As all slides and there appear­ance are stored in a text file in my case, I started adding cue points with Action­Script. But as soon as the video can be con­trolled with a slider, allow­ing to shift for– and back­wards, the event han­dler “cue­Point” was not trig­gered any more. Thus, the slides where not changed cor­rectly as the user jumps ahead, as the cue points between the pre­vi­ous and the new posi­tion did not cause and cue point event.

Finally I wrote AdvCue­Point­Man­ager, inher­it­ing from Cue­Point­Man­ager, but which can deal with jump­ing back– and forward.

Copy it to “<your source folder>/net/svenbuschbeck/flex/video” and use it as follows:

<mx:VideoDisplay cuePointManagerClass="net.svenbuschbeck.flex.video.AdvCuePointManager" />

how to install memchached 1.2.2 from source

I have installed an instance of mem­chached ver­sion 1.2.2 on one of our servers (Debian etch) today and to keep you from spend­ing a whole after­noon, see my everything-step-by-step instruc­tion below.

Mem­chached is a dis­trib­uted hash map, which can be used for exam­ple to speed up any kind of web appli­ca­tion, see web­site for details. In our case, we want to use it as tem­po­rary data store. I will report about the expe­ri­ences in a lat­ter post.

intro­duc­tion

Always refer to this page for details, but I cre­ated a ver­sion with less text but includ­ing steps to really start from scratch.

All lines start­ing with # are com­mand lines, i.e. you need to type into a linux shell.
Out­put of any kind is always sur­rounded by ” even if it is mul­ti­line output.

con­tent

a. get libevent (needed to install mem­cached)
b. get mem­cached and ver­ify instal­la­tion
c. use and test mem­cached within Java with junit/ant

a. installing libevent 1.3

a.1. check for cur­rent ver­sion of libevent

a.1a.

Log in as root or get super user rights by call­ing su

# updat­edb
# locate libevent

If there is out­put includ­ing “libevent1” and/or “libevent-1″ (ignore pack­age files like *.deb) -> a.1b, oth­er­wise a.2

a.1b. remov­ing old libevent version

# apt-get remove –purge libevent1
# Y

# updat­edb
# locate libevent
Should now return noth­ing or pack­age files only, i.e. you are ready for installation

a.2. installing libevent 1.3

a.2a down­load­ing and unpacking

# cd /usr/local/src
# wget http://monkey.org/~provos/libevent-1.3b.tar.gz
# tar zxvf libevent-1.3b.tar.gz
# cd libevent-1.3b

a.2b. con­fig­ur­ing

# ./configure
check the out­put, if it con­tains some­thing like “con­fig­ure: error: no accept­able C com­piler found in $PATH” -> a.2c. oth­er­wise a.2d.

a.2c. com­pil­ing

# apt-get install gcc

Redo a.2b.
I got out­put like “C com­piler can­not cre­ate exe­cuta­bles”, read­ing file ‘config.log’ did not help me at all. Googling finally did, as I found a forum entry, point­ing out a miss­ing lib.
So try this:

# apt-get install libc-dev

Redo a.2b.
If that did  not solve it… sorry … google on, there is no sense in going on with­out solv­ing this issue. :-/

a.2d. make it!

# make && make install

If you get some­thing like “-bash: make: com­mand not found” -> A.2e, oth­er­wise A.3.

a.2e.

# apt-get install make

Redo a.2d.

a.3. con­fig­u­ra­tion

Press the Esc key as you read [esc] in the com­mands below.

# vim /etc/ld.so.conf.d/libevent-i386.conf
# i/usr/local/lib/[esc]:wq
# ldconfig

b. install mem­chached and ver­ify installation

b.1. down­load, unpack and install memchached

# cd /usr/local/src
# wget http://danga.com/memcached/dist/memcached-1.2.2.tar.gz
# tar zxvf memcached-1.2.2.tar.gz
# cd memcached-1.2.2
# ./configure
# make && make install

After installing gcc and libc-dev in sec­tion a, this one went eas­ily for me — if you skipped sec­tion a and run in prob­lems here, please install gcc and libc-dev (see a.2c).

b.2. ver­ify instal­la­tion of memchached

b.2a. start mem­chached server

# mem­cached –u www-data –vv

Out­put should end with line “<3 server lis­ten­ing”. Per­fect!

b.2b test server

I will refer to this shell in front of you as server shell below. Now, open another shell on the same machine, I will refer to it a client shell.

# tel­net local­host 11211

You should see some­thing like “<7 new client con­nec­tion” on the server shell, switch back to client shell.

# set test1 1 10000 1
# a

You should see “STORED” on client shell and the two fol­low­ing lines on server shell
”<7 set test1 1 10000 1
>7 STORED”

Per­fect!
You did it, your mem­cached is up and run­ning

c. mem­cached and Java

I wrote a lit­tle test pack­age using a Java client library for mem­cached from here, together with junit and ant. You can down­load it to have a look how sim­ple using mem­cache is and to ver­ify your instal­la­tion with an included  junit test, auto­mated with an ant build file.