Lekce 10 - Wicket - JavaScript a CSS, pokračování

Minule, Wicket - JavaScript a CSS, jsme si přidali novou stránku určenou pro vytváření příspěvků.

Z předchozí lekce nám zbývá vytvořit textový editor. Pro jeho tvorbu použijeme JavaScript.

editor.js

function TextEditor(textEditId, textViewId) {
    // Edit area (text area)
    var textEditElement = document.getElementById(textEditId);
    // Preview area (div)
    var textViewElement = document.getElementById(textViewId);

    console.log(textEditElement);
    console.log(textViewElement);

    var START_PREFIX = "<";
    var START_SUFFIX = ">";
    var END_PREFIX = "</";
    var END_SUFFIX = ">";

    // Inserts tag(s) into the edit area
    this.modifySelection = function (tag) {
        var startTag = START_PREFIX + tag.toUpperCase() + START_SUFFIX;
        var endTag = END_PREFIX + tag.toUpperCase() + END_SUFFIX;

        // Get the whole text inthe text area.
        var text = textEditElement.value;

        var begin = text.substring(0, textEditElement.selectionStart);
        var selection = text.substring(textEditElement.selectionStart, textEditElement.selectionEnd);
        console.log(selection);
        var end = text.substring(textEditElement.selectionEnd);
        textEditElement.value = begin + startTag + selection + endTag + end;
    };

    // Replaces tag in edit area for relevant html tags and shows the text in view area
    this.viewText = function () {
        console.log("viewText function");
        var text = textEditElement.value;

        textViewElement.innerHTML = text;
        console.log(text);
    };

    // Clears the edit area
    this.clearEditArea = function () {
        textEditElement.value = "";
    };
}

JavaScript umožňuje programovat objektově. Výše uvedený kód je vlastně jedna jediná funkce, která představuje konstruktor objektu TextEditor. Tato funkce (název je dle zvyklostí napsán velkým počátečním písmenem, protože je to konstruktor) přijímá dva parametry. V Javě bychom řekli, že je to parametrický konstruktor.

Deklarace a přiřazení hodnoty do proměnné (v rámci objektu je to privátní proměnná).

var textEditElement = document.getElementById(textEditId);

Nalezení elementu na stránce podle id.

document.getElementById(textEditId);

Výpis do konzole (z testovacích důvodů).

console.log("text");

Vytvoření soukromé (private) konstanty (dle zvyku se píše velkými písmeny).

var START_PREFIX = "<";

Vytvoření veřejné metody (v Javě by to byla public metoda) s jedním parametrem.

this.modifySelection = function (tag) { … }

Element <textarea> nabízí několik užitečných vlastností. Zde je jednoduchá html stránka s JavaScriptovou funkcí, která to ukazuje. Kód si okopírujte, vložte do souboru s příponou .html, otevřete v prohlížeči a stiskněte tlačítko F12. Tím se vám zpřístupní nástroje pro vývoj. Klikněte na záložku "Console". Zde se vám budou zobrazovat výpisy po stisknutí tlačítka "Show" v html stránce.

<html>
    <head>
        <title>Text area</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <textarea id="ta" cols="40" rows="10"></textarea><br/>
        <button type="button" onclick="show()">Show</button>

        <script>
            function show() {
                // získání elementu s id 'ta'
                var ta = document.getElementById("ta");

                // získání hodnoty z text area
                console.log("Hodnota: " + ta.value);

                // získání indexu počátku výběru.
                console.log("Začátek výběru: " + ta.selectionStart);

                // získání indexu konce výběru.
                console.log("Konec výběru: " + ta.selectionEnd);
            }

        </script>
    </body>
</html>

Tuto funkcionalitu využívá naše metoda modifySelection(). Zjistí si začátek a konec výběru v text area a na jejich místo dosadí počáteční a koncový html tag. Metoda viewText() pouze vezme text z elementu text area a vloží jej do elementu div s id textView. Díky tomu se text zobrazí.

Pro náš textový editor vytvoříme i styly. Ty umístíme do vlastního souboru a do stejného balíčku jako ostatní soubory vztahující se k editační stránce.

editor.css

input {
    font-family: Sans-Serif;
    font-size: smaller;
    border: 1px solid black;
    padding: 3px 5px;
    background-color: white;
    border-radius: 5px;
}

input:hover {
    border-color: #999;
    color: #999;
}

Poslední věcí, která nám zbývá, je načíst (vložit kód) editor.js (soubor s JavaScriptem představujícím náš textový editor), editor.css (soubor se styly pro textový editor) do editační stránky a vytvořit proměnnou, která bude představovat náš textový editor.

EditPage.java

Vytvoření ResourceReference na naše dva soubory.

private static final JavaScriptResourceReference EDITOR_JS = new JavaScriptResourceReference(EditPage.class, "editor.js");
private static final CssResourceReference EDITOR_CSS = new CssResourceReference(EditPage.class, "editor.css");

Vlastní přidání do <head> sekce.

@Override
public void renderHead(IHeaderResponse response) {
    response.render(JavaScriptReferenceHeaderItem.forReference(EDITOR_JS));
    response.render(CssReferenceHeaderItem.forReference(EDITOR_CSS));

    // Create global JavaScript variable textEditor that represents TextEditor object.
    response.render(OnDomReadyHeaderItem.forScript("window.textEditor = new TextEditor(\"textEdit\", \"textView\")"));
}

Pokud si zobrazíte zdrojový stránky, uvidíte, že do sekce <head> byly přidány naše dva soubory.

<script type="text/javascript" src="../resource/cz.mujweb.editpage.EditPage/editor-ver-1431603444443.js"></script>
<link rel="stylesheet" type="text/css" href="../resource/cz.mujweb.editpage.EditPage/editor-ver-1431603444443.css" />

Po načtení celé stránky (onDomReady) vytvoří novou globální proměnnou s názvem textEditor. Na tuto proměnnou (objekt) se pak odkazujeme v našem .html (např. onclick="textEditor.viewText();")

response.render(OnDomReadyHeaderItem.forScript("window.textEditor = new TextEditor(\"textEdit\", \"textView\")"));

Tak.. Máme vytvořený jednoduchý textový editor.. Možná bychom ale chtěli omezit, kdo může nebo nemůže přidávat příspěvky.

A přesně to bude tématem příštího článku, Wicket - Přihlašování.

Článek pro vás napsal vita

Uživatelské hodnocení:

5 hlasů

vita

Aktivity

Nejčastěji vyhledáváné

Lekce 10 - Wicket - JavaScript a CSS, pokračování