Some of posts from this blog has been moved to dywicki.pl. You will be automatically redirected to new blog if you would submit comment.
New posts are published on dywicki.pl, this blog contains old content related to Code-House company.


Niektóre posty z tego bloga zostały przeniesione do dywicki.pl. Zostaniesz automatycznie przekierowany jeśli bedzięsz chciał dodać komentarz.
Nowe posty sa publikowane na dywicki.pl, ten blog zawiera stare treści związane z firmą Code-House.

Własny widget w UiBinderze

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:

1

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).

 

One reply


  1. Witam, czy jest szansa zeby jeszcze raz udostepnic projekt z wlasnym widgetem? Bardzo bylbym wdzieczny za udostepnienie. Pozdrawiam Pawel :)

Leave a reply