Lekce 3 - Wicket - HTML dědičnost a odkazy

V minulé lekci, Wicket - Úprava vygenerovaného projektu, jsme si řekli něco více o frameworku Wicket a upravili si web, který jsme generovali pomocí Marven.

Cílem následujících několika dílů bude vytvořit internacionalizovaný a lokalizovaný (angličtina, čeština) několikastránkový, osobní web s formulářem pro komentáře, které se budou ukládat do databáze.

Vytvořte si nový Maven projekt a importujte si jej do Eclipse. Pro připomenutí: Vytvořte novou složku, nechte na webu wicket.apache.org v sekci quickstart vygenerovat řetězec pro příkazovou řádku, z něj si nechte vygenerovat Maven projekt a ten importujte od Eclipse (můžete jej importovat do stejného workspace jako máte předchozí projekt). Podrobny postup naleznete v první lekci.

Já jsem projekt nazval MujWebStredni a importoval jsem jej do stejného workspace jako předchozí projekt.

Začneme od píky. Z vygenerovaného projektu zcela smažte HomePage.java, HomePage.html a logo.png a ze souboru se styly (style.css) vše odmažte. Eclipse sice hlásí chybu ve třídě WicketApplication (chybí jí HomePage.class), ale to vyřešíme později.

Náš web bude obsahovat tři webové stránky: Domovskou stránku, Obrázky, Kontakt. Tyto stránky budou mít stejný layout (rozvržení). Asi uznáte, že je zbytečné definoval stejný layout na třech místech a v případě jeho změny to pak na třech různých místem měnit.. Zde nám pomůže Wicket a jeho html dědičnost. Ve zkratce jde o to, že vytvoříme .java a .html soubory s názvy např. BasePage.java a BasePage.html. V BasePage.html nadefinujeme layout (kde bude header, content, footer, atd.) a další webové stránky HomePage.java, PhotosPage.java, ContactPage.java budou z BasePage.java dědit.

Vytvoříme nový package např. cz.mujweb.basepage a v něm BasePage.java a BasePage.html. Webová stránka ve Wicketu musí být potomkem třídy WebPage.

BasePage.java

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

public class BasePage extends WebPage {

    public BasePage() {

    }
}

BasePage.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titulek</title>
</head>
<body>
    <div id="body">
        <div id="header">
            <h1>Header</h1>
        </div>

        <div id="content">
            <h1>Content</h1>
        </div>

        <div id="footer">
            <h1>Footer</h1>
        </div>
    </div>
</body>
</html>

Dále vytvoříme další package např. cz.mujweb.homepage a v něm třídu HomePage.java, která bude dědit z BasePage.java. HTML soubor s názvem HomePage.html zatím nevytvářejte.

HomePage.java

import cz.mujweb.basepage.BasePage;

public class HomePage extends BasePage {

}

