8. diel - Wicket - Validácia vstupu a opakovač

Aktuálne teda máme funkčnú verziu webové aplikácie a v nasledujúcich niekoľkých lekciách budeme pracovať na jej vylepšení. Môžete pokračovať v súčasnom projekte, alebo si ako ja, vytvoriť projekt nový. Aby sme nemuseli vytvárať všetko od začiatku, predchádzajúce projekt jednoducho dokopírujeme a vložíme do workspace.

Eclipse sa nás opýta, pod akým názvom chceme kópiu projektu uložiť. Zvoľte napr. MujWebPokrocily a kliknite na OK.

V tomto novom projekte sa musí vykonať niekoľko drobných zmien (všetok výskyt slova MujWebStredni zameniť za MujWebPokrocily). Kliknete na novovytvorený projekt, následne zvolíte na lište Search -> File -> do poľa "Containing text:" zadáte MujWebStredni, v poli "File name patterns ..." necháte * a vo Scope zvolíte "Selected resources" -> Search. V záložke Search sa vám zobrazí nájdené výsledky (je ich cca sedem). U nich pozmeňte názov. Možno budete potrebovať reštartovať Eclipse. Keď teraz nasadíte aplikáciu, mala by byť prístupná na url http: // localhost: 8080 / MujWebPokrocily

V minulej lekcii sme pridali stránku s formulárom pre vkladanie komentárov. Vstup z formulára ale nie je nijak kontrolovaný, takže je možné vložiť prázdny komentár, alebo vynechať email. Toto teraz zmeníme. Budeme chcieť, aby ako email, tak text komentáre boli povinné. To dosiahneme vo wicket jednoducho.

ContactForm.java

add(new TextField("email").setRequired(true));
add(new TextArea("text").setRequired(true));

Po stlačení tlačidla "Odoslať" sa formulár neodošle, ale užívateľ nevie prečo. Pridáme teda panel, v ktorom sa bude zobrazovať informácie pre používateľov.

Wicket Panel je komponent, ktorý má vlastné .html, a ktorá umožňuje vytvoriť vlastný komponent vrátane html a tú používať na viacerých miestach v aplikácii. Pre zobrazovanie chybových informácií pri odosielaní formulára má Wicket už hotovú komponent FeedbackPanel.

ContactPage.java

public ContactPage() {
    FeedbackPanel feedback = new FeedbackPanel("feedback");
    add(feedback);

    Form form = new ContactForm("form");
    add(form);
}

ContactPage.html

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

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

<form wicket:id="form">
…

Upravíme tiež štýly.

style.css

.feedbackPanel {
    list-style: none;
    color: red;
    border: 1px solid red;
    margin: 10px 0;
    padding: 5px;
}

.feedbackPanel li {
    padding: 2px 0;
}

Ak sa vám defaultný hláška nepáči, je možné ju upraviť (název_formuláře.název_pole.Required).

WicketApplication.properties

form.email.Required=Email is required!
form.text.Required=Text of the comment is required!

WicketApplication_cs.properties

form.email.Required=Email je povinn\u00FD\!
form.text.Required=Text koment\u00E1\u0159e je povinn\u00FD\!

Polia sú teraz povinné, ale ešte by to chcelo validáciu, či je zadaný email je platný. Aj na toto má Wicket už pripravené riešenie. Políčku pridáme EmailAddressValidator.

ContactForm.java

public ContactForm(String id) {
    super(id);

    setDefaultModel(new CompoundPropertyModel(this));

    TextField<String> emailTF = new TextField<String>("email");
    emailTF.setRequired(true);
    emailTF.add(EmailAddressValidator.getInstance());
    add(emailTF);

    add(new TextArea<String>("text").setRequired(true));
}

Tiež si všimnite, že som u komponenty typu TextField použil generiká (určil som, s akým typom dát budú pracovať - s reťazcami).

Defaultný hlášku možno opäť zmeniť.

WicketApplication.properties

EmailAddressValidator=Not valid email address!

WicketApplication_cs.properties

EmailAddressValidator=Zadan\u00E1 hodnota nen\u00ED platn\u00E1 emailov\u00E1 adresa\!

Teraz vytvoríme stránku, na ktorej budeme komentáre zobrazovať. Najskôr ale budeme potrebovať model, ktorý bude poskytovať stránke dáta na zobrazenie. Metódu pre získanie všetkých komentárov (getAllComments ()) už máme pripravenú z minulej lekcie.

