Formulárové komponenty

V tomto diele tipov a trikov pre framework Wicket sa pozrieme na formulárové komponenty:

• TextField, v html <input type="text"/>
• PasswordTextField, v html <input type="password"/>
• Textarea, v html <textarea></textarea>
• RadioGroup a Radio, v html <input type="radio"/>
• DropDownChoice, v html <select></select>
• Checkbox, v html <input type="checkbox"/>

Formulárové komponenty

Ukážeme si použitie uvedených komponentov v jednoduchom formulári, to ako z nich získať užívateľom zadané údaje, ako nastaviť viditeľnosť určité komponenty a ako túto viditeľnosť meniť pomocou Ajaxu na základe udalosti.

Pre krajšie zobrazenie formulára budeme v tejto lekcii používať nasledujúce súbor štýlov.

.css

body {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    font-size: larger;
}

form {
    border: 1px solid black;
    padding: 5px;
}

select,input[type=submit],label {
    margin: 5px 10px;
    padding: 5px 10px;
}

label {
    width: 200px;
    display: inline-block;
}

.bold {
    font-weight: bold;
}

.feedback {
    color: red;
    margin: 10px 0;
    padding: 5px;
}

Najskôr si vytvoríme jednoduchý formulár, ktorý bude obsahovať iba tlačidlo pre odoslanie.

.java

FeedbackPanel feedback = new FeedbackPanel("feedback");
add(feedback);

Form form = new Form("form") {
    @Override
    protected void onSubmit() {
        System.out.println("Form submitted");
    }
};
add(form);

Button submit = new Button("submit");
form.add(submit);

.html

<div wicket:id="feedback" class="feedback"></div>

<form wicket:id="form">
    <input wicket:id="submit" type="submit" value="Submit" />
</form>

Vytvorili sme formulár, s tlačidlom pre odoslanie a tiež sme do stránky pridali panel (FeedbackPanel) pre zobrazenie výstupu prípadných informácií, týkajúcich sa validácia komponentov.

Po stlačení tlačidla by sa do konzoly mal vypísať text ( "Form submitted"), ktorý je definovaný v metóde:

@Override
protected void onSubmit() {
    System.out.println("Form submitted");
}

Tá sa vykoná pri každom odoslaní formulára.

Vo formulári budeme chcieť získať od užívateľa:

• užívateľské meno (povinné)
• heslo (povinné)
• nejaký text (povinné)
• údaj o jeho / jej pohlavia
• údaje naviazané na zvolenej pohlavia (od muža počet rokov vojenskej služby, od ženy počet detí)
• či súhlasí s podmienkami

My pre prácu s dátami budeme používať PropertyModel. V spojení s formulármi sa vo wicketu veľmi často tiež používa CompoundProper­tyModel. Zmienku o tomto modeli nalezente v tomto dieli tutoriálu.

Pridanie premenných, v ktorých bude uložený vstup od užívateľa.

.java

private String text;
private String username;
private String password;
private String gender;
private Integer service;
private Integer children;
private Boolean agree;

TextField, PasswordTextField, textarea

Formulár budeme vytvárať postupne. Najskôr pridáme komponenty pre zadanie užívateľského mena, hesla a textu.

.java

TextField usernameTF = new TextField("username", new PropertyModel<String>(this, "username"));
usernameTF.setRequired(true);
form.add(usernameTF);

PasswordTextField passwordTF = new PasswordTextField("password", new PropertyModel<String>(this, "password"));
form.add(passwordTF);

TextArea textTA = new TextArea("text", new PropertyModel<String>(this, "text"));
textTA.setRequired(true);
form.add(textTA);

.html

<label for="tf">Uživalské jméno *</label><input type="text" wicket:id="username" id="tf" /><br/>
<label for="passwd">Heslo *</label><input type="password" wicket:id="password" /><br/>
<label for="ta">Text *</label><textarea wicket:id="text" id="ta" rows="4" cols="20"></textarea><br/>

Nastavenie povinnosti komponentov (vstup od užívateľa bude povinný).

usernameTF.setRequired(true);
textTA.setRequired(true);

Komponent PasswordTextField je povinná defaultne.

