Formulářové komponenty - dokončení

Java Enterprise Edition Wicket Tipy a triky 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

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

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ář

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ář

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
formulář s enabled tlačítkem

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

formulář se zobrazením chyb

 

Stáhnout

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

 

  Aktivity (1)

Článek pro vás napsal vita
Avatar
vita

Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!


 


Miniatura
Předchozí článek
Formulářové komponenty
Miniatura
Všechny články v sekci
Tipy a triky pro Wicket
Miniatura
Následující článek
Modely

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!