4. diel - Spracovanie formulárov v JSF

V minulom dieli tutoriálov o Java EE, Úvod do JavaServer Faces (JSF) , sme sa naučili základné princípy JSF. V dnešnom dieli si ukážeme, ako sa spracovávajú formuláre. Naprogramujeme jednoduchú webovú kalkulačku.

Založte si nový projekt s názvom JSFKalkulacka.

CDi Bean

Rovnako ako minule začneme pridaním Beana, ktorý v našom prípade pomenujeme KalkulackaBean. Nezabudnite ho nastaviť ako @RequestScoped. Triedu vložíme do nového balíčka beans.

Naša kalkulačka bude vyzerať nasledovne:

Kalkulačka v Java JSF - Java Enterprise Edition (JEE)

V bean potrebujeme 2 vstupné vlastnosti pre čísla typu double. Ďalej výstupné vlastnosť pre výsledok, vlastnosť s vybranou operácií a zoznam operácií k výberu.

Trieda je naozaj jednoduchá a preto si rovno uvedieme 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á zaujímavosť je, že zoznam operácií sme implementovali ako HashMap. To preto, že v HTML má položka v selectu (rozbaľovacej ponuke) vždy 2 hodnoty. Jednu, ktorá je zobrazená užívateľovi a druhú, ktorá sa odošle. Tá druhá nemôže obsahovať diakritiku.

HashMap je pre nás ako stvorená, kľúče zvolíme ako znamienka a hodnoty ako český popisok operácií s diakritikou. Keďže potrebujeme, aby zostalo zachované poradie kľúčov, použijeme LinkedHashMap.

Ak vám NetBeans mapy podtrhá, dodajte nasledujúce importy:

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

Zostáva už len vygenerovať Getter a setter, aby sme s Beanom mohli pracovať z šablóny pomocou EL výrazov. Nechajme teda NetBeans, aby ich za nás vygeneroval:

Generovanie Getter a setter v NetBeans IDE - Java Enterprise Edition (JEE)

Dialóg pre Getter a setter vyvoláme kliknutím pravého tlačidla myši na názov triedy (v kóde). V kontextovej ponuke zvolíme Refactor -> Encapsulate Fields.

V bean sme hotoví, prejdime do šablóny.

Šablóna

Opäť si uvedieme už hotový kód, ktorý si vysvetlí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>

Form

Formulár s kalkulačkou vložíme do JSF komponenty <h:form>. Práve táto komponenta sa následne vyrenderuje ako HTML formulár.

Messages

Dovnútra vložíme komponent <h:messages>. Tam nám JSF vypíše prípadné chybové hlášky validátora formulára. Áno, aj to urobí JSF za nás, podľa dátových typov v bean skontroluje, či používateľ zadáva zmysluplnú hodnotu.

Obsah formulára vložíme do HTML tabuľky, ako je zvykom. Polia budú tak pekne zarovnaná k ich menovkám.

Pre vloženie hodnôt do formulára sme použili komponenty:

InputText

InputText je vstupné pole, ktoré môžeme pomocou EL výrazu v atribúte value priamo napojiť na nejakú vlastnosť bean. V poli sa tak zobrazí hodnota z tejto vlastnosti a po odoslaní formulára sa naopak Bean nastaví hodnota zadaná v tomto poli.

Každému poli môžeme nastaviť atribút required v prípade, že ho je nutné pre odoslanie formulára vyplniť. V opačnom prípade JSF nedovolí formulár odoslať. Ako ďalší atribút môžeme uviesť chybovú hlášku, ktorá sa zobrazí v prípade, že používateľ zadá neplatnú hodnotu.

SelectOneMenu

Menu (v HTML elementy select a option) vygenerujeme pomocou komponenty SelectOneMenu, ktoré opäť vo value odovzdáme vlastnosť Beana, ktorá sa pomocou menu zadáva. Samotné položky vygenerujeme pomocou elementu selectItems, kde zadáme priamo naši HashMap na Beana.

SelectItems nie je zo menného priestoru s aliasom h, ale z priestoru http://xmlns.jcp.org/jsf/core, je ho treba na začiatku XML uviesť. Netbeans nám v šablóne perfektne napovedá a vykoná to za nás, rovnako ako napovedá vlastnosti na Beana, doplňuje názvy JSF komponentov, ich atribútov a aj HTML značky. To celé ešte urýchľuje vývoj aplikácie.

CommandButton

Odosielacie tlačidlo formulára vložíme ako JSF komponent CommandButton. V atribútoch uvedieme označenie tlačidla a v EL výrazu metódu, ktorá sa má zavolať vo chvíli, keď sa formulár odošle.

JSF po odoslaní formulára samo nastaví hodnoty z formulárových polí do vlastností Bean a vykoná nastavenú metódu. Všetko sa vykoná na tej istej stránke, na ktorej je formulár. Tejto situácii sa hovorí PostBack.

Na konci stránky už len vypisujeme výsledok. Tentokrát sme použili komponent outputText, čo je alternatívny spôsob priameho vloženie EL výrazu do šablóny, ako sme si to ukazovali pri výpise náhodného čísla v minulom dieli.

Aplikáciu si teraz vyskúšajte, opäť vidíme, čo všetko za nás JSF urobí. U veľkých aplikácií ušetríme veľa zbytočného kódu.

Môžete si skúsiť zadať nekorektné vstup, JSF vypíše chybovú hlášku:

Validácia formulárov v JSF - Java Enterprise Edition (JEE)

Tá vznikla na základe toho, že sa hodnotu nepodarilo naparsovat na typ double.

Dnešný projekt je so zdrojovými kódmi v prílohe nižšie. Nabudúce, v lekcii Úvod do Context Dependency Injection (CDI) , si predstavíme jednotlivé JSF komponenty, s ktorými budeme v seriáli ďalej pracovať.

Nabudúce, v lekcii Úvod do Context Dependency Injection (CDI) , si vytvoríme svoju prvú webovú aplikáciu v JEE.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 369x (4.56 MB)
Aplikácia je vrátane zdrojových kódov v jazyku Java

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity

Najčastejšie vyhľadávané

4. diel - Spracovanie formulárov v JSF

CDi Bean

Šablóna

Form

Messages

InputText

SelectOneMenu

CommandButton

Stiahnuť