ITnetwork summer 2020 Slevový týden - Červenec
30 % bodů zdarma na online výuku díky naší Slevové akci!
Pouze tento týden sleva až 80 % na e-learning týkající se C#

Lekce 4 - Úvod do JavaServer Faces (JSF)

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. Techno­logie 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:

Nový projekt pro JEE v Neatbeans

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:

Vybrání aplikačního serveru

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

Nastavení aplikačního sevreru

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

Vybrán Wildfly server

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

Výběr archetype pro projekt

Projekt pojmenujeme JSFNahodneCislo:

Pojmenování projektu

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:

Přidání JSF souboru

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:

Start aplikačního serveru
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:

Forbidden stránka

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:

JSF Example

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

 

Předchozí článek
Instalace WildFly a Maven
Všechny články v sekci
Java Enterprise Edition (JEE)
Článek pro vás napsal David Čápka
Avatar
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.
Unicorn College 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)

Avatar
David Čápka
Tým ITnetwork
Avatar
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! :)
Avatar
javakoder1
Člen
Avatar
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
Avatar
ucenidolazni
Člen
Avatar
ucenidolazni:13.5.2014 16:46

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

 
Odpovědět
13.5.2014 16:46
Avatar
srdosm
Člen
Avatar
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
Avatar
malybobor123
Člen
Avatar
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!
Avatar
malybobor123
Člen
Avatar
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.enterpri­se.context.Re­questScoped, namiesto toho používa javax.faces.be­an.RequestSco­ped. Neviem aký je rozdiel medzi nimi a ako by mala používať, no vyriešiš to tým, že klikneš pravým na projekt JSFNahodneCis­lo/properties/li­braries/Add JAR/folder/ --nájdeš umiestenie GlassFish--/glassfish/mo­dules/cdi-api.jar ...dáš import, vymažeš import s javax.faces.be­an.RequestSco­ped frčí to

[/code]

 
Odpovědět
14.10.2015 22:53
Avatar
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.
Avatar
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.
Avatar
ludo.kovac
Člen
Avatar
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
Avatar
2tix
Redaktor
Avatar
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
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