13. diel - Wicket - wEasy

Minulú lekcií sme ukončili tutoriál venovaný frameworku Apache Wicket. V prípade, že sa vám tento framework zapáčil a chcete s ním naďalej pokračovať, predstavím vám jeden jednoduchý redakčný systém napísaný vo wicket, ktorý si môžete stiahnuť, upraviť, vylepšiť a používať pre vytvorenie a správu vlastného webu (alebo sa ním nechať inšpirovať).

WEasy

wEasy je projekt hosťovaný na GitHub a jeho názov znamená Wicket Easy. Ide o redakčný systém, ktorý sa dá použiť na jednoduchú správu webu a zároveň má slúžiť ako ukážková aplikácia pre záujemcov o Apache Wicket Framework. wEasy vo veľkej miere stavia na predchádzajúcich dieloch tohto tutoriálu. Ako databázu používa PostgreSQL a aktuálne je lokalizovaný do angličtiny a češtiny.

Tu je niekoľko snímok obrazoviek, ktoré vám dajú základnú predstavu o tom, ako táto aplikácia vyzerá.

Úvodná stránka (HomePage) s kategóriami a článkami

Registrácia (registrovaní a prihlásení užívatelia môžu k článkom pridávať komentáre)

Prihlásenie

Vytváranie nového článku

Vloženie obrázku do článku (výber)

Náhľad vytváraného článku

Nový článok tak ako sa zobrazí (vrátane komentárov)

Rozchodení projektu

V nasledujúcich krokoch si naklonuje projekt, importujete Naklonovaný projekt do Eclipse, prevedieme build projektu pomocou Maven, vytvoríme databázu a potrebné tabuľky a projekt nasadíme na Tomcat.

Naklonovaní projektu

Otvoríme si Git repositories view. Window -> Show View -> Other -> Git -> Git repositories.

Otvorilo sa nové view (pohľad).

V novo otvorenom pohľade kliknite na "Clone a Git repository" vyplňte požadované údaje a kliknite na "Next".

Ponechajte výber a kliknite na "Next".

Vyberte adresár, do ktorého chcete naklonovať (stiahnuť) projekt a kliknite na "Finish".

Repozitár bol klonovaný.

Import projektu do Eclipse

Teraz pridáme projekt do Eclipse. File -> Import -> Maven -> Existing Maven Project -> Next

Vyberte adresár, do ktorého ste naklonovali projekt a kliknite na "Finish".

Projekt bol importovaný do Eclipse a teraz s ním môžeme pracovať.

Build projektu

Pred tým, než aplikáciu nasadíme, musíme vykonať jej build. Kliknite pravým tlačidlom na projekt -> Run As -> Maven install.

V Console view môžete vidieť výsledky buildu. V prípade, že build bol úspešný, môžeme pokračovať.

Nasadenie aplikácie na Tomcat

Tu je podrobný opis postupu pridanie servletového kontajnera Tomcat do Eclipse. Tento postup môžete použiť v prípade, že ste projekt importovali do nového Eclipse workspace a žiadny server zatiaľ pridaný nemáte. Ak ste projekt importovali do workspace, ktoré ste používali pre projekty v predchádzajúcich dieloch tutoriálu, môžete túto časť preskočiť.

Otvorte si Server view. Windows -> Show View -> Other ... Server -> Servers.

Otvoril sa Servers view.

Kliknite na odkaz (No servers are available. Click this link to create a new server ...) a požadovaný server. V našom prípade použijeme Tomcat, ktorý sme už používali v predchádzajúcich dieloch tutoriálu. Vyberte Apache -> Tomcat (verziu, ktorú máte stiahnutú) a kliknite na "Next".

Vyberte adresár kam ste stiahli a rozbalili Tomcat a kliknite na "Finish".

Nový server bol pridaný do Servers view.

Teraz servera pridáme našu aplikáciu. Kliknite pravým tlačidlom na pridaný server -> Add and Remove -> na ľavej strane vyberte projekt a dvojklikom ho pridajte na pravú stranu -> Finish.

Teraz môžeme aplikáciu nasadiť a spustiť. Kliknite pravým tlačidlom na serve -> Start

Výsledok spustenie môžete vidieť v Console view.

Otvorte si internetový prehliadač a zadajte nasledovné url: http: // localhost: 8080 / weasy. Aplikácia by mala bežať.

Možno ste si v Console view všimli chybových hlášok a tiež sa nedá do aplikácie zaregistrovať a zalogovať. Je to z toho dôvodu, že nie je vytvorená databázy a tabuľky a nie je nastavené pripojenie.

Nastavenia databázy

PostgreSQL sme používali v predchádzajúcich dieloch tutoriálu, takže ho máme sprevádzkovaný. Najskôr vytvoríme databázu s názvom weasy.

