9. díl - Wicket - JavaScript a CSS

Java Enterprise Edition Wicket Wicket - JavaScript a CSS

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 vytvoříme JavaScriptový textový editor a dokončíme naši editační stránku.


 

  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

 

 

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