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/.
WicketApplication.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.
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í.
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
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
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; }
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