Lekce 9 - Wicket - JavaScript a CSS

V předchozím kvízu, Kvíz - Internacionalizace a lokalizace, formuláře a databáze, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

Psaní příspěvků do .html kódu stránky není zrovna pohodlné. Proto si v této lekci vytvoříme editační stránku, která bude obsahovat textový editor pro napsání příspěvku a tlačítko pro uložení příspěvku do databáze, odkud se pak příspěvky budou načítat a zobrazovat na úvodní stránce.

Nejdříve si připravíme databázi a objekty a metody pro ukládání a načítání příspěvků.

Note.java

public class Note {

    private Long id;
    private Date createdDate;
    private String text;

    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getText() {
        return text;
    }
    public void setText(String text) {
        this.text = text;
    }
    public Date getCreatedDate() {
        return createdDate;
    }
    public void setCreatedDate(Date date) {
        this.createdDate = date;
    }
}

NoteDao.java

public interface NoteDao {

    public List<Note> getAllNotes();
    public void saveNote(Note note);
}

NoteDaoImpl.java

public class NoteDaoImpl implements NoteDao {

    private final String POSTGRES = "jdbc:postgresql://localhost/testDB?user=postgres&password=fofofo";

    static {
        try {
            Class.forName("org.postgresql.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    @Override
    public List<Note> getAllNotes() {
        List<Note> list = new ArrayList<>();
        try (Connection con = DriverManager.getConnection(POSTGRES)) {
            Statement st = con.createStatement();
            ResultSet rs = st.executeQuery("select id, created, text from note order by id desc");
            while (rs.next()) {
                Note note = new Note();
                note.setId(rs.getLong("id"));
                note.setCreatedDate(rs.getDate("created"));
                note.setText(rs.getString("text"));
                list.add(note);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;
    }

    @Override
    public void saveNote(Note note) {
        try (Connection con = DriverManager.getConnection(POSTGRES)) {
            PreparedStatement ps = con.prepareStatement("insert into note (created, text) values (current_date, ?)");
            ps.setString(1, note.getText());
            ps.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

Vytvoření tabulky v databázi.

create table note (
    id serial not null primary key,
    created date not null,
    text character varying not null
);

Všechny potřebné soubory pro novou editační stránku umístíme do nového balíčku (cz.mujweb.edit­page).

Začneme vytvořením .html pro naši editační stránku.

EditPage.html

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

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

<form wicket:id="form">
    <div id="editor">
        <!--Toolbar-->
        <div id="toolbar">
            <input type="button" onclick="textEditor.modifySelection('h2')" wicket:message="value:button.header" />
            <input type="button" onclick="textEditor.modifySelection('b')" wicket:message="value:button.bold" />
            <input type="button" onclick="textEditor.modifySelection('i')" wicket:message="value:button.italic" />
            <input type="button" onclick="textEditor.modifySelection('p')" wicket:message="value:button.paragraph" />
        </div>

        <!--Area for text writing-->
        <textarea id="textEdit" wicket:id="textEdit" cols="80" rows="10"></textarea><br/>
        <input type="button" onclick="textEditor.clearEditArea();" wicket:message="value:button.clear"/>
        <input type="button" onclick="textEditor.viewText();" wicket:message="value:button.show"/>
        <input type="submit" wicket:message="value:button.submit"/>

        <!--Area for text preview-->
        <div id="textView"></div>
    </div>
</form>

</wicket:extend>

Doposud jsme používali pro lokalizaci textu v .html tag <wicket:message key="key"/>. Tento způsob ale nemůžeme použít u tagu <input>, kde se hodnota textu zadává pomocí atributu value. I pro tento případ má Wicket řešení. Používá se atribut wicket:message s hodnotou "value:klíč".

Stránka se skládá z formuláře, který obsahuje horní lištu se čtyřmi tlačítky pro editaci textu, oblast (text area) pro psaní textu a spodní lištu s tlačítky pro odeslání formuláře, smazání obsahu a náhled textu a poslední oblast, ve které se bude zobrazovat náhled textu. Událost onclick vzniká, když uživatel klikne myší. V uvozovkách za touto událostí (event) definujeme JavaScriptovou funkci, která se v případě vzniku události zavolá. JavaScriptu se budeme věnovat za chvíli. Nyní vytvoříme Java třídu pro naši stránku.

EditPage.java

public class EditPage extends BasePage {
    private String text;

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

        setDefaultModel(new CompoundPropertyModel(this));

        Form form = new Form("form") {
            @Override
            protected void onSubmit() {
                Note note = new Note();
                note.setText(text);

                NoteDao dao = new NoteDaoImpl();
                dao.saveNote(note);

                setResponsePage(HomePage.class);
            }
        };
        add(form);

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

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

Nezapomeňte na přidání stránky do menu a doplnění resources.

BasePage.java

Link editPageLink = new Link("editPage") {
    @Override
    public void onClick() {
        setResponsePage(EditPage.class);
    }
};
add(editPageLink);

BasePage.html

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

Angličtina

menu.edit=Edit
title.editPage=Edit
text.edit=Edit page
form.textEdit.Required=Text is required!

button.clear=Delete
button.show=Show
button.submit=Submit

button.header=H (header)
button.bold=B (bold)
button.italic=I (italic)
button.paragraph=P (paragraph)

Čeština

menu.edit=Editace
title.editPage=Editace
text.edit=Str\u00E1nka editace
form.textEdit.Required=Text nebyl zad\u00E1n\!

button.clear=Smazat
button.show=Zobrazit
button.submit=Odeslat

button.header=H (nadpis)
button.bold=B (tu\u010Dn\u00E9)
button.italic=I (kurz\u00EDva)
button.paragraph=P (odstavec)

Kromě toho, že stránka vypadá tak, jak bychom očekávali, tak nám funguje i validace a po zadání textu a stisknutí tlačítka "Odeslat" se zadaný text uloží do databáze.

V další lekci, Wicket - JavaScript a CSS, pokračování, vytvoříme JavaScriptový textový editor a dokončíme naši editační stránku.