Lekce 13 - Wicket - wEasy

Minulou lekcí, Wicket - Přihlašování, pokračování, jsme ukončili tutoriál věnovaný frameworku Apache Wicket.

V případě, že se vám tento framework zalíbil a chcete s ním nadále pokračovat, představím vám jeden jednoduchý redakční systém napsaný ve Wicketu, který si můžete stáhnout, upravit, vylepšit a používat pro vytvoření a správu vlastního webu (anebo se jím nechat inspirovat).

wEasy

wEasy je projekt hostovaný na GitHubu a jeho název znamená Wicket Easy. Jedná se o redakční systém, který se dá použít na jednoduchou správu webu a zároveň má sloužit jako ukázková aplikace pro zájemce o Apache Wicket Framework. wEasy ve velké míře staví na předchozích dílech tohoto tutoriálu. Jako databázi používá PostgreSQL a aktuálně je lokalizován do angličtiny a češtiny.

Zde je několik snímků obrazovek, které vám dají základní představu o tom, jak tato aplikace vypadá.

Úvodní stránka (HomePage) s kategoriemi a články

Registrace (registrovaní a přihlášení uživatelé mohou k článkům přidávat komentáře)

Přihlášení

Vytváření nového článku

Vložení obrázku do článku (výběr)

Náhled vytvářeného článku

Nový článek tak jak se zobrazí (včetně komentářů)

Rozchození projektu

V následujících krocích si naklonujeme projekt, naimportujeme naklonovaný projekt do Eclipse, provedeme build projektu pomocí Mavenu, vytvoříme databázi a potřebné tabulky a projekt nasadíme na Tomcat.

Naklonování projektu

Otevřeme si Git Repositories view. Window -> Show View -> Other -> Git -> Git Repositories.

Otevřelo se nové view (pohled).

V nově otevřeném pohledu klikněte na "Clone a Git repository" vyplňte požadované údaje a klikněte na "Next".

Ponechte výběr a klikněte na "Next".

Vyberte adresář, do kterého chcete naklonovat (stáhnout) projekt a klikněte na "Finish".

Repozitář byl naklonován.

Import projektu do Eclipse

Nyní přidáme projekt do Eclipse. File -> Import -> Maven -> Existing Maven Project -> Next

Vyberte adresář, do kterého jste naklonovali projekt a klikněte na "Finish".

Projekt byl importován do Eclipse a nyní s ním můžeme pracovat.

Build projektu

Před tím, než aplikaci nasadíme, musíme provést její build. Klikněte pravým tlačítkem na projekt -> Run As -> Maven install.

V Console view můžete vidět výsledky buildu. V případě, že build byl úspěšný, můžeme pokračovat.

Nasazení aplikace na Tomcat

Zde je podrobný popis postupu přidání servletového kontejneru Tomcat do Eclipse. Tento postup můžete použít v případě, že jste projekt importovali do nového Eclipse workspace a žádný server zatím přidaný nemáte. Pokud jste projekt importovali do workspace, které jste používali pro projekty v předchozích dílech tutoriálu, můžete tuto část přeskočit.

Otevřete si Server view. Windows -> Show View -> Other … Server -> Servers.

Otevřel se Servers view.

Klikněte na odkaz (No servers are available. Click this link to create a new server …) a vyberte požadovaný server. V našem případě použijeme Tomcat, který jsme již používali v předchozích dílech tutoriálu. Vyberte Apache -> Tomcat (verzi, kterou máte staženou) a klikněte na "Next".

Vyberte adresář kam jste stáhli a rozbalili Tomcat a klikněte na "Finish".

Nový server byl přidán do Servers view.

Nyní serveru přidáme naši aplikaci. Klikněte pravým tlačítkem na přidaný server -> Add and Remove -> na levé straně vyberte projekt a dvojklikem jej přidejte na pravou stranu -> Finish.

Nyní můžeme aplikaci nasadit a spustit. Klikněte pravým tlačítkem na serve -> Start

Výsledek spuštění můžete vidět v Console view.

Otevřete si internetový prohlížeč a zadejte následující url: http://localhost:8080/weasy. Aplikace by měla běžet.

Možná jste si v Console view všimli chybových hlášek a také se nelze do aplikace zaregistrovat a zalogovat. Je to z toho důvodu, že není vytvořena databáze a tabulky a není nastaveno připojení.

Nastavení databáze

PostgreSQL jsme používali v předchozích dílech tutoriálu, takže jej máme zprovozněn. Nejdříve vytvoříme databázi s názvem weasy.

CREATE DATABASE weasy;

V adresáři scripts je soubor s názvem create_tables.sql, který obsahuje skript pro vytvoření (a naplnění tabulek).

