Lekce 6 - Zpracování formulářů v JSF

V minulé lekci o Java EE, Úvod do Context Dependency Injection (CDI), jsme se naučili základní principy JSF.

V dnešním JEE tutoriálu si ukážeme, jak se zpracovávají formuláře. Naprogramujeme jednoduchou webovou kalkulačku.

Založte si nový projekt s názvem JSFKalkulacka. Buď opět přes NetBeans jako projekt "Java with Maven" -> "Project from archetype", dále najdeme "maven-archetype-webapp" s Group ID "org.apache.ma­ven.archetypes". Postup jsme si již ukazovali. Pokud nepoužíváte NetBeans, tak přes konzoli pomocí následujícího příkazu:

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

Příprava projektu

Stejně jako minule bude potřeba zprovoznit EL výrazy a přidat závislosti.

web.xml

Přidejme do deskriptoru našeho projektu (souboru web.xml) následující kus kódu, aby nám fungovala zpracování JSF EL výrazů (stejně jako tomu bylo v minulé lekci):

<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <!-- This is important -->
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
    <!-- This is important -->
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

pom.xml

Než začneme vyvíjet, musíme opět přidat potřebné závislosti/Maven doplňky. Otevřme pom.xml a přidejme do něj následující závislost:

<dependency>
    <groupId>javax</groupId>
    <artifactId>javaee-api</artifactId>
    <version>8.0</version>
    <type>jar</type>
</dependency>

A dále doplněk, který nám umožní nasazovat na server přes konzoli:

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

Úprava souborů

Jelikož opět pracujeme s JSF, smažme soubor index.jsp a nahraďme ho index.xhtml. Dále musíme vytvořit složku java/ ve složce webapp/. A už jsme připraveni vyvíjet.

CDI Bean

Stejně jako minule začneme přidáním beanu, který v našem případě pojmenujeme KalkulackaBean. Nezapomeňte ho nastavit jako @RequestScoped. Třídu vložíme do nového balíčku beans.

Naše kalkulačka bude vypadat následovně:

V beanu potřebujeme 2 vstupní vlastnosti pro čísla typu double. Dále výstupní vlastnost pro výsledek, vlastnost s vybranou operací a seznam operací k výběru.

Třída je opravdu jednoduchá a proto si rovnou uvedeme její kód:

package beans;

import java.util.LinkedHashMap;
import java.util.Map;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class KalkulackaBean {

    private double cislo1;
    private double cislo2;
    private double vysledek;
    private String operace;
    private Map<String, String> mozneOperace;

    public KalkulackaBean() {
        mozneOperace = new LinkedHashMap<>();
        mozneOperace.put("Sečti", "+");
        mozneOperace.put("Odečti", "-");
        mozneOperace.put("Vynásob", "*");
        mozneOperace.put("Vyděl", "/");
    }

    public void vypocitej()
    {
        switch (operace)
        {
            case "+":
                vysledek = cislo1+ cislo2;
                break;
            case "-":
                vysledek = cislo1- cislo2;
                break;
            case "*":
                vysledek = cislo1* cislo2;
                break;
            case "/":
                vysledek = cislo1/ cislo2;
                break;
        }

    }

}

Jediná zajímavost je, že seznam operací jsme implementovali jako hashmapu. To proto, že v HTML má položka v selectu (rozbalovací nabídce) vždy 2 hodnoty. Jednu, která je zobrazena uživateli a druhou, která se odešle. Ta druhá nemůže obsahovat diakritiku.

Hashmapa je pro nás jako stvořená, klíče zvolíme jako znaménka a hodnoty jako český popisek operací s diakritikou. Jelikož potřebujeme, aby zůstalo zachované pořadí klíčů, použijeme LinkedHashMap.

Pokud vám NetBeans mapy podtrhá, dodejte následující importy:

import java.util.LinkedHashMap;
import java.util.Map;

Zbývá již jen vygenerovat gettery a settery, abychom s beanem mohli pracovat z šablony pomocí EL výrazů. Nechme tedy NetBeans, aby je za nás vygeneroval:

Dialog pro gettery a settery vyvoláme kliknutím pravého tlačitka myši na název třídy (v kódu). V kontextové nabídce zvolíme Refactor -> Encapsulate Fields.

V beanu jsme hotoví, přejděme do šablony.

Šablona

Opět si uvedeme již hotový kód, který si vysvětlíme.

