Category Archives: Web design

Ways of setting a CSS property to an element in GWT [UPDATED]

When I needed to add or modify a CSS property of an element in Google Web Toolkit (GWT), I’d always do it like this :

widget.getElement().setAttribute("style", "align:right;");

However, if there was already any style information for defined for that element, it would be overwritten. You could get the current attributes first and then readd them along with your new info but there is a much cleaner way :

widget.getElement().getStyle().setProperty("align", "right");

Important! Note that when setting a style property, your need to use camel case for the property name.

//WRONG!
myWidget.getElement().getStyle().setProperty("background-color", "red");
// RIGHT
myWidget.getElement().getStyle().setProperty("backgroundColor", "red");

GWT, state and external application-handled links

Leave a reply

I came across the problem of having to open an external link (handled by a specific application, in this case Spotify) from a GWT application. The link does not load an actual page in the browser but only triggers Spotify to play songs from the artist specified in the link. For example, for artist Howie Day, this was already implemented in my application simply as :

new HTML('<a href="spotify:track:6g4tI7dBW9Kz4RxRjO2EC9">
<img src="play.jpg" /></a>');

This worked fine until I had to add a ClickListener to the HTML object that did a remote procedure call. When I would click on the link, the RPC would be made but before the answer came back from the server, the href event would be fired in the client, making GWT lose its state and causing a Status Code Exception in the browser.

An easy way to fix this would have been to open the spotify link in a new window but that wasn’t the cleanest thing to do as it would open a blank window in the user’s browser each time he would click on one of those links.

The solution I came up with was to create an invisible IFrame on my page and make the link target the IFrame, leaving my main window’s location unchanged and thus preserving GWT’s state :

new HTML('<a href="spotify:artistId" target="iframeName">
<img src="play.jpg" /></a>');

How does your web page look in every browser? (Updated)