Lekce 4 - Úvod do JavaServer Faces (JSF)

Další

V minulé lekci, Instalace WildFly a Maven, jsme si nainstalovali aplikační server WildFly, přistoupili do jeho administrace a ke konci si nainstalovali Maven.

V této větvi kurzu budeme používat technologii JSF. Dnes si v ní vytvoříme první jednoduchý projekt, na kterém si vysvětlíme základní principy. Půjde o webový generátor náhodných čísel. Naše první aplikace bude vypadat takto:

Webová aplikace náhodné číslo v Java Enterprise JSF

Hned na úvod by bylo dobré zmínit, že tento kurz je pokročilý a bude potřeba opravdu dost trpělivosti. Technologie JEE je totiž velmi komplexní. Odměnou vám za ni bude snad nejvyšší plat v IT sféře přesahující 100.000 Kč/měsíc. Věřím, že spolu látku zvládneme probrat.

Vytvoření projektu

V kurzu budeme sice používat IDE NetBeans, ale ukážeme si alternativně i jak pracovat s projektem přes příkazovou řádku. Tím jej pak dokážete spravovat v jakémkoli jiném IDE a zároveň získáme i širší možnosti.

Vytvoření Maven projektu

V NetBeans vytvoříme nový projekt z kategorie Java with Maven typu Project from Archetype. Pokud vám tato kategorie projektů v NetBeans chybí, je třeba ještě aktivovat JEE podporu, viz dále:

Vytvoření Maven projektu přes příkazovou řádku

Alternativně (za předpokladu, že máme Maven nainstalovaný z předchozí lekce) můžeme založit projekt Maven příkazem, který zavoláme ve složce, kde chceme projekt založit:

mvn archetype:generate -DgroupId=org.apache.maven.archetypes -DartifactId=jsf-random -DarchetypeArtifactId=maven-archetype-webapp

Aktivace JEE v NetBeans

Jak jsme již zmiňovali, pokud nemáte JEE aktivovanou v NetBeans, musíte si jí aktivovat. Aktivace je velmi snadná. Poté, co klikneme na tlačítko Next > v okně, které vypadá stejně jako obrázek výše, musíme nastavit, jaký aplikační server chceme využívat. V našem případě to je WildFly, který jsme si instalovali a nastavovali v předchozí lekci:

Klekněme na Add... a tam si vyberme aplikační server WildFly. Dále potřebujeme nastavit cestu k našemu aplikačnímu serveru. Políčko Server Configuration se samo vyplní:

Dále klikněme na tlačítko Finish:

Aplikační server máme nastavený.

Nastavení archetype projektu

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Jelikož vytváříme projekt přes Maven, musíme si zvolit z jakého archetype máme vygenerovat projekt. Archetype je tedy šablona projektu.

Vhodnou šablonu vyhledáme tak, že do políčka Search napíšeme maven-archetype-webapp. Zobrazí se nám 3 možné archetypes. Zvolme ten, který má Group ID nastavený na org.apache.maven.archetypes a klikněme na Next >:

Projekt pojmenujeme JSFNahodneCislo:

NetBeans nám pomocí archetype jako obvykle vygeneruje základní kostru projektu. Důležitá je pro nás složka webapp, kde se nachází index.jsp.

`index.xhtml`

Jelikož chceme JSF projekt a ne JSP, smažme index.jsp a vytvořme index.xhtml, který je typu JSF Page. Je možné, že vám NetBeans nezobrazí tento typ souboru v menu, z tohoto důvodu si ho vyberte v Others:

Když otevřeme index.xhtml, uvidíme následující kus kódu:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        Hello from Facelets
    </h:body>
</html>

Pokud vám NetBeans nevygeneroval prefix h: před <body> a <head>, doporučuji přidat namespace http://xmlns.jcp.org/jsf/html a dopsat jej tam. Dnes by to nemělo vadit, ale v příštích lekcích už ano.

Vidíme, že stránka je XML dokument. O XML jsme si již říkali v sekci Práce se soubory v Javě. Místo HTML budeme stránku tvořit v XHTML, které je téměř stejné, jen musíme uzavírat i nepárové tagy.