Upravíme WicketApplication tak, aby metoda getHomePage() vracela naši HomePage.class (import cz.mujweb.homepage.HomePage;). Zároveň stejně můžete opravit i TestHomePage.java v src/test/java/cz/mujweb/, aby byl projekt bez chyb. Projekt nasaďte a zobrazte si url projektu (v mém případě http://localhost:8080/MujWebStredni/)

HomePage sice nemá příslušný .html soubor, ale třída ze které dědí (BasePage) ano. Proto se použije .html soubor předka.

Nyní vytvoříme další webovou stránku PhotosPage.java v novém balíčku cz.mujweb.photospage, která bude opět dědit z třídy BasePage. Příslušný .html soubor opět vytvářet nebudeme.

PhotosPage.java

import cz.mujweb.basepage.BasePage;

public class PhotosPage extends BasePage {

}

Nyní nám ještě zbývá vytvořit menu, pomocí kterého se budeme moci mezi těmito stránkami pohybovat. Menu bude stejné pro všechny stránky, takže jej vytvoříme v BasePage.html a BasePage.java. Způsobů jak vytvořit odkaz ve Wicketu je několik. Nejjednodušším způsobem je vytvoření odkazu na externí web. Do .html se přidá tag a se src. Jen klasické html, nic víc.

<a href="http://www.seznam.cz">seznam</a>

Pro navigaci mezi webovými stránkami našeho projektu použijeme komponenty a to komponenty typu Link. Wicket je komponentově orientovaný framework. Web se tvoří pomocí komponent což jsou Java třídy představující určitou funkcionalitu stránky. Wicket nabízí např. Link (odkaz), Form (formulář), Button (tlačítko), TextField (textové pole), CheckBox (zaškrtávací políčko), atd. Tyto komponenty se umisťují na místo specifikované v .html a to pomocí html tagu, který obsahuje atribut wicket:id. Více si ukážeme na následujícím přikladu, kdy vytvoříme navigační menu.

V konstruktoru třídy BasePage vytvoříme dvě komponenty typu Link a ty přidáme pomocí metody add() do stránky. Každá komponenta musí mít ID. V .html se pak toto ID použije pro vložení komponenty na požadované místo.

BasePage.java

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.link.Link;

import cz.mujweb.homepage.HomePage;
import cz.mujweb.photospage.PhotosPage;

public class BasePage extends WebPage {

    public BasePage() {
        Link homePageLink = new Link("homePage") {
            @Override
            public void onClick() {
                setResponsePage(HomePage.class);
            }
        };
        add(homePageLink);

        Link photosPageLink = new Link("photosPage") {
            @Override
            public void onClick() {
                setResponsePage(PhotosPage.class);
            }
        };
        add(photosPageLink);
    }
}

BasePage.html

<div id="content">
    <div id="menu">
        <ul>
            <li><a href="#" wicket:id="homePage">domů</a></li>
            <li><a href="#" wicket:id="photosPage">fotky</a></li>
        </ul>
    </div>

    <h1>Content</h1>
</div>

Na místo tagu a s atributem wicket:id="homePage" se vloží komponenta Link s id "homePage". Obdobné je to s Link s ID "photosPage", která se vloží na místo tagu a s wicket:id="photosPage".

Vzhledem k tomu, že jak stránka HomePage tak stránka PhotosPage nemají vlastní .html a tím pádem používají zděděný .html, vypadají obě stránky stejně. Je na čase to změnit. V odpovídajích balíčcích vytvoříme odpovídající .html (HomePage.html v cz.mujweb.homepage a PhotosPage.html v cz.mujweb.photospage).

Pokud nyní projekt nasadíme a pokusíme se jej zobrazit v prohlížeči, dostaneme následující chybu.

Last cause: The component(s) below failed to render.
Possible reasons could be that:
1) you have added a component in code but forgot to reference it in the markup (thus the component will never be rendered),
2) if your components were added in a parent container then make sure the markup for the child container includes them in <wicket:extend>.
1. [Link [Component id = homePage]]
2. [Link [Component id = photosPage]]

Problém je v tom, že máme .html soubor pro BasePage a .html soubor pro HomePage. HomePage dědí z BasePage. Jak ale spojit ty dva .html soubory?

Když třídy HomePage.class a PhotosPage.class neměly odpovídající .html soubor, zdědili .html z rodičovské třídy. Čili obě webové stránky vypadaly zcela stejně. My ale chceme pro každou z nich určit specifický obsah. Jak na to? Zde přichází na řadu speciální wicket tagy <wicket:child></wicket:child> (popřípadě <wicket.child/> a <wicket:extend></wicket:extend>. Pomocí tagu wicket:child můžeme určit v .html rodiče, kam se bude vkládat obsah z .html potomka. My chceme vkládat obsah potomků do části content, hned pod menu a nadpis.

V .html potomků je pak třeba umístit wicket:extend tag a do něj specifický obsah.

BasePage.html

<div id="content">
    <div id="menu">
        <ul>
            <li><a href="#" wicket:id="homePage">domů</a></li>
            <li><a href="#" wicket:id="photosPage">fotky</a></li>
        </ul>
    </div>

    <h1>Content</h1>
    <wicket:child/>
</div>

HomePage.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<wicket:extend>
    <h2>Domovská stránka</h2>
</wicket:extend>
</body>
</html>

PhotosPage.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<wicket:extend>
    <h2>Fotky</h2>
</wicket:extend>
</body>
</html>

Můžeme nasadit a vyzkoušet.

V následující lekci, Wicket - Titulek, styly, obrázky, si ukážeme, jak ve Wicketu používat kaskádové styly a jak pracovat s obrázky.

Článek pro vás napsal vita

Uživatelské hodnocení:

7 hlasů

vita

Aktivity