Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

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

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.

Apache Wicket

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.vi­ewText ();")

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

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.


 

Predchádzajúci článok
Wicket - JavaScript a CSS
Všetky články v sekcii
Apache Wicket
Preskočiť článok
(neodporúčame)
Wicket - Prihlasovanie
Článok pre vás napísal vita
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
vita
Aktivity