6. díl - Wicket - Formulář a model

Java Enterprise Edition Wicket Wicket - Formulář a model

V tomto díle tutoriálu vytvoříme stránku s kontaktním formulářem. Ten bude sloužit k tomu, aby nám mohli návštěvníci stránek napsat a poslat zprávu.

Nejdříve ale vyřešíme drobný nedostatek z přechozí lekce. Budeme chtít, aby se text titulku okna měnil okamžitě při změně locale. Aktuálně se v titulku okna zobrazí text, který předáváme při konstrukci objektu Label titleLB. Je třeba nastavit objektu titleLB model a tento model (data, která model vrací) měnit dle jazykového nastavení.

V balíčku cz.mujweb.basepage vytvoříme třídu modelu. Každý model obsahuje metodu getObject(), která vrací data a metodu setObject(), která data změní (metodu public void detach() nebudeme potřebovat, a proto ji necháme prázdnou). Náš model je jednoduchý.

TitleModel.java

public class TitleModel implements IModel {
        private String title = "";

        @Override
        public void detach() {
        }

        @Override
        public Object getObject() {
                return title;
        }

        @Override
        public void setObject(Object object) {
                title = (String) object;
        }
}

Ve třídě BasePage.java vytvoříme instanci tohoto modelu a při konstrukci titleLB ji předáme jako parametr. Metodu public abstract String getTitle(); již potřebovat nebudeme, místo ní vytvoříme public abstract void setTitleModelOb­ject();

BasePage.java

public abstract class BasePage extends WebPage {
        protected IModel titleModel;

        public BasePage() {
                Link homePageLink = new Link("homePage") { … };
                add(homePageLink);

                Link photosPageLink = new Link("photosPage") { … };
                add(photosPageLink);

                add(new Link("en") { … });

                add(new Link("cs") { … });

                titleModel = new TitleModel();
                Label titleLB = new Label("title", titleModel);
                add(titleLB);
        }

        public abstract void setTitleModelObject();
}

Vytváříme protected proměnnou titleModel, která bude přístupná v třídách, které z BasePage.class budou dědit.

protected IModel titleModel;

Dále do proměnné titleModel přiřadíme instanci TitleModelu a použijeme ji jako parametr Label konstruktoru. Dále pak musíme metodu setTitleModelObject zavolat. Výsledkem je to, že pokaždé, když se titleLB bude vykreslovat, zavolá metodu getObject() svého modelu a data, které touto metodou dostane, zobrazí.

titleModel = new TitleModel();
Label titleLB = new Label("title", titleModel);
add(titleLB);
setTitleModelObject();

Nyní musíme v HomePage.java a v PhotosPage.java smazat nyní již nepotřebnou metodu public String getTitle() a místo toho implementovat metodu public void setTitleModelOb­ject(). Metoda setTitleModelOb­ject() nastaví objekt metody (v našem případě textový řetězec) na novou hodnotu. Tato nová hodnota se použije při dalším vykreslení objektu titleLB.

HomePage.java

@Override
public void setTitleModelObject() {
        titleModel.setObject(getString("title.homePage"));
}

PhotosPage.java

@Override
public void setTitleModelObject() {
        titleModel.setObject(getString("title.photosPage"));
}

Nyní jsme dosáhli předchozí funkcionality jiným způsobem. Při vytvoření stránky je nastaven titulek dle jazykového nastavení. Aby se titulek změnil při kliknutí na odkaz, je třeba změnit data modelu při kliknutí. To provedeme v metodě public void onClick() odkazu (zavoláme metodu setTitleModelOb­ject()).

BasePage.java

add(new Link("en") {
        @Override
        public void onClick() {
                Session.get().setLocale(Locale.ENGLISH);
                setTitleModelObject();
        }
});

add(new Link("cs") {
        @Override
        public void onClick() {
                Session.get().setLocale(new Locale("cs"));
                setTitleModelObject();
        }
});

Formulář

Formuláře ve Wicketu úzce spolupracují s modely = objekty, které zpracovávají a poskytují data. Wicket nám umožňuje napsat si vlastní modely (jak jsme viděli v předchozí části), ale zároveň pro nejčastější situace přichází s připravenými modely. Právě zpracování formulářů je častou činností a modely pro práci s formulářemi jsou ve Wicektu připraveny.

Pro práci s formuláři je přímo vytvořen CompoundProper­tyModel, který využívá dědičnosti modelů. To znamená, že nemusíme přiřazovat model každé komponentě ve formuláři, ale přidáme model formuláři a komponenta, pokud nemá model přiřazen, se dotáže nadřazené komponenty (např. formuláře). Pokud jako id komponenty zvolíme název property ušetříme si hodně psaní. Model si odvodí, že daná property se vztahuje k dané komponentě.

