4. díl - Zpracování formulářů v JSF

Java Enterprise Edition Zpracování formulářů v JSF

V minulém dílu tutoriálů o Java EE jsme se naučili základní principy JSF. V dnešním dílu si ukážeme, jak se zpracovávají formuláře. Naprogramujeme jednoduchou webovou kalkulačku.

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

CDI Bean

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

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

Kalkulačka v Java JSF

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.

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:

Generování getterů a setterů v NetBeans IDE

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>

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:

Validace formulářů v JSF

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

Dnešní projekt je se zerojovými kódy v příloze níže. Příště si představíme jednotlivé JSF komponenty, se kterými budeme v seriálu dále pracovat.


 

Stáhnout

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

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
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 se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (3 hlasů) :
4.666674.666674.666674.666674.66667


 


Miniatura
Předchozí článek
Úvod do JavaServer Faces (JSF)
Miniatura
Všechny články v sekci
Java Enterprise Edition (JEE)

 

 

Komentáře
Zobrazit starší komentáře (1)

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Důležitá je ta část

Caused by: java.lang.NullPointerException
        at beans.KalkulackaBean.vypocitej(KalkulackaBean.java:35)

Na řádku 35 metodu vypočítej nemám, neupravoval jsi to nějak?

Odpovědět 8.1.2014 17:32
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Milan Gallas
Redaktor
Avatar
Odpovídá na David Čápka
Milan Gallas:

Jo, chyba je na mé straně. Už vím, v čem byla chyba.

 
Odpovědět 8.1.2014 18:05
Avatar
Milan Gallas
Redaktor
Avatar
Odpovídá na David Čápka
Milan Gallas:

Problém by ten, že mi netbeans generuje místo

@RequestScoped

toto

@Dependent

Jak jsem to vyměnil, tak to šlo v pohodě.

 
Odpovědět  +1 8.1.2014 18:12
Avatar
nugget2
Člen
Avatar
nugget2:

Presne tohle jsem potreboval! Mockrat dekuji a tesim se na pokracovani.

 
Odpovědět  +1 11.1.2014 19:56
Avatar
javakoder1
Člen
Avatar
javakoder1:

Kdy bude pokračování?

 
Odpovědět  +2 14.4.2014 16:28
Avatar
Neaktivní uživatel:

výnorný seriál, chcelo by to pokračovanie :)

Odpovědět 18.8.2014 9:48
Neaktivní uživatelský účet
Avatar
Duff.Beerman
Člen
Avatar
Duff.Beerman:

Jak to jednoduše rozchodit na webu ?

 
Odpovědět 13.9.2014 16:39
Avatar
danielbill95
Člen
Avatar
danielbill95:

Ahoj, mám problém: Caused by: java.lang.Run­timeException: Uncompilable source code - javax.enterpri­se.context.Re­questScoped is not an annotation type
at beans.Kalkulac­kaBean.<clinit>(Kal­kulackaBean.ja­va:25)

na 25. řádku mám: @RequestScoped

 
Odpovědět 19.9.2014 16:28
Avatar
danielbill95
Člen
Avatar
Odpovídá na danielbill95
danielbill95:

Už jsem to spravil a vše funguje! :)

 
Odpovědět 19.9.2014 18:36
Avatar
vajkuba1234
Člen
Avatar
vajkuba1234:

Také by mě zajímalo, zda bude pokračování. Alespoň na úrovni tutoriálů k ASP.NET MVC. :)

Odpovědět 6.3.2015 12:46
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
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