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í.

3. diel - Wicket - HTML dedičnosť a odkazy

Cieľom nasledujúcich niekoľkých dielov bude vytvoriť internacionali­zované a lokalizovaný (angličtina, Čeština) niekoľkostránkový, osobné web s formulárom pre komentáre, ktoré sa budú ukladať do databázy.

Vytvorte si nový Maven projekt a importujte si ho do Eclipse. Pre pripomenutie: Vytvorte novú zložku, nechajte na webe wicket.apache.org v sekcii QUICKSTART vygenerovať reťazec pre príkazový riadok, z neho si nechajte vygenerovať Maven projekt a ten importujte od Eclipse (môžete ho importovať do rovnakého workspace ako máte predchádzajúce projekt). Podrobný postup nájdete v prvej lekcii.

Ja som projekt nazval MujWebStredni a importoval som ho do rovnakého workspace ako predchádzajúci projekt.

Apache Wicket

Začneme od piky. Z vygenerovaného projektu úplne zmažte HomePage.java, HomePage.html a logo.png a zo súboru so štýlmi (style.css) všetko odmazať. Eclipse síce hlási chybu v triede WicketApplication (chýba jej HomePage.class), ale to vyriešime neskôr.

Apache Wicket

Náš web bude obsahovať tri webové stránky: Domovskú stránku, Obrázky, Kontakt. Tieto stránky budú mať rovnaký layout (rozvrhnutie). Asi uznáte, že je zbytočné definoval rovnaký layout na troch miestach a v prípade jeho zmeny to potom na troch rôznych miestom meniť .. Tu nám pomôže Wicket a jeho html dedičnosť. V skratke ide o to, že vytvoríme .java a .html súbory s názvami napr. BasePage.java a BasePage.html. V BasePage.html nadefinujeme layout (kde bude header, content, footer, atď.) A ďalšie webové stránky HomePage.java, PhotosPage.java, ContactPage.java budú z BasePage.java dediť.

Vytvoríme nový package napr. Cz.mujweb.basepage a v ňom BasePage.java a BasePage.html. Webová stránka vo wicketu musí byť potomkom triedy 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>

Ďalej vytvoríme ďalšie package napr. Cz.mujweb.homepage a v ňom triedu HomePage.java, ktorá bude dediť z BasePage.java. HTML súbor s názvom HomePage.html zatiaľ nevytvárajte.

HomePage.java

import cz.mujweb.basepage.BasePage;

public class HomePage extends BasePage {

}
Apache Wicket

Upravíme WicketApplication tak, aby metóda getHomePage () vracala našu HomePage.class (import cz.mujweb.home­page.HomePage;). Zároveň rovnako môžete opraviť aj TestHomePage.java v src / test / java / cz / mujweb /, aby bol projekt bez chýb. Projekt nasaďte a prezrite si url projektu (v mojom prípade http: // localhost: 8080 / MujWebStredni /)

Apache Wicket

HomePage síce nemá príslušný .html súbor, ale trieda z ktorej dedia (BasePage) áno. Preto sa použije .html súbor predka.

Teraz vytvoríme ďalšiu webovú stránku PhotosPage.java v novom balíčku cz.mujweb.pho­tospage, ktorá bude opäť dediť z triedy BasePage. Príslušný .html súbor opäť vytvárať nebudeme.

PhotosPage.java

import cz.mujweb.basepage.BasePage;

public class PhotosPage extends BasePage {

}

Teraz nám ešte zostáva vytvoriť menu, pomocou ktorého sa budeme môcť medzi týmito stránkami pohybovať. Menu bude rovnaké pre všetky stránky, takže ho vytvoríme v BasePage.html a BasePage.java. Spôsobov ako vytvoriť odkaz vo wicket je niekoľko. Najjednoduchším spôsobom je vytvorenie odkazu na externý web. Do .html sa pridá tag a so src. Len klasické html, nič viac.

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

Pre navigáciu medzi webovými stránkami nášho projektu použijeme komponenty a to komponenty typu Link. Wicket je komponentová orientovaný framework. Web sa tvorí pomocou komponentov čo sú Java triedy predstavujúce určitú funkcionalitu stránky. Wicket ponúka napr. Link (odkaz), Form (formulár), Button (tlačidlo), TextField (textové pole), checkbox (zaškrtávacie políčko), atď. Tieto komponenty sa umiestňujú na miesto špecifikované v .html a to pomocou html tagu, ktorý obsahuje atribút wicket: id. Viac si ukážeme na nasledujúcom príklade, kedy vytvoríme navigačné menu.

V konstruktoru triedy BasePage vytvoríme dve komponenty typu Link a tie pridáme pomocou metódy add () do stránky. Každý komponent musí mať ID. V .html sa potom toto ID použije pre vloženie komponenty na požadované miesto.

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 miesto tagu as atribútom wicket: id = "homePage" sa vloží komponenta Link s id "homePage". Obdobné je to s Link s ID "photosPage", ktorá sa vloží na miesto tagu as wicket: id = "photosPage".

Apache Wicket

Vzhľadom k tomu, že ako stránka HomePage tak stránka PhotosPage nemajú vlastný .html a tým pádom používajú zdedený .html, vyzerajú obe stránky rovnako. Je na čase to zmeniť. V odpovídajích balíčkoch vytvoríme zodpovedajúce .html (HomePage.html v cz.mujweb.homepage a PhotosPage.html v cz.mujweb.pho­tospage).

Apache Wicket

Ak teraz projekt nasadíme a pokúsime sa ho zobraziť v prehliadači, dostaneme nasledujúce 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 súbor pre BasePage a .html súbor pre HomePage. HomePage dedí z BasePage. Ako ale spojiť tie dva .html súbory?

Keď triedy HomePage.class a PhotosPage.class nemali zodpovedajúce .html súbor, zdedili .html z rodičovskej triedy. Čiže obe webové stránky vyzerali úplne rovnako. My ale chceme pre každú z nich určiť špecifický obsah. Ako na to? Tu prichádza na rad špeciálne wicket tagy <wicket: child> </ wicket: child> (prípadne <wicket.child /> a <wicket: extend> </ wicket: extend>. Pomocou tagu wicket: child môžeme určiť v .html rodičia , kam sa bude vkladať obsah z .html potomka. My chceme vkladať obsah potomkov do časti content, hneď pod menu a nadpis.

V .html potomkov je potom potrebné umiestniť wicket: extend tag a doň špecifický 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 nasadiť a vyskúšať.

Apache Wicket
Apache Wicket

 

Predchádzajúci článok
Wicket - Úprava vygenerovaného projektu
Všetky články v sekcii
Apache Wicket
Preskočiť článok
(neodporúčame)
Wicket - Titulok, štýly, obrázky
Článok pre vás napísal vita
Avatar
Užívateľské hodnotenie:
1 hlasov
vita
Aktivity