Applying a background image to a GWT Decorator panel

Question

Here is my View which is built using a DecoratorPanel. How can I modify this to have a background image displayed? I see a lot of examples with applying CSS styling but my CSS knowledge is limited so if this is the way to go then would anyone have a worked example of how a CSS style is created and applied.

Here is my code public class EditContactView extends Composite implements EditContactPresenter.Display { private final TextBox firstName; private final TextBox lastName; private final FlexTable detailsTable;

      public EditContactView() {
        DecoratorPanel contentDetailsDecorator = new DecoratorPanel();
        contentDetailsDecorator.setWidth("18em");
        initWidget(contentDetailsDecorator);

        VerticalPanel contentDetailsPanel = new VerticalPanel();
        contentDetailsPanel.setWidth("100%");

        detailsTable = new FlexTable();
        detailsTable.setCellSpacing(0);
        detailsTable.setWidth("100%");         
        firstName = new TextBox();
        lastName = new TextBox();
        initDetailsTable();
        contentDetailsPanel.add(detailsTable);

        HorizontalPanel menuPanel = new HorizontalPanel();
        contentDetailsPanel.add(menuPanel);
        contentDetailsDecorator.add(contentDetailsPanel);
      }

      private void initDetailsTable() {
        detailsTable.setWidget(0, 0, new Label("Firstname"));
        detailsTable.setWidget(0, 1, firstName);
        detailsTable.setWidget(1, 0, new Label("Lastname"));
        detailsTable.setWidget(1, 1, lastName);
        firstName.setFocus(true);
      }

      public HasValue<String> getFirstName() {
        return firstName;
      }

      public HasValue<String> getLastName() {
        return lastName;
      }

      public Widget asWidget() {
        return this;
      }

    }

appbootup appbootup · Accepted Answer · 2013-01-17T16:03:46

About setting style name - you just invoke setStyleName ("myDecoratedPanelStyle") on any widget you wish to - Example and check how gwt adds style gwt-TextBox in standard.css

In your .css file add .myDecoratedPanelStyle

myDecoratedPanelStyle 
{
   background-image:url('path/paper.gif');
   background-color:#cccccc;
}

Also reference - https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCss

Applying a background image to a GWT Decorator panel

1 Answers