V Eclipse IDE najděte třídu DaoImpl (cz.vitfo.data­base.daoimpl.Da­oImpl.java). V této třídě se vytváří datasource. Vyplňte správný username (v PostgreSQL je defaultní role postgres), správné heslo (password) a třídu uložte. Restartujete server. Nyní by již aplikace měla fungovat správně.

Rychlé seznámení

Nyní následuje krátké seznámení s aplikací wEasy.

Lokalizace

Lokalizované české texty najdete v souborech nazevsouboru_cs­.properties. Ty se použijí v případě, že návštěvník stránek má nastavenu češtinu (české locale). V ostatních případech se použijí texty ze souborů nazevsouboru.pro­perties, které jsou v angličtině.

Přihlášení

Skript pro vytvoření tabulek vytvořil také dva uživatele:

INSERT INTO t_user (username, email, password) VALUES
  ('admin', '[email protected]', '1234'),
  ('user', '[email protected]', 'user');

Přihlásit se můžete jako administrátor, nebo jako obyčejný registrovaný uživatel.

Pro autorizaci (to zda uživatel může provést určitou akci či může vidět určitou komponentu) se používají role. V aplikaci existují dvě role: USER a ADMIN.

• ADMIN přestavuje administrátora a uživatel s touto rolí může vytvářet články, editovat je, nahrávat obrázky, …
• USER představuje registrovaného uživatele a tento uživatel může přidávat komentáře k článkům.

To jakou roli (role) uživatel získá je definováno v třídě BasicAutoriza­tionAndAuthen­ticationSessi­on v metodě getRoles():

@Override
public Roles getRoles() {
    Roles roles = new Roles();
    if (isSignedIn()) {
        roles.add(Roles.USER);
        if (email.equals("[email protected]")) {
            roles.add(Roles.ADMIN);
        }
    }
    return roles;
}

Každý přihlášený uživatel má roli USER. Uživatel s emailem "admin.admin.admin" má navíc roli ADMIN. Pokud tedy chcete ve své aplikaci mít vlastního uživatele s rolí ADMIN, proveďte změny v implementaci metody getRoles().

Struktura stránek

Základní třída, ze které dědí všechny ostatní stránky je BasePage (package cz.vitfo.base). Z ní přímo dědí ExternalBasePage (package cz.vitfo.exter­nal.pages), která představuje hlavní třídu pro externí stránky (stránky, které jsou určené všem) a InternalBasePage (package cz.vitfo.inter­nal.pages), ze které dědí stránky požadující autentifikaci a autorizaci.

URL

Pro získání hezkých url se provádí tzv. mountování stránek. Mountovat lze ale též celý package nebo resource.

WicketApplica­tion.java

@Override
public void init()
{
    super.init();

    mountPage("/article", ArticlePage.class);
    mountResource("/images/${imageId}", new ImageResourceReference());
}

Vysvětlení:

mountPage("/article", ArticlePage.class);

Umožňuje použít následující url pro zobrazení článku s id 1 (pokud existuje): http://localhost:8080/weasy/article/1.

mountResource("/images/${imageId}", new ImageResourceReference());

Po zadání url http://localhost:8080/weasy/images/9 se zobrazí obrázek s id 9 (pokud existuje). Více informací naleznete v souboru ImageResourceReference.java.

Styly

Aplikace používá dva soubory s kaskádovými styly:

• style.css v adresáři webapp obsahuje styly pro celou aplikaci
• edit.css v balíčku cz.vitfo.inter­nal.pages.edit­withmodal obsahuje styly pro JavaScriptový textový editor v EditPanel (EditPanel je umístěn v EditPage)

Kategorie (Category) a Adresáře (Directory)

Každý článek musí mít přidělenu kategorii (tabulka T_CATEGORY). Články jsou seskupovány do kategorií. Adresář slouží pro setřídění a organizaci obrázků (tabulka T_DIRECTORY). Všechny obrázky jsou ale ukládány do databáze (tabulka T_IMAGE).

Závěr

Nyní by jste měli mít základní přehled o tom, jak webová aplikace wEasy vypadá a být schopni se v ní orientovat. Jak již bylo uvedeno výše, tato aplikace je postavena na znalostech, které byly probrány v předchozích dílech tohoto tutoriálu. Samozřejmě, že ne vše se do předchozích 12 dílů vešlo a ne vše bylo probráno dopodrobna.

Tímto končí tento bonusový díl tutoriálu o frameworku Apache Wicket, ve kterém jsme se věnovali redakčnímu systému wEasy. Doufám, že pro vás tento díl (a aplikace wEasy) bude inspirací pro vytvoření vlastních projektů ve Wicketu. Pokud se vám podaří vlastní projekt vytvořit, budu rád, když se s ním pochlubíte zde na ITnetwork.

V následujícím kvízu, Kvíz - Apache Wicket, si vyzkoušíme nabyté zkušenosti z kurzu.