Formulářové komponenty - dokončení

V minulém dílu tipů a triků pro framework Apache Wicket jsme začali vytvářet formulář, obsahující různé komponenty. Zatím jsme do formuláře přidali TextField, PasswordTextField, TextArea a DropDownChoice. Ještě nám zbývá přidat RadioGroup, Radio a CheckBox.

Formulářové komponenty - dokončení

RadioGroup, Radio

Nyní přidáme do formuláře komponenty pro volbu pohlaví.

.java

RadioGroup rg = new RadioGroup("gender", new PropertyModel(this, "gender"));
rg.add(new Radio<String>("man", new Model("man")));
rg.add(new Radio<String>("woman", new Model("woman")));
rg.add(new AjaxFormChoiceComponentUpdatingBehavior() {
    @Override
    protected void onUpdate(AjaxRequestTarget target) {
        service = null;
        children = null;
        target.add(container);
    }
});
form.add(rg);

.html

<div wicket:id="gender">
    <label class="bold">Pohlaví</label><br>
    <label for="man">Muž</label><input type="radio" wicket:id="man" id="man"><br>
    <label for="woman">Žena</label><input type="radio" wicket:id="woman" id="woman"><br>
</div>

V kódu výše to není uvedeno, ale do html jsem také přidal dva tagy <hr> (čára) pro vizuální oddělení volby pohlaví od zbytku voleb ve formuláři.

.properties

service.null=Vyberte po\u010Det let vojensk\u00E9 slu\u017Eby
children.null=Zvolte po\u010Det d\u011Bt\u00ED

V .properties souboru nastavíme text, který se zobrazí v tagu <select> v případě, že není vybrána žádná volba. Properties soubory byly vysvětleny např. v tomto dílu tutoriálu.

Vysvětlení:

RadioGroup rg = new RadioGroup("gender", new PropertyModel(this, "gender"));

Uživatel může být buď muž, nebo žena. Z toho důvodu je použita komponenta RadioGroup, která jednotlivé komponenty Radio sdružuje dohromady. Volby uživatele se uloží do proměnné private String gender;

rg.add(new Radio<String>("man", new Model("man")));

Vytvoří komponentu Radio a přidá ji do RadioGroup. V případě, že uživatel vybere tuto variantu, do proměnné gender se uloží hodnota "man".

rg.add(new AjaxFormChoiceComponentUpdatingBehavior() {
    @Override
    protected void onUpdate(AjaxRequestTarget target) {
        service = null;
        children = null;
        target.add(container);
    }
});

Přidá RadioGroup rg "behavior", což je způsob, jak komponentě přidat nějakou funkcionalitu. V tomto případě změna volby uživatelem způsobí zavolání metody onUpdate, která nastaví hodnotu service a children na null a updatuje komponentu container (tato komponenta se překreslí). Tím se updatují i všechny v ní obsažené komponenty. Pro "behavior" je použit Ajax, takže se updatuje a překreslí pouze komponenta přidaná do target. Tato komponenta musí mít nastaveno outputMarkupId na true.

container.setOutputMarkupId(true);

CheckBox

Ještě nám zbývá přidat CheckBox.

.java

CheckBox agreeCHB = new CheckBox("agree", new PropertyModel<Boolean>(this, "agree"));
form.add(agreeCHB);

.html

<label for="agree">Souhlasím s podmínkami</label><input type="checkbox" wicket:id="agree" id="agree"><br>

Na závěr v properties určíme, jaký text se má zobrazit v případě, že nebudou zadána povinná pole. Více např. v tomto dílu tutoriálu.

.properties

form.username.Required=Email je povinn\u00FD\!
form.password.Required=Heslo je povinn\u00E9\!
form.text.Required=Text je povinn\u00FD\!

a také změníme metodu onSubmit tak, aby nám do konzole vypisovala uživatelem zvolená data.

.java

@Override
protected void onSubmit() {
    System.out.println("Form submitted");
    System.out.println("Username: " + username);
    System.out.println("Password: " + password);
    System.out.println("Text: " + text);
    System.out.println("Sex: " + gender);
    System.out.println("Number of years in service: " + service);
    System.out.println("Number of children: " + children);
    System.out.println("Agree: " + agree);
}

Výstup v konzoli:

Form submitted
Username: vita
Password: 1234
Text: Nějaký text.
Sex: man
Number of years in service: 0
Number of children: null
Agree: true

Když už pracujeme s formuláři, bylo by dobré zmínit ještě metodu onError. Jedná se o další metodu komponenty Form, kterou můžeme přetížit. Tato metoda, tak jak její název vypovídá, se volá v případě, že odeslání formuláře skončí chybou.

My tuto metodu použijeme k vypsání textu do panelu feedback.

.java

Form form = new Form("form") {
    @Override
    protected void onSubmit() {…}

    @Override
    protected void onError() {
        error(getString("form.submit.error"));
    }
};

.properties

form.submit.error=Formul\u00E1\u0159 obsahuje n\u00E1sleduj\u00EDc\u00ED chyby\:

Vysvětlení:

error(getString("form.submit.error"));

Metoda error() vypíše do panelu feedback text, který je v properties souboru pod klíčem form.submit.error (tento klíč je volitelný a záleží na vás, jaký si vymyslíte).

Ještě lehce upravíme styly:

.css

.feedback li {
    list-style: none;
}

Jedním ze způsobů, jak po uživateli požadovat zadání vstupu, je označit komponentu jako required. Další možností je, znepřístupnit (disabled) tlačítko pro odeslání formuláře do té doby, dokud všechna požadovaná pole nebudou vyplněna.

V našem formuláři budeme požadovat zaškrtnutí políčka "Souhlasím s podmínkami".

Této funkcionality dosáhneme jednoduchou úpravou.

.java

final Button submitBT = new Button("submit") {
    @Override
    protected void onConfigure() {
        setEnabled(agree != null && agree);
    }
};
submitBT.setOutputMarkupId(true);
form.add(submitBT);

Tlačítku v metodě onConfigure určíme, kdy má enabled a kdy disabled.

Pokud bychom provedli pouze tuto změnu, tlačítko by bylo disabled vždy. Je ještě nutné přidat komponentě CheckBox behavior, které updatuje tlačítko v případě, že na komponentě CheckBox dojde ke změně.

.java

CheckBox agreeCHB = new CheckBox("agree", new PropertyModel<Boolean>(this, "agree"));
agreeCHB.add(new OnChangeAjaxBehavior() {
    @Override
    protected void onUpdate(AjaxRequestTarget target) {
        target.add(submitBT);
    }
});
form.add(agreeCHB);

Validace polí pro vstup uživatelského jména, hesla a texu funguje beze změny.