Všimnite si, že každá komponenta má okrem id tiež PropertyModel, ktorý má ako parameter this (táto Webpage) a textový reťazec, ktorý zodpovedá názvu premenné:

new PropertyModel<String>(this, "username")

načítava a ukladá dáta do:

private String username;

Pri ostatných je to obdobné.

DropDownChoice

Teraz vytvoríme WebMarkupContainer, čo je komponent - kontajner pre ďalšie komponenty. Rozdiel medzi WebMarkupContainer a Panel je ten, že panel má vlastný súbor .html, kdežto WebMarkupContainer nie. Panel sa preto používa pre vytvorenie zložitejších a komplexnejších častí.

Do kontajnera umiestnime dve komponenty DropDownChoice (v html sa jedná o select) pre výbery (počet rokov vojenskej služby, počet detí). Každá z týchto komponentov bude mať pridelený model, ktorý jej bude poskytovať dáta pre zobrazenie a PropertyModel, ktorý bude uchovávať vstup od užívateľa.

.java

// Model for serviceDDCH
IModel<List<Integer>> serviceModel = new AbstractReadOnlyModel<List<Integer>>() {
    @Override
    public List<Integer> getObject() {
        return Arrays.asList(0, 1, 2);
    }
};
DropDownChoice serviceDDCH = new DropDownChoice("service", new PropertyModel<Integer>(this, "service"), serviceModel) {
    @Override
    protected void onConfigure() {
        setVisible(gender != null && gender.equals("man"));
    }
};

// Model for childrenDDCH
IModel<List<Integer>> childrenModel = new AbstractReadOnlyModel<List<Integer>>() {
    @Override
    public List<Integer> getObject() {
        return Arrays.asList(0, 1, 2, 3, 4, 5, 6 ,7 , 8, 9, 10);
    }
};
DropDownChoice childrenDDCH = new DropDownChoice("children", new PropertyModel<Integer>(this, "children"), childrenModel) {
    @Override
    protected void onConfigure() {
        setVisible(gender != null && gender.equals("woman"));
    }
};

// Container that contains drop down choices
final WebMarkupContainer container = new WebMarkupContainer("container");
container.add(serviceDDCH);
container.add(childrenDDCH);
container.setOutputMarkupId(true);
form.add(container);

.html

<div wicket:id="container">
    <select wicket:id="service"></select>
    <select wicket:id="children"></select>
</div>

Vysvetlenie:

IModel<List<Integer>> serviceModel = new AbstractReadOnlyModel<List<Integer>>() {
    @Override
    public List<Integer> getObject() {
        return Arrays.asList(0, 1, 2);
    }
};

Vytvorí model, ktorý bude vracať zoznam čísel (0, 1, 2), a ktorý potom bude používať komponent serviceDDCH (pozri nižšie).

PropertyModel<Integer>(this, "service")

Načítava a ukladá dáta (GetObject (), setObject ()) do private String service.

DropDownChoice serviceDDCH = new DropDownChoice(…) {
    @Override
    protected void onConfigure() {
        setVisible(gender != null && gender.equals("man"));
    }
};

Vytvorí komponent DropDownChoice a zároveň preťaží jej metódu:

protected void onConfigure()

Nastavujeme viditeľnosť komponenty:

setVisible(gender != null && gender.equals("man"));

V prípade, že hodnota premennej gender bude not null a zároveň sa hodnota tejto premennej bude rovnať "man", komponent bude viditeľná.

container.add(serviceDDCH);
container.add(childrenDDCH);
container.setOutputMarkupId(true);

Pridáva do kontajnera komponenty serviceDDCH a childrenDDCH a kontajnera nastavuje outputMarkupId na true (to je potrebné v prípade, že budeme chcieť aktualizovať komponent pomocou Ajaxu - v prípade wicket to znamená, že jej pridelíme behavior).

Ak si teraz zobraziť stránku, nič sa oproti predchádzajúcej verzii nezmenilo. Premenná gender má hodnotu null, takže ani jedna z komponentov DropDownChoice nie je viditeľná.

V budúcom dieli tipov a trikov tento formulár dokončíme.