UiBinder wzyang@asia.edu.tw UiBinder Java GWT UiBinder XML UI i18n (widget) 1 2 UiBinder HelloWidget.ui.xml: UI HelloWidgetBinder HelloWidget.java XML UI Owner class ( Composite ) UI XML UiBinder: Owner class ( ) Owner class XML UiBinder Example New a project 3 4
Example Example 5 7 Example Example 6 The XML template and the Java Class need to share the same name!!! And in the same package!!! 8
HelloWidget.xml 9 HelloWidget.xml <ui:style>: CSS.important: HTML.important button ui.xml widget XML namespace prefix widget package. xmlns:g='urn:import:com.google.gwt.user.client.ui.. <g:htmlpanel> <g:button> <g:listbox> <g:label>. 10 HelloWidget.xml Ui.java 11 12
Ui.java Ui.java 13 15 Ui.java Ui.java 14 16
HelloWidget.java HelloWidget.java HelloWidget.ui.xml owner class XML Composite (UIObject ) interface implement HelloWidget.java 17 18 Bind java class to XML template Step 1: Declare an interface (HelloWidgetUiBinder) that extends the UiBinder interface The first type parameter is the root type that we used in the XML template. As you might recall, we used HTMLPanel to wrap all of the HTML code in the template. We could use HTMLPanel as our first type parameter, but because HTMLPanel is a subclass of Widget, we can use that as well. The second type parameter is the class that we want to bind the XML template to. Step 2: create an instance of that interface (HelloWidgetBinder) using GWT.create(). The object returned from GWT.create() is a Java class that s generated by the GWT compiler at compile time. In this case the GWT compiler will generate a class based on the contents of our XML template and the class to which we want to bind it. 19 Bind java class to XML template Step 3: We use the binder object created by GWT.create() to get hold of the root widget that we defined in the XML file so that we can initialize our class. We do this by calling uibinder.createandbindui(this). 20
HelloWidget.java Composite : A type of widget that can wrap another widget, hiding the wrapped widget s methods. When added to a panel, a composite behaves exactly as if the widget it wraps had been added. The composite is useful for creating a single widget out of an aggregate of multiple other widgets contained in a single panel. Composite class inherits from Widget class, which inherits from UIObject class. UIObject class is the superclass for all userinterface objects. Composite Class Example public class CompositeExample implements EntryPoint { /** * A composite of a TextBox and a CheckBox that optionally enables it. */ private static class OptionalTextBox extends Composite implements ClickHandler { private TextBox textbox = new TextBox(); private CheckBox checkbox = new CheckBox(); /** * Constructs an OptionalTextBox with the given caption on the check. * * @param caption the caption to be displayed with the check box */ 21 22 Composite Class Example public OptionalTextBox(String caption) { // Place the check above the text box using a vertical panel. VerticalPanel panel = new VerticalPanel(); panel.add(checkbox); panel.add(textbox); // Set the check box's caption, and check it by default. checkbox.settext(caption); checkbox.setchecked(true); checkbox.addclickhandler(this); // All composites must call initwidget() in their constructors. initwidget(panel); // Give the overall composite a style name. setstylename("example-optionalcheckbox"); } 23 Composite Class Example public void onclick(clickevent event) { if (event.getsource() == checkbox) { // When the check box is clicked, update the text box's enabled state. textbox.setenabled(checkbox.ischecked()); } } /** * Sets the caption associated with the check box. * * @param caption the check box's caption */ public void setcaption(string caption) { // Note how we use the use composition of the contained widgets to provide only the methods that we want to. checkbox.settext(caption); } 24
Composite Class Example /** * Gets the caption associated with the check box. * * @return the check box's caption */ public String getcaption() { return checkbox.gettext(); } } /* end of OptionalTextBox */ public void onmoduleload() { // Create an optional text box and add it to the root panel. OptionalTextBox otb = new OptionalTextBox("Check this to enable me"); RootPanel.get().add(otb); } } 25 HelloWidget.java GWT create method: Composite::initWidget: Sets the widget to be wrapped by the composite. The wrapped widget must be set before calling any Widget methods on this object, or adding it to a panel. This method may only be called once for a given composite U uibinder::createandbindui(o owner): Creates and returns the root object of the UI, and fills any fields of owner tagged with UiField. U - The type of the root object of the generated UI, typically a subclass of Element or UiObject owner: The type of the object that will own the generated UI 26 HelloWidget EntryPoint HelloWidget Ui (Ui.java) Ui.java, designer mode, choose component 27 28
29 31 HelloWidget EntryPoint 30 32
33 35 New a Web Application Project 34 36
New a class from com.ui.client 37 39 38 40
41 43 42 44
UiBinder Deploy a DockLayoutPanel 45 47 UiBinder New a UiBinder UiBinder-image- 46 48
UiBinder-VerticalPanel- UiBinder-Labels 49 51 UiBinder-Labels UiBinder-ContactWidget.java 50 52
UiBinder-ContactWidget.java Source->generate getters and setters UiBinder-ContactWidget.java setcontact contact setcontact, contact 53 54 UiBinder-Ui.java ContactWidget.java UiBinder-Ui.java ContactWidget.java 55 56
UiBinder-Ui.java ContactWidget.java Run 57 59 UiBinder-Ui.java 58