9. diel - Wicket - JavaScript a CSS

Písanie príspevkov do .html kódu stránky nie je práve pohodlné. Preto si v tejto lekcii vytvoríme editačné stránku, ktorá bude obsahovať textový editor pre napísanie príspevku a tlačidlo pre uloženie príspevku do databázy, odkiaľ sa potom príspevky budú načítať a zobrazovať na úvodnej stránke.

Najskôr si pripravíme databázu a objekty a metódy pre ukladanie a načítanie príspevkov.

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();
        }
    }
}

Vytvorenie tabuľky v databáze.

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

Všetky potrebné súbory pre novú editačné stránku umiestnime do nového balíčka (cz.mujweb.edit­page).

Začneme vytvorením .html pre našu 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>

Doteraz sme používali pre lokalizáciu textu v .html tag <wicket: message key = "key" />. Tento spôsob ale nemôžeme použiť u tagu , kde sa hodnota textu zadáva pomocou atribútu value. Aj pre tento prípad má Wicket riešenie. Používa sa atribút wicket: message s hodnotou "value: kľúč".

Stránka sa skladá z formulára, ktorý obsahuje hornú lištu so štyrmi tlačidlami pre editáciu textu, oblasť (text area) pre písanie textu a spodnú lištu s tlačidlami pre odoslanie formulára, zmazanie obsahu a náhľad textu a posledná oblasť, v ktorej sa bude zobrazovať náhľad textu . Udalosť onclick vzniká, keď používateľ klikne myšou. V úvodzovkách za touto udalosťou (event) definujeme javascriptové funkciu, ktorá sa v prípade vzniku udalosti zavolá. JavaScriptu sa budeme venovať za chvíľu. Teraz vytvoríme Java triedu pre našu 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"));
    }
}

Nezabudnite na pridanie stránky do menu a doplnení 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)

Okrem toho, že stránka vyzerá tak, ako by sme očakávali, tak nám funguje aj validácia a po zadaní textu a stlačení tlačidla "Odoslať" sa zadaný text uloží do databázy.

V ďalšej lekcii vytvoríme javascriptový textový editor a dokončíme našu editačné stránku.