Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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);
formulář s RadioGroup a Radio - Tipy a triky pro Wicket

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\!
formulář s výpisem do FeedbackPanel - Tipy a triky pro Wicket

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);
}
odeslaný formulář - Tipy a triky pro Wicket

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;
}
formulář - Tipy a triky pro Wicket

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);
formulář s disabled tlačítkem - Tipy a triky pro Wicket
formulář s enabled tlačítkem - Tipy a triky pro Wicket

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

formulář se zobrazením chyb - Tipy a triky pro Wicket

 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 3x (2.35 kB)
Aplikace je včetně zdrojových kódů v jazyce Java

 

Všechny články v sekci
Tipy a triky pro Wicket
Článek pro vás napsal vita
Avatar
Uživatelské hodnocení:
1 hlasů
vita
Aktivity