2. diel - Wicket - Úprava vygenerovaného projektu

V minulom diele sme nechali Maven, aby nám vygeneroval jednoduchú webovú Wicket aplikáciu. Tú teraz upravíme.

Niečo o prístupe wicket

Wicket pristupuje ku tvorbe jednotlivých webových stránok nasledujúcim spôsobom. Statický obsah je vytvorený v HTML. Aktívne a dynamický obsah je vytvorený v Jave. Vytvorený dynamický obsah je vložený do HTML na miesto, ktoré sa špecifikuje v .html súboru. Wicket teda umožňuje jednoducho tvoriť statický web, jednoducho pridať do statického webu dynamickosť, prípadne vytvoriť kompletne dynamický web. Dôsledkom tohto prístupu je to, že každá webová stránka sa skladá tak z .html súboru, tak z .java súboru. V .html definujete statické veci a rozloženie (layout) a prípadné umiestnenie dynamických komponentov. V .java vytvárate dynamické komponenty a algoritmy aplikácie.

Ďalším špecifikom je práca wicketu s dátami (modelom). Vo wicketu vytvoríte komponent a túto komponent zviažete s modelom (s dátami, ktoré má prezentovať). A viac sa nestaráte. Keď komponenta potrebuje dáta, má model, ktorého sa na ne spýta a dostane ich.

Niečo o štruktúre aplikácie

web.xml je Web Application Deployment Descriptor webové aplikácie. Je to xml dokument, v ktorom sú definované informácie o aplikácii, ktoré potrebuje server poznať. Inak povedané, je tam popísané, ako nasadiť aplikáciu na server (servletový kontajner). Súbor (web.xml) musí byť umiestnený v adresári / WEB-INF /.

WicketApplication.java je vstupný bod Wicket aplikácie. Je tu definovaná domovská stránka a tiež umožnuje konfiguráciu. Jedná sa o triedu dedičov z triedy WebApplication, ktorá dedí z triedy Application, čo je základná trieda všetkých Wicket aplikácií.

Obrázky a kaskádové štýly sú umiestnené v webapp zložke. To je rovnaké ako u ostatných Java webových projektov. Rozdielom je to, že .html súbory sú umiestnené v rovnakom adresári (package), ako sú .java súbory a navyše majú ako .java tak .html súbory rovnaký názov. Inak povedané, každá webová stránka je určená .java triedou, ktorá dedí z WebPage.class a .html súborom s rovnakým názvom, ako má .java súbor.

Obmena předgenerovaného webu.

Ak ste sa už zoznámili so štruktúrou Wicket webové aplikácie, pustíme sa tvorby vlastného webu. Nečakajte nič prevratné. Vytvoríme si jednoduchý, statický osobné web.

Premažte obsah nasledujúcich súborov a ponechajte iba uvedené.

HomePage.java

public class HomePage extends WebPage {

    public HomePage() {

    }
}

HomePage.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Můj Web</title>
        <link rel="stylesheet" href="style.css" type="text/css"/>
    </head>
    <body>

    </body>
</html>

style.css - Vymazať celý obsah. Ponechať iba prázdny súbor.

logo.png - Zmazať.

Teraz máte úplne najzákladnejšie kostru Wicket aplikácie. Ak teraz aplikáciu nasadíte a zobrazíte si ju v prehliadači, otvorí sa vám prázdna stránka. Ak si necháte zobraziť zdrojový kód stránky v prehliadači (klávesová skratka Ctrl-U), získate nasledujúce.

Všetko je v poriadku, až na titulok okna. Namiesto textu "Môj Web" sa zobrazilo "môj Web" (táto chyba nemusí byť u každého). To značí problém s diakritikou. V tomto prípade je v tom Wicket nevinne. Za chybu môže predvolené kódovanie editora (Eclipse). Riešením je nastavenie kódovania Eclipse. Window -> Preferences -> General -> Workspace, Other, UTF-8 -> OK

Teraz by už malo byť kódovanie v poriadku.

Ak sa vytvára statický web, mení sa len .html a .css.

HomePage.html

