TurboManage

David Chandler's Journal of Java Web and Mobile Development

  • David M. Chandler


    Web app developer since 1994 and former Developer Advocate with Google now residing in Colorado. Besides tech, I enjoy landscape photography and share my work at ColoradoPhoto.gallery.

  • Subscribe

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 241 other followers

  • Sleepless Nights…

    September 2009
    S M T W T F S
    « Mar   Oct »
     12345
    6789101112
    13141516171819
    20212223242526
    27282930  
  • Blog Stats

    • 857,971 hits

OK, what I don’t like about GWT

Posted by David Chandler on September 28, 2009

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…

Advertisements

2 Responses to “OK, what I don’t like about GWT”

  1. Very good!

    I had to make some adjustments in order to get the text inline with the image:

    public class PrettyButton extends Composite
    {
    public PrettyButton(Image image, String buttonText)
    {
    Label text=new Label(buttonText);
    FlowPanel fPanel = new FlowPanel();

    text.setStyleName(“button_with_image”);
    image.setStyleName(“button_with_image_image”);

    fPanel.add(image);

    fPanel.add(new InlineLabel(” “));
    fPanel.add(text);
    PushButton button = new PushButton();
    button.setHTML(fPanel.getElement().getInnerHTML());
    this.initWidget(button);
    }
    }

    .button_with_image
    {
    display:inline;
    }

    .button_with_image_image
    {
    vertical-align: middle;
    }

    It may not be the best code ever but it works for now 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: