2. díl - Wicket - Úprava vygenerovaného projektu

Java Enterprise Edition Wicket Wicket - Úprava vygenerovaného projektu

V minulém díle jsme nechali Maven, aby nám vygeneroval jednoduchou webovou Wicket aplikaci. Tu nyní upravíme.

Něco o přístupu Wicketu

Wicket přistupuje ke tvorbě jednotlivých webových stránek následujícím způsobem. Statický obsah je vytvořen v HTML. Aktivní a dynamický obsah je vytvořen v Javě. Vytvořený dynamický obsah je vložen do HTML na místo, které se specifikuje v .html souboru. Wicket tedy umožňuje jednoduše tvořit statický web, jednoduše přidat do statického webu dynamičnost, popřípadě vytvořit kompletně dynamický web. Důsledkem tohoto přístupu je to, že každá webová stránka se skládá jak z .html souboru, tak z .java souboru. V .html definujete statické věci a rozložení (layout) a případné umístění dynamických komponent. V .javě vytváříte dynamické komponenty a algoritmy aplikace.

Dalším specifikem je práce Wicketu s daty (modelem). Ve Wicketu vytvoříte komponentu a tuto komponentu svážete s modelem (s daty, které má prezentovat). A více se nestaráte. Když komponenta potřebuje data, má model, kterého se na ně zeptá a dostane je.

Něco o struktuře aplikace

web.xml je Web Application Deployment Descriptor webové aplikace. Je to xml dokument, ve kterém jsou definovány informace o aplikaci, které potřebuje server znát. Jinak řečeno, je tam popsáno, jak nasadit aplikaci na server (servletový kontejner). Soubor (web.xml) musí být umístěn v adresáři /WEB-INF/.

WicketApplica­tion.java je vstupní bod Wicket aplikace. Je zde definována domovská stránka a také umožnuje konfiguraci. Jedná se o třídu dědící ze třídy WebApplication, která dědí ze třídy Application, což je základní třída všech Wicket aplikací.

Obrázky a kaskádové styly jsou umístěny v webapp složce. To je stejné jako u ostatních Java webových projektů. Rozdílem je to, že .html soubory jsou umístěny ve stejném adresáři (package), jako jsou .java soubory a navíc mají jak .java tak .html soubory stejný název. Jinak řečeno, každá webová stránka je určena .java třídou, která dědí z WebPage.class a .html souborem se stejným názvem, jako má .java soubor.

Obměna předgenerovaného webu.

Pokud jste se již seznámili se strukturou Wicket webové aplikace, pustíme se tvorby vlastního webu. Nečekejte nic převratného. Vytvoříme si jednoduchý, statický osobní web.

Promažte obsah následujících souborů a ponechte pouze uvedené.

HomePage.java

public class HomePage extends WebPage {

        public HomePage() {

    }
}

HomePage.html

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <title>Můj Web</title>
                <link rel="stylesheet" href="style.css" type="text/css"/>
        </head>
        <body>

        </body>
</html>

style.css - Vymazat celý obsah. Ponechat pouze prázdný soubor.

logo.png - Smazat.

Nyní máte úplně nejzákladnější kostru Wicket aplikace. Pokud nyní aplikaci nasadíte a zobrazíte si ji v prohlížeči, otevře se vám prázdná stránka. Pokud si necháte zobrazit zdrojový kód stránky v prohlížeči (klávesová zkratka Ctrl-U), získáte následující.

Vše je v pořádku, až na titulek okna. Místo textu "Můj Web" se zobrazilo "MĹŻj Web" (tato chyba nemusí být u každého). To značí problém s diakritikou. V tomto případě je v tom Wicket nevinně. Za chybu může výchozí kódování editoru (Eclipse). Řešením je nastavení kódování Eclipse. Window -> Preferences -> General -> Workspace, Other, UTF-8 -> OK

Nyní by již mělo být kódování v pořádku.

Pokud se vytváří statický web, mění se pouze .html a .css.

HomePage.html

<body>
        <div id="content">
                <div id="header">
                        <h1>Můj Web</h1>
                </div>

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

                <div id="footer">

                </div>
        </div>
</body>

style.css

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


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

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

.date {
        font-size: smaller;
        font-style: italic;
}

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

h2 {
        font-size: 110%
}

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

Uložte a nasaďte

Sice hezké, ale kvůli statickému webu nemusíme používat Java Web Framework. Ve stránce (v patičce) budeme ještě zobrazovat aktuální čas zobrazení webové stránky.

Nejdříve si vytvoříme model. To je objekt, který poskytuje data, provádí výpočty, a který v našem případě bude na požádání poskytovat čas s přesností na milisekundy. Model ve Wicketu implementuje rozhraní IModel, které poskytuje tyto metody:

  • public void detach()
  • public Object getObject()
  • public void setObject(Object object)

Náš model bude pouze poskytovat přesný čas, a proto využijeme pouze metodu getObject(), ve které nadefinujeme, co má vracet. V našem případě je to čas s přesností na milisekundy. Třídu s modelem si pojmenujeme TimeModel

TimeModel.java