CommentsModel.java

public class CommentsModel implements IModel<List<Comment>> {

    @Override
    public void detach() {
    }

    @Override
    public List<Comment> getObject() {
        CommentDao dao = new CommentDaoImpl();
        List<Comment> comments = dao.getAllComments();
        return comments;
    }

    @Override
    public void setObject(List<Comment> object) {
    }
}

Pre zobrazenie všetkých komentárov na stránke použijeme komponent opakovač (repeater). Wicket ponúka niekoľko rôznych typov opakovačov pre rôzne príležitosti. My použijeme ListView, ktorý sa používa (ako jeho názov napovedá) na zobrazenie všetkých položiek zo zoznamu, ktoré dostane. V ListView je potreba implementovať metódu populateItem (), v ktorej definujeme, ako sa má každá položka zobraziť.

CommentsPage.java

public class CommentsPage extends BasePage {

    public CommentsPage() {
        ListView listView = new ListView<Comment>("listView", new CommentsModel()) {

            @Override
            protected void populateItem(ListItem<Comment> item) {
                Comment comment = item.getModelObject();
                item.add(new Label("date", comment.getCreatedTime().toString()));
                item.add(new Label("email", comment.getEmail()));
                item.add(new Label("text", comment.getTextOfComment()));
            }
        };
        add(listView);
    }

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

CommentsPage.html

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

<table>
    <tr>
        <th><wicket:message key="tableHeader.date"/></th>
        <th><wicket:message key="tableHeader.email"/></th>
        <th><wicket:message key="tableHeader.text"/></th>
    </tr>
    <tr wicket:id="listView">
        <td><span wicket:id="date"></span></td>
        <td><span wicket:id="email"></span></td>
        <td><span wicket:id="text"></span></td>
    </tr>
</table>

</wicket:extend>

Konštruktor ListView požaduje dva parametre: id a model, ktorý mu poskytuje dáta (model, ktorého GetObject () metóda vracia zoznam objektov). Metóda populateItem () sa volá pre každý objekt v zozname a ako parameter obsahuje ListItem. Z nej je možné získať objekt zo zoznamu. ListView opakuje tag, ktorému je priradený a všetky tagy, ktoré obsahuje. My sme ListView priradili riadku tabuľky a dovnútra riadku sme umiestnili bunky , ktoré obsahujú texty. ListView pre každú položku zo zoznamu vytvorí riadok tabuľky a tiež jednotlivé bunky. Ak tieto bunky obsahujú ďalšie Wicket komponenty, sú vytvorené tiež.

Ďalej je potrebné doplniť stránku do menu.

BasePage.java

Link commentsPageLink = new Link("commentsPage") {
    @Override
    public void onClick() {
        setResponsePage(CommentsPage.class);
    }
};
add(commentsPageLink);

BasePage.html

<li><a href="#" wicket:id="commentsPage"><wicket:message key="menu.comments"/></a></li>

A tiež doplniť resources.

Pre slovenčinu:

title.commentsPage=Koment\u00E1\u0159e
menu.comments=Koment\u00E1\u0159e
text.comments=V\u00FDpis koment\u00E1\u0159\u016F
tableHeader.date=Datum
tableHeader.email=Email
tableHeader.text=Text koment\u00E1\u0159e

pre angličtinu

title.commentsPage=Comments page
menu.comments=Comments
text.comments=Comments listing
tableHeader.date=Date
tableHeader.email=Email
tableHeader.text=Text of the comment

Tiež upravíme štýly.

style.css

table, th, td {
     border: 1px solid black;
     border-collapse: collapse;
}

table {
    width: 100%;
    margin: 5px 0;
}

th, td {
    padding: 5px;

}

Ešte by to chcelo jednu drobnú úpravu. Komentáre sa radí zostupne od najstaršieho. Asi by bolo lepšie radenie od najnovších. Stačí zmeniť select v CommentDaoImpl.java na

select id_comment, created_time, email, text_of_comment from comment order by created_time desc

To je pre tentokrát všetko - nabudúce sa pozrieme na vytváranie nových príspevkov.

Článok pre vás napísal vita

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

vita

Aktivity

Najčastejšie vyhľadávané

8. diel - Wicket - Validácia vstupu a opakovač