I spent all day adding a single button. I wanted an icon and text in the button. The standard GWT buttons let you do text or image, but not both. I didn’t want to bring in a 3rd party library like ext-gwt just for that. So I messed with FlexTables and FlowPanels and CSS all day. Along the way, I learned to prefer FlexTables over HorizontalPanels and VerticalPanels because with a FlexTable you can easily set the style for a given cell like this:
bodyPanel.getCellFormatter().addStyleName(0,1,"myStyleName");
With the other types of panels, you can set a style for the whole panel or a nested widget; however, things like float and width don’t seem to get picked up as well as they do using the FlexTable method.
On a related note, I had issues with text bleeding outside my PushButton when I wrapped it with a HorizontalPanel. But when I wrapped it with a FlowPanel, it worked fine. So I’ll try to use Flex and Flow panels primarily from now on.
I did find a way to create a PushButton containing an image and a label. Here’s the basic idea:
import com.google.gwt.user.client.ui.Composite; import com.google.gwt.user.client.ui.FlowPanel; import com.google.gwt.user.client.ui.Image; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.PushButton; public class PrettyButton extends Composite { public PrettyButton(Image image, String buttonText) { FlowPanel fPanel = new FlowPanel(); fPanel.add(image); fPanel.add(new Label(buttonText)); PushButton button = new PushButton(); button.setHTML(fPanel.getElement().getInnerHTML()); this.initWidget(button); } }
I’m learning to call addStyleName() on every widget I create. Been a while since I’ve been heavy into CSS, but I feel a refresher coming on…