4. diel - Wicket - Titulok, štýly, obrázky

V predchádzajúcom diele sme skončili síce s funkčnou, ale nie príliš peknú, webovou aplikáciou. Najskôr sa zameriame na titulok stránky. Ten je napevno nastavený v triede BasePage v časti head.

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

Tým pádom sa zobrazuje ako pre HomePage, tak pre PhotosPage. Ideálne by však bolo mať titulok vzťahujúce sa k zobrazenej stránke.

Ak by sme zmenili titulok napr. V HomePage.html, k žiadnej zmene v zobrazení popisku by nedošlo. HomePage dedí z BasePage a na miesto v BasePage.html určené tagom <wicket: child /> sa vloží iba tá časť .html súboru potomka uvedená medzi tagy <wicket: extend> a </ wicket: extend>. Nič viac.

Na to sa hodí komponent Label, ktorá sa používa na vkladanie textu do html. V .html do tagu pridáme atribút wicket: id = "title" a v .java vytvoríme Label s id "title" a druhým parametrom modelom a vložíme ho do stránky pomocou add (). Tieto zmeny je potrebné vykonať v BasePage. Ako ale do BasePage.class dostať reťazec z HomePage.class a PhotosPage.class? Pomocou Javy ..

BasePage.class pozmeníme na abstract. Pridáme do nej abstraktné metódu napr. GetTitle (). Keďže je to abstraktné metóda, triedy, ktoré dedí z BasePage.class, ju budú nútené implementovať. Táto metóda implementovaná v potomkoch bude vracať titulok špecifický pre danú stránku. Ďalej ešte v konstruktoru BasePage.class vytvoríme Label a odovzdáme mu reťazec reprezentujúci titulok. Len drobné upozornenie - jedná sa o org.apache.wicket.markup.html.basic.Label a nie o java.awt.Label. To platí pre všetky komponenty. Pozor na automatické doplňovanie importov v IDE.

Model predstavuje objekt, ktorý poskytuje komponente dáta. Môžeme si síce napísať vlastné modely, ale pre najčastejšie situácie má Wicket už modely pripravené. Veľmi často potrebujeme zobraziť nejaký statický text. Model pre vrátenie textu vlastne používa iba metódu GetObject (), ktorá vždy vracia rovnaký reťazec. Takýto model je už vo wicket predpripravený. Stačí napísať new Model ( "Reťazec") 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";
    }
}

Ako ďalší krok zmeníme BasePage.html. Do nadpisu namiesto "Header" napíšeme "Môj Web" a nadpisy s textami "Content" a "Footer" odstránime.

Tiež pridáme kaskádové štýly.

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;
}

Pridáme obsah do HomePage.html (a odstránime 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ázvom "Fotky", ale zatiaľ je prázdna. V tejto časti si ukážeme, ako pracovať s obrázkami vo wicket.

Obrázky

Tak ako u odkazov, tak iu obrázkov, existuje niekoľko spôsobov ako ich vložiť do stránky. Najjednoduchším je použitie klasického html. Najskôr vložíme na našu stránku logo.

BasePage.html

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

Obrázok logo.png potom musí byť umiestnený v priečinku webapp (v rovnakom umiestnenie ako súbor s kaskádovými štýly).

Ďalší spôsob je použitie package resource. Pomocou tohto spô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 prípade je potrebné obrázky potrebné umiestniť v zložke (package), kde sa nachádza java trieda (cz.mujweb.photospage).

To je pre dnešok všetko. Nabudúce sa pozrieme na to, ako vytvoriť Viacjazykové web.

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

Užívateľské hodnotenie:

1 hlasov

vita

Aktivity