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:
[sourcecode language=“java”] // 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); } }
[/sourcecode]
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:
[sourcecode language=“xml”]
<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> [/sourcecode]
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).