<body>
    <div id="content">
        <div id="header">
            <h1>Můj Web</h1>
        </div>

        <div class="message">
            <h2>Trocha kultury neuškodí</h2>
            <p>
                <span class="date">09.11.2014</span>
            </p>
            <p>Musím přiznat, že jsem fanouškem animovaných filmů, a proto
                jsem se nemohl dočkat pokračování filmu "Jak vycvičit draka". Dvojka
                je konečně v kinech a po shlédnutí mohu říci: "Dobrý".</p>
        </div>

        <div class="message">
            <h2>Výlet na Broumovsko</h2>
            <p>
                <span class="date">28.10.2014</span>
            </p>
            <p>Podzim je již v plném proudu a vzhledem k tomu, že počasí se
                umoudřilo, rozhodl jsem se pro krátký výlet na Broumovsko. Barevné
                listí, skály, vítr a ostré podzimní slunce. Výborný relax.</p>
        </div>

        <div id="footer">

        </div>
    </div>
</body>

style.css

body {
  font-family: Sans-Serif;
  margin: 0px;
  padding: 0px;
}


#content {
    width: 60%;
    min-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.message {
    border-bottom: 1px solid black;
}

.date {
    font-size: smaller;
    font-style: italic;
}

h1 {
    font-size: 120%;
    border-bottom: 2px solid black;
}

h2 {
    font-size: 110%
}

#footer {
    border-top: 2px solid black;
}

Uložte a nasaďte

Síce pekné, ale kvôli statickému webe nemusíme používať Java Web Framework. V stránke (v pätičke) budeme ešte zobrazovať aktuálny čas zobrazenie webovej stránky.

Najskôr si vytvoríme model. To je objekt, ktorý poskytuje dáta, vykonáva výpočty, a ktorý v našom prípade bude na požiadanie poskytovať čas s presnosťou na milisekundy. Model vo wicketu implementuje rozhranie IModel, ktoré poskytuje tieto metódy:

public void detach ()
public Object GetObject ()
public void setObject (Object object)

Náš model bude len poskytovať presný čas, a preto využijeme iba metódu GetObject (), v ktorej zadefinujeme, čo má vracať. V našom prípade je to čas s presnosťou na milisekundy. Triedu s modelom si pomenujeme TimeModel

TimeModel.java

import java.text.SimpleDateFormat;
import java.util.Date;

import org.apache.wicket.model.IModel;

public class TimeModel implements IModel {

    @Override
    public void detach() {
    }

    @Override
    public Object getObject() {
        Date date = new Date();
        SimpleDateFormat sdf = new SimpleDateFormat("dd.MM.yyyy HH:mm:ss:SSS");
        return sdf.format(date);
    }

    @Override
    public void setObject(Object object) {
    }
}

V triede HomePage.java vytvoríme Label, čo je jednoduchá komponenta zobrazujúci text. Tejto komponente v konštruktory odovzdáme model. Zakaždým, keď sa bude komponent Label vykresľovať, spýta sa modelu na dáta (zavolá metódy GetObject ()).

HomePage.java

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;

public class HomePage extends WebPage {

    public HomePage() {

        Label currentTime = new Label("time", new TimeModel());
        add(currentTime);
    }
}

Do .html pätičky pridáme tag elementu s wicket: id, v ktorom budeme chcieť zobrazovať čas.

<div id="footer">
    <p class="right">Čas zobrazení stránky: <span wicket:id="time"></span></p>
</div>

Doplníme štýly.

#footer p {
    font-size: smaller;
    font-style: italic;
}

.right {
    float: right;
}

Skúste niekoľkokrát aktulizovat webovú stránku pomocou F5 (alebo klávesu F5 stlačte a držtet). Čas sa zakaždým zaktualizuje.

Priložený súbor .zip pre 1. a 2. diel tohto tutoriálu obsahuje okrem zdrojových kódov (zložka src a súbor pom.xml) tiež súbor MujWebZakladni.war. Jedná sa o Web Application archív, čo je to isté ako .jar, ale používaný pre webové aplikácie. Tento súbor stačí umiestniť do adresára webapps v Tomcatu a následne Tomcat spustiť pomocou startup.bat (popísané v prvom diele). Po zadaní http: // localhost: 8080 / MujWebZakladni / by sa vám mala zobraziť úvodná stránka webové aplikácie.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 51x (2.78 MB)
Aplikácia je vrátane zdrojových kódov v jazyku Java

Článok pre vás napísal vita

Užívateľské hodnotenie:

1 hlasov

vita

Aktivity

Najčastejšie vyhľadávané

2. diel - Wicket - Úprava vygenerovaného projektu

Niečo o prístupe wicket

Niečo o štruktúre aplikácie

Obmena předgenerovaného webu.

Stiahnuť