NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.

Lekce 2 - Wicket - Úprava vygenerovaného projektu

V minulém díle, Wicket - Seznámení a nastavení, jsme nechali Maven, aby nám vygeneroval jednoduchou webovou Wicket aplikaci. Tu nyní upravíme.

Něco o přístupu Wicketu

Wicket přistupuje ke tvorbě jednotlivých webových stránek následujícím způsobem. Statický obsah je vytvořen v HTML. Aktivní a dynamický obsah je vytvořen v Javě. Vytvořený dynamický obsah je vložen do HTML na místo, které se specifikuje v .html souboru. Wicket tedy umožňuje jednoduše tvořit statický web, jednoduše přidat do statického webu dynamičnost, popřípadě vytvořit kompletně dynamický web. Důsledkem tohoto přístupu je to, že každá webová stránka se skládá jak z .html souboru, tak z .java souboru. V .html definujete statické věci a rozložení (layout) a případné umístění dynamických komponent. V .javě vytváříte dynamické komponenty a algoritmy aplikace.

Dalším specifikem je práce Wicketu s daty (modelem). Ve Wicketu vytvoříte komponentu a tuto komponentu svážete s modelem (s daty, které má prezentovat). A více se nestaráte. Když komponenta potřebuje data, má model, kterého se na ně zeptá a dostane je.

Něco o struktuře aplikace

web.xml je Web Application Deployment Descriptor webové aplikace. Je to xml dokument, ve kterém jsou definovány informace o aplikaci, které potřebuje server znát. Jinak řečeno, je tam popsáno, jak nasadit aplikaci na server (servletový kontejner). Soubor (web.xml) musí být umístěn v adresáři /WEB-INF/.

WicketApplica­tion.java je vstupní bod Wicket aplikace. Je zde definována domovská stránka a také umožnuje konfiguraci. Jedná se o třídu dědící ze třídy WebApplication, která dědí ze třídy Application, což je základní třída všech Wicket aplikací.

Obrázky a kaskádové styly jsou umístěny v webapp složce. To je stejné jako u ostatních Java webových projektů. Rozdílem je to, že .html soubory jsou umístěny ve stejném adresáři (package), jako jsou .java soubory a navíc mají jak .java tak .html soubory stejný název. Jinak řečeno, každá webová stránka je určena .java třídou, která dědí z WebPage.class a .html souborem se stejným názvem, jako má .java soubor.

Apache Wicket

Obměna předgenerovaného webu.

Pokud jste se již seznámili se strukturou Wicket webové aplikace, pustíme se tvorby vlastního webu. Nečekejte nic převratného. Vytvoříme si jednoduchý, statický osobní web.

Promažte obsah následujících souborů a ponechte pouze 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 - Vymazat celý obsah. Ponechat pouze prázdný soubor.

logo.png - Smazat.

Nyní máte úplně nejzákladnější kostru Wicket aplikace. Pokud nyní aplikaci nasadíte a zobrazíte si ji v prohlížeči, otevře se vám prázdná stránka. Pokud si necháte zobrazit zdrojový kód stránky v prohlížeči (klávesová zkratka Ctrl-U), získáte následující.

Apache Wicket

Vše je v pořádku, až na titulek okna. Místo textu "Můj Web" se zobrazilo "MĹŻj Web" (tato chyba nemusí být u každého). To značí problém s diakritikou. V tomto případě je v tom Wicket nevinně. Za chybu může výchozí kódování editoru (Eclipse). Řešením je nastavení kódování Eclipse. Window -> Preferences -> General -> Workspace, Other, UTF-8 -> OK

Apache Wicket

Nyní by již mělo být kódování v pořádku.

Pokud se vytváří statický web, mění se pouze .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

Apache Wicket

Sice hezké, ale kvůli statickému webu nemusíme používat Java Web Framework. Ve stránce (v patičce) budeme ještě zobrazovat aktuální čas zobrazení webové stránky.

Nejdříve si vytvoříme model. To je objekt, který poskytuje data, provádí výpočty, a který v našem případě bude na požádání poskytovat čas s přesností na milisekundy. Model ve Wicketu implementuje rozhraní IModel, které poskytuje tyto metody:

  • public void detach()
  • public Object getObject()
  • public void setObject(Object object)

Náš model bude pouze poskytovat přesný čas, a proto využijeme pouze metodu getObject(), ve které nadefinujeme, co má vracet. V našem případě je to čas s přesností na milisekundy. Třídu s modelem si pojmenujeme 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) {
    }
}

Ve třídě HomePage.java vytvoříme Label, což je jednoduchá komponenta zobrazující text. Této komponentě v konstruktoru předáme model. Pokaždé, když se bude komponenta Label vykreslovat, zeptá se modelu na data (zavolá metody 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 patičky přidáme tag elementu s wicket:id, ve kterém budeme chtít zobrazovat čas.

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

Doplníme styly.

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

.right {
    float: right;
}
Apache Wicket

Zkuste několikrát aktulizovat webovou stránku pomocí F5 (nebo klávesu F5 stiskněte a držtet). Čas se pokaždé zaktualizuje.


Přiložený soubor .zip pro 1. a 2. díl tohoto tutoriálu obsahuje kromě zdrojových kódů (složka src a soubor pom.xml) také soubor MujWebZakladni.war. Jedná se o Web Application archív, což je totéž jako .jar, ale používaný pro webové aplikace. Tento soubor stačí umístit do adresáře webapps v Tomcatu a následně Tomcat spustit pomocí startup.bat (popsáno v prvním díle). Po zadání http://localhost:8080/MujWebZakladni/ by se vám měla zobrazit úvodní stránka webové aplikace.

V další lekci, Wicket - HTML dědičnost a odkazy, se podíváme na dědičnost.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 50x (2.78 MB)
Aplikace je včetně zdrojových kódů v jazyce Java

 

Předchozí článek
Wicket - Seznámení a nastavení
Všechny články v sekci
Apache Wicket
Přeskočit článek
(nedoporučujeme)
Wicket - HTML dědičnost a odkazy
Článek pro vás napsal vita
Avatar
Uživatelské hodnocení:
7 hlasů
vita
Aktivity