Co je zajímavé jsou jmenné prostory. Víme, že XML je univerzální jazyk, do kterého lze jednoduše dodat značky z různých balíčků. Ve vygenerovaném dokumentu se nastavuje výchozí jmenný prostor na http://www.w3.org/1999/xhtml, což jsou klasické XHTML značky pro tvorbu stránek (např. <h1>, <table> a podobně). Kromě tohoto jmenného prostoru však v dokumentu povolujeme značky i z prostoru http://xmlns.jcp.org/jsf/html, kde nalezneme právě JSF značky. Elementy z tohoto jmenného prostoru jsou vždy před vyrenderováním stránky nahrazeny dynamickým obsahem.

V příkladu je vidíme použité v <h:head> a <h:body>. Hlavička a tělo stránky se před vykreslením tedy ještě zpracovávají Javou, v našem případě tohoto mechanismu nevyužijeme, ale v budoucích aplikacích budeme díky tomu moci spojit hlavičky a těla stránek ve chvíli, kdy vkládáme podstránku do šablony.

Nasazení

Pojďme aplikaci nasadit.

NetBeans v době psaní této lekce a již cca rok dozadu obsahuje bug při nasazování na server (jinak by projekt stačilo jen spustit v NetBeans). Proto si ukážeme jak nasadit pomocí Maven a WIldFly pluginu, což se nám stejně hodí při nasazování na skutečný server.

`pom.xml`

Přesuňme se do pom.xml. Pojďme přidat tzv. Maven plugin, který nám poslouží k nasazení našeho webu na aplikační server. Do značky <plugins> přidejme následujicí kus XML kódu:

<plugin>
    <groupId>org.wildfly.plugins</groupId>
    <artifactId>wildfly-maven-plugin</artifactId>
    <version>2.1.0.Beta1</version>
</plugin>

Aplikační server spustíme (opět přes konzoli spuštěním souboru standalone.bat na Windows nebo bash standalone.sh na UNIX). V kořenové složce projektu zavoláme dva příkazy. První nám stáhne závislosti, které jsme nadefinovali v pom.xml:

mvn clean install

Druhý nám zabalí projekt a nasadí jej na server:

mvn wildfly:deploy

Pojďme se tedy podívat jak naše aplikace bude vypadat na stránce http://localhost:8080/JSFRandom:

Proč nám server na hlavní stránce vyhodil Forbidden? Je to z důvodu, že nemáme nastavený tzv. routování. Routování budeme nastavovat v dalších lekcích v souboru web.xml. Prozatím si budeme muset vystačit s používáním jen následující URL adresy: http://localhost:8080/JSFNahodnoCislo/index.xhtml. Když tedy otevřeme tuto URL adresu, uvidíme následujicí stránku:

Příště, v lekci Úvod do Context Dependency Injection (CDI), si vytvoříme svou první webovou aplikaci v JEE.

Stáhnout

Staženo 397x (19.52 kB)
Aplikace je včetně zdrojových kódů v jazyce java

Článek pro vás napsal David Čápka

Jak se ti líbí článek?

5 hlasů

Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.

Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity (13)

Komentáře

Zobrazit starší komentáře (1)

David Čápka

Tým ITnetwork

David Čápka:30.3.2014 10:42

Gettery se volají podle jejich názvu. Když v EL použiješ proměnnou cislo, zavolá si na pozadí getCislo() a podobně.

Odpovědět

30.3.2014 10:42

Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)

javakoder1

Člen

javakoder1:13.4.2014 18:54

Ahoj, když najedu na localhost:8080 tak vyjede alert a t chce to po mě uživatelské jméno a heslo. Já ale v nastavení žádné jméno a heslo nemám. Prostě to nechápu díky.

Odpovědět

13.4.2014 18:54

ucenidolazni

Člen

ucenidolazni:13.5.2014 16:46

Toto je opravdu úžasná stránka, děkuji moc ! :-)

Odpovědět

13.5.2014 16:46

srdosm

Člen

srdosm:16.9.2015 21:46

Já s tím mám nějak problém. Číslo se nechce zobrazit. Stránka se zobrazuje v pohodě, ale to číslo ne...

