Simple mgwt search form, demonstration flexbox model layout.

SearchBoxWithButton.java

/**
 * <p>
 * SearchBoxWithButton.java ©2013 isp-insoft GmbH
 * </p>
 * <p>
 * Created by Oliver Krylow, 08:24:16
 * </p>
 */

import com.google.gwt.dom.client.Style.BorderStyle;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.ui.Composite;
import com.googlecode.mgwt.ui.client.MGWTStyle;
import com.googlecode.mgwt.ui.client.widget.Button;
import com.googlecode.mgwt.ui.client.widget.LayoutPanel;
import com.googlecode.mgwt.ui.client.widget.MSearchBox;

/**
 * @author Oliver Krylow
 */
public class SearchBoxWithButton extends Composite
{
  /**
   * Constructs a simple search form.
   */
  public SearchBoxWithButton()
  {
    final LayoutPanel container = new LayoutPanel();
    final MSearchBox searchBox = new MSearchBox();
    final Button button = new Button( "Search!" );
    searchBox.setPlaceHolder( "your query here" );
    // sets box-flex to 1
    searchBox.addStyleName( MGWTStyle.getTheme().getMGWTClientBundle().getLayoutCss().fillPanelExpandChild() );
    // adjust the default button margin to align with the default search box margin
    button.getElement().getStyle().setMargin( 0, Unit.PX );
    // as an added bonus, one could adjust the button style a little to visually merge it with the search box
    //button.getElement().getStyle().setBorderStyle( BorderStyle.NONE );
    //button.getElement().getStyle().setProperty( "WebkitBorderRadius", "0" );
    // TODO(okr): Refactor each call to getStyle() to an external CssResource
    container.setHorizontal( true );
    container.add( searchBox );
    container.add( button );
    initWidget( container );
  }
}