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

V tomto díle tipů a triků pro framework Wicket se podíváme na formulářové 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ářové komponenty

Ukážeme si použití výše uvedených komponent v jednoduchém formuláři, to jak z nich získat uživatelem zadaná data, jak nastavit viditelnost určité komponenty a jak tuto viditelnost měnit pomocí Ajaxu na základě události.

Pro hezčí zobrazení formuláře budeme v této lekci používat následující soubor stylů.

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

Nejdříve si vytvoříme jednoduchý formulář, který bude obsahovat pouze tlačítko pro odeslání.

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

Vytvořili jsme formulář, s tlačítkem pro odeslání a také jsme do stránky přidali panel (FeedbackPanel) pro zobrazení výstupu případných informací, týkajících se validace komponent.

formulář obsahující pouze tlačítko - Tipy a triky pro Wicket

Po stisknutí tlačítka by se do konzole měl vypsat text ("Form submitted"), který je definován v metodě:

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

Ta se provede při každém odeslání formuláře.

Ve formuláři budeme chtít získat od uživatele:

  • uživatelské jméno (povinné)
  • heslo (povinné)
  • nějaký text (povinné)
  • údaj o jeho/jejím pohlaví
  • údaje navázané na zvolené pohlaví (od muže počet let vojenské služby, od ženy počet dětí)
  • zda souhlasí s podmínkami

My pro práci s daty budeme používat PropertyModel. Ve spojení s formuláři se ve Wicketu velmi často též používá CompoundProper­tyModel. Zmínku o tomto modelu nalezente v tomto dílu tutoriálu.

Přidání proměnných, ve kterých bude uložen vstup od uživatele.

.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ář budeme vytvářet postupně. Nejdříve přidáme komponenty pro zadání uživatelského jména, 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/>
formulář obsahující TextField, PasswordTextField a TextArea - Tipy a triky pro Wicket

Nastavení povinnosti komponent (vstup od uživatele bude povinný).

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

Komponenta PasswordTextField je povinná defaultně.

Všimněte si, že každá komponenta má kromě id též PropertyModel, který má jako parametr this (tato WebPage) a textový řetězec, který odpovídá názvu proměnné:

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

načítá a ukládá data do:

private String username;

U ostatních je to obdobné.

DropDownChoice

Nyní vytvoříme WebMarkupContainer, což je komponenta - kontejner pro další komponenty. Rozdíl mezi WebMarkupContainer a Panel je ten, že panel má vlastní soubor .html, kdežto WebMarkupContainer ne. Panel se proto používá pro vytvoření složitějších a komplexnějších částí.

Do kontejneru umístíme dvě komponenty DropDownChoice (v html se jedná o select) pro výběry (počet let vojenské služby, počet dětí). Každá z těchto komponent bude mít přidělen model, který jí bude poskytovat data pro zobrazení a PropertyModel, který bude uchovávat vstup od uživatele.

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

Vysvětlení:

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

Vytvoří model, který bude vracet seznam čísel (0, 1, 2), a který potom bude používat komponenta serviceDDCH (viz níže).

PropertyModel<Integer>(this, "service")

Načítá a ukládá data (getObject(), setObject()) do private String service.

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

Vytvoří komponentu DropDownChoice a zároveň přetíží její metodu:

protected void onConfigure()

Nastavujeme viditelnost komponenty:

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

V případě, že hodnota proměnné gender bude not null a zároveň se hodnota této proměnné bude rovnat "man", komponenta bude viditelná.

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

Přidává do kontejneru komponenty serviceDDCH a childrenDDCH a kontejneru nastavuje outputMarkupId na true (to je potřeba v případě, že budeme chtít aktualizovat komponentu pomocí Ajaxu - v případě Wicketu to znamená, že jí přidělíme behavior).

Pokud si nyní zobrazíte stránku, nic se oproti předchozí verzi nezměnilo. Proměnná gender má hodnotu null, takže ani jedna z komponent DropDownChoice není viditelná.

V přístím dílu tipů a triků tento formulář dokončíme.


 

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