V projektu si vytvoříme nový balíček (package) např. cz.mujweb.con­tatpage a v něm třídu formuláře, třídu kontaktní stránky a soubor .html

ContactForm.java

public class ContactForm extends Form {
        private String email;
        private String text;

        public ContactForm(String id) {
                super(id);
                System.out.println("form working");
                setDefaultModel(new CompoundPropertyModel(this));

                add(new TextField("email"));
                add(new TextArea("text"));
        }

        @Override
        protected void onSubmit() {
                System.out.println("Zadaný email: " + email);
                System.out.println("Zadaný text: " + text);
        }
}

Náš formulář obsahuje dvě property.

private String email;
private String text;

Dále formuláři nastavíme jako model CompoundProper­tyModel. setDefaultModel(new CompoundProper­tyModel(this));

Do formuláře vložíme dvě komponenty. Dáme jim id, které odpovídá názvu dané property ve formuláři.

add(new TextField("email"));
add(new TextArea("text"));

Nakonec překryjeme metodu onSubmit(), která se provede po odeslání formuláře. Prozatím nám bude stačit, že hodnoty property vypíšeme.

@Override
protected void onSubmit() {
        System.out.println("Zadaný email: " + email);
        System.out.println("Zadaný text: " + text);
}

ContactPage.java

public class ContactPage extends BasePage {

        public ContactPage() {
                Form form = new ContactForm("form");
                add(form);
        }

        @Override
        public void setTitleModelObject() {
                titleModel.setObject(getString("title.contactPage"));
        }
}

ContactPage.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<wicket:extend>
<form wicket:id="form">
        <input type="text" wicket:id="email" id="email"/><br/>
        <textarea wicket:id="text" id="text" cols="40" rows="6"/><br/>
        <input type="submit" value="Odeslat"/>
</form>
</wicket:extend>

</body>
</html>

BasePage.java

Link contactPageLink = new Link("contactPage") {
        @Override
        public void onClick() {
                setResponsePage(ContactPage.class);
        }
};
add(contactPageLink);

BasePage.html

<div id="menu">
        <ul>
                <li><a href="#" wicket:id="homePage"><wicket:message key="menu.homePage"/></a></li>
                <li><a href="#" wicket:id="photosPage"><wicket:message key="menu.photos"/></a></li>
                <li><a href="#" wicket:id="contactPage"><wicket:message key="menu.contact"/></a></li>
        </ul>
</div>

WicketApplica­tion_cs.proper­ties

title.contactPage=Kontaktní stránka
menu.contact=Kontakt

WicketApplica­tion.properti­es

title.contactPage=Contact page
menu.contact=Contact

Výsledek v konzoli po odeslání formuláře.

Zadaný email: email@email.cz
Zadaný text: Pokusný text.

Stránka s formulářem se sice zobrazí a je funkční, ale má daleko k dokonalosti. Na stránku přidáme lokalizovaný nadpis, lokalizujeme nápis tlačítka a přidáme lokalizované popisky ke komponentám.

WicketApplica­tion_cs.proper­ties

text.contact=Kontaktní formulář
form.email=Email
form.text=Komentář
form.submit=Odeslat

WicketApplica­tion.properti­es

text.contact=Contact form
form.email=Email
form.text=Comment
form.submit=Submit

ContactPage.html

<wicket:extend>
<h2><wicket:message key="text.contact"/></h2>

<form wicket:id="form">
        <input type="text" wicket:id="email" id="email"/><label for="email"><wicket:message key="form.email"/></label><br/>
        <textarea wicket:id="text" id="text" cols="40" rows="6"/><label for="text"><wicket:message key="form.text"/></label><br/>
        <input type="submit" wicket:message="value:form.submit"/>
</form>

</wicket:extend>

style.css

form {
        padding-top: 5px;
        padding-bottom: 5px;
}

form label {
        padding-left: 5px;
}

form input {
        margin-bottom: 5px;
        margin-top: 5px;
}

Pěkné, ne? Ale k užitečnosti to má zatím daleko - to napravíme v příštím díle, kde se podíváme na propojení naší stránky a databáze.


 

  Aktivity (1)

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

Jak se ti líbí článek?
Celkem (1 hlasů) :
55555


 


Miniatura
Všechny články v sekci
Apache Wicket
Miniatura
Následující článek
Wicket - Databáze

 

 

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í!