10. diel - Wicket - JavaScript a CSS, pokračovanie

Z predchádzajúcej lekcie nám zostáva vytvoriť textový editor. Pre 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 programovať objektovo. Vyššie uvedený kód je vlastne jedna jediná funkcia, ktorá predstavuje konštruktor objektu texteditor. Táto funkcia (názov je podľa zvyklostí napísaný veľkým začiatočným písmenom, pretože je to konštruktor) prijíma dva parametre. V Jave by sme povedali, že je to parametrický konštruktor.

Deklarácia a priradenie hodnoty do premennej (v rámci objektu je to privátne premenná).

var textEditElement = document.getElementById(textEditId);

Nájdenie elementu na stránke podľa id.

document.getElementById(textEditId);

Výpis do konzoly (z testovacích dôvodov).

console.log("text");

Vytvorenie súkromnej (private) konštanty (podľa zvyku sa píše veľkými písmenami).

var START_PREFIX = "<";

Vytvorenie verejnej metódy (v Jave by to bola public metóda) s jedným parametrom.

this.modifySelection = function (tag) { … }

Element ponúka niekoľko užitočných vlastností. Tu je jednoduchá html stránka s javascriptové funkciou, ktorá to ukazuje. Kód si skopírujte, vložte do súboru s príponou .html, otvorte v prehliadači a stlačte tlačidlo F12. Tým sa vám sprístupní nástroje pre vývoj. Kliknite na záložku "Console". Tu sa vám budú zobrazovať výpisy po stlačení tlačidla "Show" v html stránke.

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

Túto funkcionalitu využíva naša metóda modifySelection (). Zistí si začiatok a koniec výberu v text area a na ich miesto dosadí počiatočný a koncový html tag. Metóda viewText () len vezme text z elementu text area a vloží ho do elementu div s id textView. Vďaka tomu sa text zobrazí.

Pre náš textový editor vytvoríme aj štýly. Tie umiestnime do vlastného súboru a do rovnakého balíčka ako ostatné súbory vzťahujúce sa k editačné stránke.

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

Poslednou vecou, ktorá nám zostáva, je načítať (vložiť kód) editor.js (súbor s JavaScriptom predstavujúcim náš textový editor), editor.css (súbor sa štýly pre textový editor) do editačné stránky a vytvoriť premennú, ktorá bude predstavovať náš textový editor .

EditPage.java

Vytvorenie ResourceReference na naše dva súbory.

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é pridanie do

@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\")"));
}

Ak si zobrazíte zdrojový stránky, uvidíte, že do sekcie

<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čítaní celej stránky (onDomReady) vytvorí novú globálnu premennú s názvom texteditor. Na túto premennú (objekt) sa potom odkazujeme v našom .html (napr. Onclick = "textEditor.viewText ();")

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

Tak .. Máme vytvorený jednoduchý textový editor .. Možno by sme ale chceli obmedziť, kto môže alebo nemôže pridávať príspevky. A presne to bude témou budúceho článku.

Č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é

10. diel - Wicket - JavaScript a CSS, pokračovanie