CREATE DATABASE weasy;

V adresári scripts je súbor s názvom create_tables.sql, ktorý obsahuje skript pre vytvorenie (a naplnenie tabuliek).

V Eclipse IDE nájdite triedu DaoImpl (cz.vitfo.data­base.daoimpl.Da­oImpl.java). V tejto triede sa vytvára datasource. Vyplňte správny username (v PostgreSQL je defaultný rola postgres), správne heslo (password) a triedu uložte. Reštartujete server. Teraz by už aplikácie mala fungovať správne.

Rýchle zoznámenie

Teraz nasleduje krátke zoznámenie s aplikáciou wEasy.

lokalizácia

Lokalizované českej texty nájdete v súboroch nazevsouboru_cs­.properties. Tie sa uplatňujú v prípade, že návštevník stránok má nastavenú slovenčinu (českej locale). V ostatných prípadoch sa použijú texty zo súborov nazevsouboru.pro­perties, ktoré sú v angličtine.

Prihlásenie

Skript pre vytvorenie tabuliek vytvoril tiež dva užívateľa:

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

Prihlásiť sa môžete ako administrátor, alebo ako obyčajný registrovaný užívateľ.

Pre autorizáciu (to či používateľ môže vykonať určitú akciu či môže vidieť určitú komponentu) sa používajú role. V aplikácii existujú dve role: USER a ADMIN.

• ADMIN prestavuje administrátora a užívateľ s touto rolou môže vytvárať články, editovať ich, nahrávať obrázky, ...
• USER predstavuje registrovaného užívateľa a tento užívateľ môže pridávať komentáre k článkom.

To akú úlohu (role) používateľ získa je definované v triede BasicAutoriza­tionAndAuthen­ticationSessi­on v metóde 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ý prihlásený užívateľ má úlohu USER. Používateľ s emailom "admin.admin.admin" má navyše úlohu ADMIN. Ak teda chcete vo svojej aplikácii mať vlastného používateľa s rolou ADMIN, vykonajte zmeny v implementácii metódy getRoles ().

štruktúra stránok

Základná trieda, z ktorej dedia všetky ostatné stránky je BasePage (package cz.vitfo.base). Z nej priamo dedí ExternalBasePage (package cz.vitfo.exter­nal.pages), ktorá predstavuje hlavnú triedu pre externé stránky (stránky, ktoré sú určené všetkým) a InternalBasePage (package cz.vitfo.inter­nal.pages), z ktorej dedia stránky požadujúce autentifikáciu a autorizáciu.

URL

Pre získanie pekných url sa vykonáva tzv. Mountování stránok. Mountovat možno ale tiež celý package alebo resource.

WicketApplica­tion.java

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

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

vysvetlenie:

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

Umožňuje použiť nasledovné url pre zobrazenie článku s id 1 (ak existuje): http: // localhost: 8080 / weasy / article / 1.

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

Po zadaní url http: // localhost: 8080 / weasy / images / 9 sa zobrazí obrázok s id 9 (ak existuje). Viac informácií nájdete v súbore ImageResourceReference.java.

štýly

Aplikácia používa dva súbory s kaskádovými štýlmi:

• style.css v adresári webapp obsahuje štýly pre celú aplikáciu
• edit.css v balíčku cz.vitfo.inter­nal.pages.edit­withmodal obsahuje štýly pre javascriptový textový editor v EditPanel (EditPanel je umiestnený v EditPage)

Kategórie (Category) a Adresáre (Directory)

Každý článok musí mať pridelenú kategórii (tabuľka T_CATEGORY). Články sú zoskupené do kategórií. Adresár slúži pre zotriedenie a organizáciu obrázkov (tabuľka T_DIRECTORY). Všetky obrázky sú ale ukladané do databázy (tabuľka T_IMAGE).

Záver

Teraz by ste mali mať základný prehľad o tom, ako webová aplikácia wEasy vyzerá a byť schopní sa v nej orientovať. Ako už bolo uvedené vyššie, táto aplikácia je postavená na znalostiach, ktoré boli rozobraté v predchádzajúcich dieloch tohto tutoriálu. Samozrejme, že nie všetko sa do predchádzajúcich 12 dielov vošlo a nie všetko bolo prebrané dopodrobna.

Týmto končí tento bonusový diel tutoriálu o frameworku Apache Wicket, v ktorom sme sa venovali redakčnému systému wEasy. Dúfam, že pre vás tento diel (a aplikácie wEasy) bude inšpiráciou pre vytvorenie vlastných projektov vo wicket. Ak sa vám podarí vlastný projekt vytvoriť, budem rád, keď sa s ním pochválite tu na ITnetwork.