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

Cieľom nasledujúcich niekoľkých dielov bude vytvoriť internacionalizované 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.

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.

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 {

}

Upravíme WicketApplication tak, aby metóda getHomePage () vracala našu HomePage.class (import cz.mujweb.homepage.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 /)

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.photospage, 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".

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.photospage).

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

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

Užívateľské hodnotenie:

1 hlasov

vita

Aktivity

Najčastejšie vyhľadávané

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