<?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"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Kalkulačka</title>
    </h:head>
    <h:body>
        <h1>Kalkulačka</h1>

        <h:form>
            <h:messages style="color: red"></h:messages>
            <table>
                <tr>
                    <td>
                        Číslo 1
                    </td>
                    <td>
                        <h:inputText required="true" value="#{kalkulackaBean.cislo1}" converterMessage="Zadejte celé číslo" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Číslo 2
                    </td>
                    <td>
                        <h:inputText required="true" value="#{kalkulackaBean.cislo2}" converterMessage="Zadejte celé číslo" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Operace
                    </td>
                    <td>
                        <h:selectOneMenu value="#{kalkulackaBean.operace}">
                            <f:selectItems value="#{kalkulackaBean.mozneOperace}" />
                        </h:selectOneMenu>
                    </td>
                </tr>
            </table>

            <h:commandButton value="Odeslat" action="#{kalkulackaBean.vypocitej}" />

        </h:form>
        <p style="font-size: 2em;">
            <h:outputText value="#{kalkulackaBean.vysledek}" />
        </p>
    </h:body>
</html>

Projekt opět nasadíme přes příkazovou řádku: mvn wildfly:deploy.

Form

Formulář s kalkulačkou vložíme do JSF komponenty <h:form>. Právě tato komponenta se následně vyrenderuje jako HTML formulář.

Messages

Dovnitř vložíme komponentu <h:messages>. Tam nám JSF vypíše případné chybové hlášky validátoru formuláře. Ano, i to udělá JSF za nás, podle datových typů v beanu zkontroluje, zda uživatel zadává smysluplnou hodnotu.

Obsah formuláře vložíme do HTML tabulky, jak je zvykem. Pole budou tak hezky zarovnaná k jejich popiskům.

Pro vložení hodnot do formuláře jsme použili komponenty:

InputText

InputText je vstupní pole, které můžeme pomocí EL výrazu v atributu value přímo napojit na nějakou vlastnost beanu. V poli se tak zobrazí hodnota z této vlastnosti a po odeslání formuláře se naopak beanu nastaví hodnota zadaná v tomto poli.

Každému poli můžeme nastavit atribut required v případě, že ho je nutné pro odeslání formuláře vyplnit. V opačném případě JSF nedovolí formulář odeslat. Jako další atribut můžeme uvést chybovou hlášku, která se zobrazí v případě, že uživatel zadá neplatnou hodnotu.

SelectOneMenu

Menu (v HTML elementy select a option) vygenerujeme pomocí komponenty SelectOneMenu, které opět ve value předáme vlastnost beanu, která se pomocí menu zadává. Samotné položky vygenerujeme pomocí elementu selectItems, kde zadáme přímo naši hashmapu na beanu.

SelectItems není ze jmenného prostoru s aliasem h, ale z prostoru http://xmlns.jcp.org/jsf/core, je ho třeba na začátku XML uvést. Netbeans nám v šabloně perfektně napovídá a provede to za nás, stejně jako napovídá vlastnosti na beanu, doplňuje názvy JSF komponent, jejich atributů a i HTML značky. To celé ještě urychluje vývoj aplikace.

CommandButton

Odesílací tlačítko formuláře vložíme jako JSF komponentu commandButton. V atributech uvedeme popisek tlačítka a v EL výrazu metodu, která se má zavolat ve chvíli, kdy se formulář odešle.

JSF po odeslání formuláře samo nastaví hodnoty z formulářových polí do vlastností beanu a vykoná nastavenou metodu. Vše se provede na té samé stránce, na které je formulář. Této situaci se říká PostBack.

Na konci stránky již pouze vypisujeme výsledek. Tentokrát jsme použili komponentu outputText, což je alternativní způsob přímého vložení EL výrazu do šablony, jako jsme si to ukazovali při výpisu náhodného čísla v minulém dílu.

Aplikaci si nyní vyzkoušejte, opět vidíme, co vše za nás JSF udělá. U velkých aplikací ušetříme spoustu zbytečného kódu.

Můžete si zkusit zadat nekorektní vstup, JSF vypíše chybovou hlášku:

Ta vznikla na základě toho, že se hodnotu nepodařilo naparsovat na typ double.

Dnešní projekt je se zdrojovými kódy v příloze níže. Příště, v lekci Kvíz - Úvod a práce s JSF a CDI v JavaEE, si představíme jednotlivé JSF komponenty, se kterými budeme v seriálu dále pracovat.

V následujícím kvízu, Kvíz - Úvod a práce s JSF a CDI v JavaEE, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.