import java.text.SimpleDateFormat;
import java.util.Date;

import org.apache.wicket.model.IModel;

public class TimeModel implements IModel {

        @Override
        public void detach() {
        }

        @Override
        public Object getObject() {
                Date date = new Date();
                SimpleDateFormat sdf = new SimpleDateFormat("dd.MM.yyyy HH:mm:ss:SSS");
                return sdf.format(date);
        }

        @Override
        public void setObject(Object object) {
        }
}

Ve třídě HomePage.java vytvoříme Label, což je jednoduchá komponenta zobrazující text. Této komponentě v konstruktoru předáme model. Pokaždé, když se bude komponenta Label vykreslovat, zeptá se modelu na data (zavolá metody getObject()).

HomePage.java

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

public class HomePage extends WebPage {

        public HomePage() {

                Label currentTime = new Label("time", new TimeModel());
                add(currentTime);
    }
}

Do .html patičky přidáme tag elementu s wicket:id, ve kterém budeme chtít zobrazovat čas.

<div id="footer">
        <p class="right">Čas zobrazení stránky: <span wicket:id="time"></span></p>
</div>

Doplníme styly.

#footer p {
        font-size: smaller;
        font-style: italic;
}

.right {
        float: right;
}

Zkuste několikrát aktulizovat webovou stránku pomocí F5 (nebo klávesu F5 stiskněte a držtet). Čas se pokaždé zaktualizuje.


Přiložený soubor .zip pro 1. a 2. díl tohoto tutoriálu obsahuje kromě zdrojových kódů (složka src a soubor pom.xml) také soubor MujWebZakladni.war. Jedná se o Web Application archív, což je totéž jako .jar, ale používaný pro webové aplikace. Tento soubor stačí umístit do adresáře webapps v Tomcatu a následně Tomcat spustit pomocí startup.bat (popsáno v prvním díle). Po zadání http://localhost:8080/MujWebZakladni/ by se vám měla zobrazit úvodní stránka webové aplikace.


 

Stáhnout

Staženo 15x (2.78 MB)
Aplikace je včetně zdrojových kódů v jazyce Java

 

  Aktivity (1)

Článek pro vás napsal vita
Avatar
vita

Jak se ti líbí článek?
Celkem (2 hlasů) :
4.54.54.54.54.5


 


Miniatura
Předchozí článek
Wicket - Seznámení a nastavení
Miniatura
Všechny články v sekci
Apache Wicket
Miniatura
Následující článek
Wicket - HTML dědičnost a odkazy

 

 

Komentáře

Avatar
Milan Gallas
Redaktor
Avatar
Milan Gallas:

Ahoj (používám Wicket-core-7.0.0) mám následující soubor BasePage:

/*
 * WicketExamplePage.java
 *
 * Created on 25. září 2015, 22:30
 */

package com.myapp.wicket;

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

/**
 *
 * @author Libor
 * @version
 */

public abstract class BasePage extends WebPage {

    public BasePage() {
        super();
        add(new HeaderPanel("headerpanel", "Welcome To Wicket"));
        add(new FooterPanel("footerpanel", "Powered by Wicket and the NetBeans Wicket Plugin"));
    }

}

a píše mi to chybu:

get(String) in MarkupContainer cannot implement get(String) in RequestableComponent
return type Component in not comatible withc IRequestableComponent

Jsem z toho zmaten. Dokážeš mi prosím poradit, co s tím? :D

 
Odpovědět 25.9.2015 23:31
Avatar
Milan Gallas
Redaktor
Avatar
Milan Gallas:

Již jsem to vyřešil, bylo to verzí Wicketu. Stačí použít (Wicket-core-6.17.0) a jede to :D

 
Odpovědět 27.9.2015 17:40
Avatar
vita
Redaktor
Avatar
Odpovídá na Milan Gallas
vita:

Při psaní tutoriálu jsem používal Wicket ve verzi:

<wicket.version>6.17.0</wicket.version>

Během léta tohoto roku byla již vydána verze 7 (https://wicket.apache.org/#news). Vidím, ale že jsi to již vyřešil :-).

 
Odpovědět 28.9.2015 8:07
Avatar
vita
Redaktor
Avatar
Odpovídá na Milan Gallas
vita:

Všechny tři projekty vytvářené v tomto tutoriálu jsem zkusil převést na Wicket 7 a nesetkal jsem se s žádným problémem.

V pom.xml jsem provel následující změny:

<properties>
  <wicket.version>7.0.0</wicket.version>
  ...
</properties>

<configuration>
        <source>1.8</source>
        <target>1.8</target>
        ...
</configuration>

Změna verze Wicketu a také jsem změnil source a target verzi na 1.8. Pro build a běh aplikace používám Javu 8 (jdk1.8.0_51).

V Eclipse pak bylo ještě potřeba změnit "Project facets" projektu na Javu verzi 1.8 (defaultně jsem měl 1.6). Po provedených změnách jsem provedl "update Maven Project" a následně Maven clean a Maven install. Projekt šel následně bez problémů nasadit na Tomcat a fungoval správně.

 
Odpovědět 28.9.2015 14:17
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.