Group items tagged

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.

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}

Summary:  Google Web Toolkit (GWT) lets you use the Java™ language to implement rich client user interfaces that run in a browser. In this two-part article, David Geary brings you up to speed on the latest version of GWT and shows you how to implement a desktop-like Web application.