Odpovědět

16.9.2015 21:46

malybobor123

Člen

malybobor123:14.10.2015 22:20

Mám s tým problém. Všetko funguje, ale nezobrazí sa mi číslo, len text "Náhodné číslo " ale čislo nie je nikde..kde je chyba?? mám to presne ako je to tu

Odpovědět

14.10.2015 22:20

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

malybobor123

Člen

Odpovídá na srdosm
malybobor123:14.10.2015 22:53

Vyriešil som ten problém. Problém je, že on používa GlassFish 4.0 a ja, tak ako srdosm pravdepodobne 4.1 a nepzná to javax.enterprise.context.RequestScoped, namiesto toho používa javax.faces.bean.RequestScoped. Neviem aký je rozdiel medzi nimi a ako by mala používať, no vyriešiš to tým, že klikneš pravým na projekt JSFNahodneCislo/properties/libraries/Add JAR/folder/ --nájdeš umiestenie GlassFish--/glassfish/modules/cdi-api.jar ...dáš import, vymažeš import s javax.faces.bean.RequestScoped frčí to

[/code]

Odpovědět

14.10.2015 22:53

David Tilšer

Člen

David Tilšer:2.4.2016 22:34

Když chci vygenerovat novou třídu, tak tam nemám na výběr JSF ManagedBean, tak vytvořím přes new class, ale tam pak nemám @ManagedBean, @RequestScoped.
Jak to udělat? Jak mám vygenerovat JSF ManagedBean třídu?

Odpovědět

2.4.2016 22:34

Odpočinek je pro slabochy.

David Tilšer

Člen

David Tilšer:2.4.2016 23:04

Tak to co jsem psal výše, tak už jsem vyřešil, ale když chci spustit výslednou aplikaci, tak mi to píše "low memory". Nechápu, mám 8GB RAM a nemám ani 1GB využité, jak je to možný? Setkal se někdo s tím?

Odpovědět

2.4.2016 23:04

Odpočinek je pro slabochy.

ludo.kovac

Člen

ludo.kovac:19.7.2016 10:21

S podporou NetBeans som upravil zdroják zo JSFNahodneCislo.zip a funguje to

package beans;

import java.util.Random;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

/*
 *             __          __                __
 *        ____/ /__ _   __/ /_  ____  ____  / /__ _________
 *       / __  / _ \ | / / __ \/ __ \/ __ \/ //_// ___/_  /
 *      / /_/ /  __/ |/ / /_/ / /_/ / /_/ / ,< _/ /__  / /_
 *      \__,_/\___/|___/_.___/\____/\____/_/|_(_)___/ /___/
 *
 *
 *      TUTORIÁLY  <>  DISKUZE  <>  KOMUNITA  <>  SOFTWARE
 *
 *      Tento zdrojový kód je součástí tutoriálů na programátorské
 *      sociální síti WWW.DEVBOOK.CZ
 *
 *      Kód můžete upravovat jak chcete, jen zmiňte odkaz
 *      na www.devbook.cz :-)
 */
@ManagedBean
@RequestScoped
public class GeneratorBean {

    /**
     * Instance generátoru
     */
    private Random generator;

    /**
     * Inicializace beanu
     */
    public GeneratorBean() {
        generator = new Random();
    }

    /**
     * Vrátí náhodné číslo
     * @return Náhodné číslo
     */
    public int getCislo()
    {
        return generator.nextInt(100);
    }

}

Odpovědět

19.7.2016 10:21

2tix

Redaktor

2tix:24. června 10:47

Ahoj, článek se mi moc líbil akorát vždy když aplikaci zapnu NetBeans mi vyhodí:
The module has not been deployed.
See the server log for details.
BUILD FAILED (total time: 14 seconds)

Neví někdo co s tím?
Díky

Odpovědět

24. června 10:47

HTML 5, SCSS, online kurz profi webdesignu za 175 Kč!

Zjistit více...

SASS

HTML 5, SCSS, online kurz profi webdesignu za 175 Kč!

Otevřít kurz »

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 10 zpráv z 11. Zobrazit vše