Thursday, January 21, 2010

How to create a label with an image background in GWT

In order to create a label with an image background, you will need to use an AbsolutePanel with an image background defined in CSS and add a Label to it. The reason behind using an AbsolutePanel is because this type of panel allows for positioning all children absolutely, allowing them to overlap. Keep in mind however that you will have to resize the panel to allow room for all its children because it will NOT resize automatically.

Here is a sample implementation of how this worked for me:

Java code in Samle.java:

AbsolutePanel absolutePanel = new AbsolutePanel();
absolutePanel.setStyleName("my_css_def");

Label myLabel = new Label("Hello world!");

absolutePanel.add(myLabel);

mainContainer.add(absolutePanel);

CSS definition in Sample.css file: 

.my_css_def {
background-imageurl("../images/myPath/bg_image.png"); !important;
height: 73px;
width: 108px;
}