UiBinder jest rozszerzeniem, które pozwala nam szybko i bardzo przyjemnie stworzyć widok okienka w XML’u.  Dzięki niemu możemy oddzielić widok aplikacji webowej od logiki ją obsługującej w czystym GWT. Sposób używania UiBinder’a jest bardzo dobrze opisany. Jednak już po chwili korzystania  z tego narzędzia wraz z klasami dostępnymi standardowo w GWT odczujemy mały niedosyt, że potrzebujemy tworzyć własne widgety, które będą kompatybilne z UiBinder’em albo będziemy musieli zrezygnować całkowicie z tego narzędzia.

W tym wpisie właśnie chciałbym przedstawić sposób stworzenia własnego prostego widget’u. Będzie nim pole do wpisywania hasła, wraz z labelk’ą opisującą do czego to pole służy. Naszym celem jest stworzenie widget’u który wygląda mniej więcej tak:

Przejdźmy do kodu, stwórzmy klasę reprezentującą widget:

// Copyright (C) 2010 Code-House
// All rights reserved
package com.hqcargo.shippingstock.client.application.view.widget.form;

import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.PasswordTextBox;
import com.hqcargo.shippingstock.client.application.view.widget.LabelWidget;

/**
 * Widget zawierający pole label opisu, wpisywania hasła, a także label
 * w którym będzie wyświetlany błąd. Klasa musi dziedziczyć po Widgecie,
 * w naszym wypadku dziedziczy pośrednio po FlowPanel'u, na którym są
 * rysowane elementy naszego Widget'u.
 *
 * @author Michał Rowicki
 */
public class PasswordWidget extends FlowPanel {

    //Wszystkie pola
    /**
     * Etykieta pola.
     */
    LabelWidget label;

    /**
     * Etykieta błędu.
     */
    Label errorLabel;

    /**
     * Pole, które musi rozszerzać klasę Widget.
     * {@link com.google.gwt.user.client.ui.Widget}
     */
    PasswordTextBox pass;

    /**
     * Wartość id używana we wszelkich formularzach, by można było
     * cache'ować dane wpisane do ramki i później by były wczytywane
     * w przeglądarce.
     */
    String id;

    /**
     * Należy stworzyć konstruktor bezargumentowy tak by framework
     * UiBinder'a mógł stworzyć instancję naszego obiektu i później
     * sam ją wypełnił. Jeżeli chcemy móc tworzyć widgety z danymi
     * ładowanymi w Javie musimy skorzystać z @UiFactory
     * {@link http://code.google.com/intl/pl/webtoolkit/doc/latest/DevGuideUiBinder.html#Share_resource_instances}
     * W konstruktorze musimy zainicjować wszystkie pola by móc
     * później z nich korzystać.
     */
    public PasswordWidget() {
        pass = new PasswordTextBox();

        label = new LabelWidget();
        //ustawienie atrybutu class, by móc podpiąć własne CSS'y
        label.setStyleName("item_label");

        errorLabel = new Label();
        errorLabel.setStyleName("error_label");

        add(label);
        add(pass);
        add(errorLabel);

        //ustawienie atrybutu class dla całego FlowPanelu
        setStylePrimaryName("item");
    }

    //by nasza aplikacja działała poprawnie musimy utworzyć gettersy i settersy dla pól klasy

    /**
     * Pobranie wartości pola label.
     *
     * @return Wartość label
     */
    public final LabelWidget getLabel() {
        return label;
    }

    /**
     * Ustawienie wartości pola label.
     *
     * @param Podaj label
     */
    public final void setLabel(LabelWidget label) {
        this.label = label;
    }

    /**
     * Pobranie wartości pola errorLabel.
     *
     * @return Wartość errorLabel
     */
    public final Label getErrorLabel() {
        return errorLabel;
    }

    /**
     * Ustawienie wartości pola errorLabel.
     *
     * @param Podaj errorLabel
     */
    public final void setErrorLabel(Label errorLabel) {
        this.errorLabel = errorLabel;
    }

    /**
     * Pobranie wartości pola pass.
     *
     * @return Wartość pass
     */
    public final PasswordTextBox getPass() {
        return pass;
    }

    /**
     * Ustawienie wartości pola pass.
     *
     * @param Podaj pass
     */
    public final void setPass(PasswordTextBox pass) {
        this.pass = pass;
    }

    /**
     * Pobranie wartości pola id.
     *
     * @return Wartość id
     */
    public final String getId() {
        return id;
    }

    //ustawia wartość pola id dla obiektu pass

    /**
     * Ustawienie Id pola.
     *
     * @param id Identyfikator pola.
     */
    public final void setFieldId(final String id) {
        this.id = id;

        pass.getElement().setId(id);
        label.setFor(id);
    }
}

 

Użycie naszego widget’u w pliku *.ui.xml jest bardzo proste należy jedynie dodać w polu UiBinder xmlns:dowolna_nazwa="urn:import:nazwa_paczki". A następnie w ciele HTMLPanela dodać pole dowolna_nazwa:PasswordWidget i uzupełnić odpowiednio pola, np:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder
    xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:widget="urn:import:client.application.view.widget"
    xmlns:gwt="urn:import:com.google.gwt.user.client.ui">

    <gwt:HTMLPanel tag="div">

        <widget:PasswordWidget fieldId="password" fieldLabel="Hasło" ui:field="password" />

    </gwt:HTMLPanel>
</ui:UiBinder>

W ten oto sposób stworzyliśmy najprostszy własny widget który możemy użyć w UiBinderze.

Tutaj załączam cały działający projekt Eclipse’a z naszym własnym widgetem (należy przed uruchomieniem zainstalować SDK GWT).