Lekce 4 - Wicket - Titulek, styly, obrázky

V předchozím díle, Wicket - HTML dědičnost a odkazy, jsme skončili sice s funkční, ale ne příliš hezkou, webovou aplikací.

Nejdříve se zaměříme na titulek stránky. Ten je napevno nastaven ve třídě BasePage v části head.

<head>
<meta charset="UTF-8">
<title>Titulek</title>
</head>

Tím pádem se zobrazuje jak pro HomePage, tak pro PhotosPage. Ideální by ale bylo mít titulek vztahující se k zobrazené stránce.

Pokud bychom změnili titulek např. v HomePage.html, k žádné změně v zobrazení popisku by nedošlo. HomePage dědí z BasePage a na místo v BasePage.html určené tagem <wicket:child/> se vloží pouze ta část .html souboru potomka uvedená mezi tagy <wicket:extend> a </wicket:extend>. Nic víc.

Na to se hodí komponenta Label, která se používá pro vkládání textu do html. V .html do tagu přidáme atribut wicket:id="title" a v .java vytvoříme Label s id "title" a druhým parametrem modelem a vložíme jej do stránky pomocí add(). Tyto změny je potřeba provést v BasePage. Jak ale do BasePage.class dostat řetězec z HomePage.class a PhotosPage.class? Pomocí Javy..

BasePage.class pozměníme na abstract. Přidáme do ní abstraktní metodu např. getTitle(). Jelikož je to abstraktní metoda, třídy, které dědí z BasePage.class, ji budou nuceny implementovat. Tato metoda implementována v potomcích bude vracet titulek specifický pro danou stránku. Dále ještě v konstruktoru BasePage.class vytvoříme Label a předáme mu řetězec reprezentující titulek. Jen drobné upozornění - jedná se o org.apache.wicket.markup.html.basic.Label a ne o java.awt.Label. To platí pro všechny komponenty. Pozor na automatické doplňování importů v IDE.

Model představuje objekt, který poskytuje komponentě data. Můžeme si sice napsat vlastní modely, ale pro nejčastější situace má Wicket již modely připravené. Velmi často potřebujeme zobrazit nějaký statický text. Model pro vracení textu vlastně používá pouze metodu getObject(), která vždy vrací stejný řetězec. Takovýto model je již ve Wicketu předpřipravený. Stačí napsat new Model("retězec") a máme model hotov.

BasePage.java

public abstract 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);

        Label titleLB = new Label("title", new Model(getTitle()));
        add(titleLB);
    }

    public abstract String getTitle();
}

BasePage.html

<head>
<meta charset="UTF-8">
<title wicket:id="title"></title>
<link >
</head>

HomePage.java

public class HomePage extends BasePage {

    public HomePage() {

    }

    @Override
    public String getTitle() {
        return "Domovská stránka";
    }
}

PhotosPage.java

public class PhotosPage extends BasePage {

    public PhotosPage() {

    }

    @Override
    public String getTitle() {
        return "Fotky";
    }
}

Jako další krok změníme BasePage.html. Do nadpisu místo "Header" napíšeme "Můj Web" a nadpisy s texty "Content" a "Footer" odstraníme.

Také přidáme kaskádové styly.

BasePage.html

<head>
<meta charset="UTF-8">
<title wicket:id="title"></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

style.css

body {
  font-family: Sans-Serif;
  margin: 0px;
  padding: 0px;
}

#body {
    width: 60%;
    min-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    font-size: 120%;
    border-bottom: 2px solid black;
}

h2 {
    font-size: 110%
}

.message {
    border-bottom: 1px solid black;
}

#menu ul {
    margin: 0px;
    padding: 0px;
}

#menu ul li {
    list-style: none;
    display: inline-block;
}

#menu ul li a {
    text-decoration: none;;
    color: black;
    border: 1px solid black;
    padding: 5px;
}

#menu ul li a:hover {
    background-color: #ccc;
}

#footer {
    border-top: 2px solid black;
}

Přidáme obsah do HomePage.html (a odstraníme nadpis).

<body>
    <wicket:extend>
        <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>
    </wicket:extend>
</body>

Máme stránku s názvem "Fotky", ale zatím je prázdná. V této části si ukážeme, jak pracovat s obrázky ve Wicketu.

Obrázky

Tak jako u odkazů, tak i u obrázků, existuje několik způsobů jak je vložit do stránky. Nejjednodušším je použití klasického html. Nejdříve vložíme na naši stránku logo.

BasePage.html

<div id="header">
    <h1><img src="logo.png" alt="Můj Web" title="Můj Web"/></h1>
</div>

Obrázek logo.png pak musí být umístěn ve složce webapp (ve stejném umístění jako soubor s kaskádovými styly).

Další způsob je použítí package resource. Pomocí tohoto způsobu vložíme obrázky na stránku PhotosPage.

PhotosPage.java

public PhotosPage() {
    PackageResourceReference ref01 = new PackageResourceReference(getClass(), "image.png");
    add(new Image("img01", ref01));

    PackageResourceReference ref02 = new PackageResourceReference(getClass(), "image2.png");
    add(new Image("img02", ref02));
}

PhotosPage.html

<wicket:extend>
    <h2>Fotky</h2>

    <img wicket:id="img01"/>
    <img wicket:id="img02"/>
</wicket:extend>

V tomto případě je třeba obrázky třeba umístit v složce (package), kde se nachází java třída (cz.mujweb.photospage).

To je pro dnešek vše.

V následujícím kvízu, Kvíz - Založení Wicket projektu, HTML dědičnost a stylování, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.

Článek pro vás napsal vita

Uživatelské hodnocení:

4 hlasů

vita

Aktivity