Formulárové komponenty - dokončenie

V minulom dieli tipov a trikov pre framework Apache Wicket sme začali vytvárať formulár, obsahujúci rôzne komponenty. Zatiaľ sme do formulára pridali TextField, PasswordTextField, textarea a DropDownChoice. Ešte nám zostáva pridať RadioGroup, Radio a checkbox.

Formulárové komponenty - dokončenie

RadioGroup, Radio

Teraz pridáme do formulára komponenty pre voľbu pohlavia.

.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óde vyššie to nie je uvedené, ale do html som tiež pridal dva tagy <hr> (čiara) pre vizuálne oddelenie voľby pohlavia od zvyšku volieb vo formulári.

.properties

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

V .properties súboru nastavíme text, ktorý sa zobrazí v tagu <select> v prípade, že nie je vybraná žiadna voľba. Properties súbory boli vysvetlené napr. V tomto dieli tutoriálu.

vysvetlenie:

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

Užívateľ môže byť buď muž, alebo žena. Z toho dôvodu je použitá komponenta RadioGroup, ktorá jednotlivé komponenty Radio združuje dohromady. Voľby používateľa sa uloží do premennej private String gender ;

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

Vytvorí komponent Radio a pridá ju do RadioGroup. V prípade, že používateľ vyberie tento variant, do premennej gender sa uloží hodnota "man".

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

Pridá RadioGroup rg "behavior", čo je spôsob, ako komponente pridať nejakú funkcionalitu. V tomto prípade zmena voľby užívateľom spôsobí zavolanie metódy onUpdate, ktorá nastaví hodnotu service a children na null a updatuje komponent container (táto komponenta sa prekreslí). Tým sa updatuje aj všetky v nej obsiahnuté komponenty. Pre "behavior" je použitý Ajax, takže sa updatuje a prekreslí len komponenta pridaná do target. Tento komponent musí mať nastavené outputMarkupId na true.

container.setOutputMarkupId(true);

Checkbox

Ešte nám zostáva pridať 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áver v properties určíme, aký text sa má zobraziť v prípade, že nebudú zadaná povinné polia. Viac napr. V tomto dieli 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 tiež zmeníme metódu onSubmit tak, aby nám do konzoly vypisovala užívateľom vybrané dáta.

.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 konzole:

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

Keď už pracujeme s formulármi, bolo by dobré spomenúť ešte metódu onError. Ide o ďalšiu metódu komponenty Form, ktorú môžeme preťažiť. Táto metóda, tak ako jej názov vypovedá, sa volá v prípade, že odoslaní formulára skončí chybou.

My túto metódu použijeme na vypísanie textu do panela 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\:

Vysvetlenie:

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

Metóda error () vypíše do panelu feedback text, ktorý je v properties súbore pod kľúčom form.submit.error (tento kľúč je voliteľný a záleží na vás, aký si vymyslíte).

Ešte ľahko upravíme štýly:

.css

.feedback li {
    list-style: none;
}

Jedným zo spôsobov, ako po užívateľovi požadovať zadaní vstupu, je označiť komponent ako required. Ďalšou možnosťou je, zneprístupniť (disabled) tlačidlo pre odoslanie formulára dovtedy, kým všetky požadované polia nebudú vyplnené.

V našom formulári budeme požadovať zaškrtnutie políčka "Súhlasím s podmienkami".

Tejto funkcionality dosiahneme jednoduchou úpravou.

.java

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

Tlačidle v metóde onConfigure určíme, kedy má enabled a kedy disabled.

Ak by sme vykonali iba túto zmenu, tlačidlo by bolo disabled vždy. Je ešte nutné pridať komponente checkbox behavior, ktoré updatuje tlačidlo v prípade, že na komponente checkbox dôjde k zmene.

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

Validácia polí pre vstup používateľského mena, hesla a texu funguje bez zmeny.