Group items tagged

11public class MyHTMLBinder extends UIObject {12 13    interface MyHTMLBinderUiBinder extends UiBinder<Element, MyHTMLBinder> {}14    private static MyHTMLBinderUiBinder uiBinder = GWT.create(MyHTMLBinderUiBinder.class);15 16    @UiField SpanElement nameSpan;17    @UiField SpanElement greetingSpan;18    @UiField DivElement divElement;19 20    public MyHTMLBinder(String firstName) {21        setElement(uiBinder.createAndBindUi(this));22 23        greetingSpan.setInnerText("Hello there ");24        nameSpan.setInnerText(firstName);25        divElement.setInnerHTML("<p> Hope you had a good time </p>");26 27    }28 29}

Mixing HTML and Widgets So how can we mix widgets and html properly? Before GWT version 2.0, the most common way was to use “RootPanel.get(’someId’)” to access an HTML element in the application host page, and then create an object there to attach the widgets to (ie. a “RootPanel”). If we need to embed only a few widgets in the host page, this technique suffices. But doing this in a real application with a large number of widgets becomes complex and slow. UiBinder scales better because it does not inject widgets into the HTML of the host page. Instead, you declare your layout in a stand-alone HTML file that can be composed with other components as many times as necessary to build more complex interfaces. Composition entails componentization, allowing the developer to create subparts of the user interface (UI components) that can be packaged, re-used and tested in isolation.

Let's give it a try and build an browser-only app that sends a user query to Google base and displays the results in our application.