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

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)

Every web designer knows that making a web page come out just right in every browser can cause quite a headache, especially when combining elements like W3C standards and IE6. It’s hard to have a working copy of all the different browsers and all the different versions to test. Browsershots.org to the rescue!

Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

Works great and they have 15 different browsers running on Linux, Mac OS, Windows and FreeBSD.

My blog came out perfectly on most browsers and platforms, even exotic ones like Kazehakase. Luckily for me, Microsoft was there to save the day, or else I wouldn’t have had any pictures to show.

Update : Anoter website, IE NetRenderer, allows you to get instant screenshots of your site using different version of IE.