Status Popup for GWT (Google Web Toolkit)

For my English Book price comparison site CheapRiver.com I wanted to use similar status popup panels as Google is using for it’s web applications. For example the small yellowish block which says “Loading…” in the middle at the top of your browser window when you use gmail.

The GWT widget PopupPanel can be used for this. Hence I made my own StatusPopupPanel class which inherits from PopupPanel. I thought I just put a cell of a table in there with the background color I want and center it at the top of the page.

Not being an expert in CSS the difficulty I had is getting it positioned at the top of the page in the middle.
I asked how to do this on the GWT mailing list, but did not get the answer I was looking for. Hence I asked a colleague at work how to do it (Thanks Roy) and he came up with the solution for the CSS. The trick is that you have to put the table in a <div> container of which you set the width to 100%. So now CheapRiver has nice status popups. I only use them for errors so I hope you never see them. Here’s a screen shot. (Click to enlarge)

Screenshot

And here is the code
StatusPopupPanel.java

import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.PopupPanel;

public class StatusPopupPanel extends PopupPanel {
 private Grid grid = new Grid(1, 1);
 public StatusPopupPanel() {
 super(false);
 grid.getRowFormatter().setStyleName(0, "statusPopupPanelText");
 grid.setStyleName("statusPopupPanel");
 setWidget(grid);
 setStyleName("statusPopupPanelContainer");
 }

 public void setText(String str) {
 grid.setText(0, 0, str);
 }
}

The CSS for StatusPopupPanel.java

.statusPopupPanelContainer {
 position: fixed !important;
 top: 0px;
 width: 100%;
}

.statusPopupPanel {
 background-color: #ff3535;
 margin: 0 auto;
 padding: 0 5px;
 -moz-border-radius-bottomleft: 5px;
 -webkit-border-bottom-left-radius: 5px;
 -moz-border-radius-bottomright: 5px;
 -webkit-border-bottom-right-radius: 5px;
}

.statusPopupPanelText {
 font-weight: bold;
 font-color: #333;
}