Java Server Faces

standard
komponentový systém pro tvorbu nejen webových aplikací

verze 1.1 a 1.2
brzy vyjde verze 2.0

JSP vs Facelets

JSF RI
MyFaces

JSF má podporu (možná bohužel) pro více renderovacích systémů (HTML, ...)
JSP - původně pro snadný přechod
My používáme facelets

Web

URL
Požadavek – GET, POST, ...
Cookies
Session

Odkazy (označování odkazů)
Back a Forward
Záložky
Reload
Více panelů

Request - GET a POST
- GET – když chci něco od serveru získat
  - parametry viditelné v URL
  - možnost předání URL
  - délka omezena
- POST – když chci něco na server dostat
  - parametry nejsou v URL vidět
  - bez omezení rozsahu
  - jediné řešení pro soubory a přihlašování
  - problémy s reload, dvojitý submit
- Parametry: Validace vstupu - ověřovat, ověřovat, ověřovat, ověřovat
Session
Odkazy (označování odkazů)
Back a Forward
záložky
Reload
Více panelů

Ukázková aplikace

Nejprve se podíváme na praktickou ukázku aplikace
Jedna z nejsložitějších aplikací - Hello World

Ukázková aplikace

Vytvoření projektu:

mvn archetype:create  -DarchetypeArtifactId=softeu-archetype-jsf 
-DremoteRepositories=http://maven.softeu.cz/ 
-DgroupId=cz.softeu.test -DartifactId=helloApp

Nejprve se podíváme na praktickou ukázku aplikace
Jedna z nejsložitějších aplikací - Hello World

MVC

Model – data aplikace
View – transformace modelu do prezentační formy
tj. to co uživatel vidí
Controller – prostředník mezi Model a View. Provádí operace

Návrhový vzor

Model

public class HelloBean {
    private String name;

    public String getName() {
        return name;

    }
    public void setName(String name) {
        this.name = name;

    }
}

View – kostra

<?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:ui="http://java.sun.com/jsf/facelets">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title><ui:insert name="title"/> - helloApp </title>
</head>
<body>
    <ui:insert name="content" />
</body>
</html>

Je to XML
namespace je povinný a slouží k ...
ui:insert

View

<?xml version="1.0" encoding="UTF-8"?>

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        template="/WEB-INF/template/default.xhtml">

<ui:define name="title">Hello World</ui:define>
<ui:define name="content">
   <h:form>
        <h2>Please enter your name:
           <h:inputText id="name" value="#{helloBean.name}" required="true"/></h2>

        <h:commandButton value="press me" action="#{helloAction.send}"/>
        <h:message for="name"/>
   </h:form>
</ui:define>

</ui:composition>

h:form
expression language EL
h:message

Binding

Navázání komponent #{helloBean.name}

<faces-config>
  <managed-bean>
      <managed-bean-name>helloBean</managed-bean-name>
      <managed-bean-class>cz.softeu.test.HelloBean</managed-bean-class>
      <managed-bean-scope>request</managed-bean-scope>
  </managed-bean>
</faces-config>

Controller

package cz.softeu.test;

public class HelloAction {

    /**
     * Action method
     */
    public String send(){

        //do something real

        return (“success”);
    }
}

Controller – binding

Do faces-config.xml přidat:

<faces-config>
  <managed-bean>
     <managed-bean-name>helloAction</managed-bean-name>

     <managed-bean-class>cz.softeu.test.HelloAction</managed-bean-class>
     <managed-bean-scope>request</managed-bean-scope>
  </managed-bean>
</faces-config>

Controller – navigace

Volání akce:

...
<h:commandButton value="press me" action="#{helloAction.send}"/>
...

Do faces-config.xml přidat:

<navigation-rule>

        <from-view-id>/index.xhtml</from-view-id>
        <navigation-case>
                <from-outcome>success</from-outcome>
                <to-view-id>/hello.xhtml</to-view-id>

        </navigation-case>
</navigation-rule>

JSF Podrobněji

Komponenty

<h:outputLabel for="username">User Name:</h:outputLabel>
<h:inputText id="username" label="User Name" class="input-edit" 
   		value="#{user.userName}" />
   		
<h:selectOneMenu id="dnsDomain" label="DNS Domain" value="#{user.dnsDomain}">
   <f:selectItem itemValue="" itemLabel="-- select value --" />
   <s:selectItems value="#{dnsList.fullList}" var="detail" label="#{detail.name}" />
</h:selectOneMenu>	
   
<h:inputTextarea ... cols="40" rows="6" ... / >
   
<h:selectBooleanCheckbox ... />
   
<h:commandButton value="Reserve" action="#{conceptHost.reserve}"/>
   
<rich:calendar value="#{data.enableFrom}" locale="#{localeSelector.locale}" popup="true" 
    datePattern="#{settings.dateFormat}" enableManualInput="true" />

Expression Language

Jednoduchý jazyk
Podpora property (Beans/POJO)
Podpora funkcí

Používají se pro:
- Zobrazování hodnot
- Vytváření pomdínek
- Mapování property
- Volání akcí

Příklady:

   #{promenna.properta}
   #{promenna}
   #{promenna.pole[pokus]}
   #{not empty hodnota}
   #{fn:toUpperCase(customer.name)}	
   #{a == 10 and c == '11'}

Lze přidávat funkce
Nemá spojení řetězců :-(

Binding

Hodnoty využívané pro EL
Definujeme:
- název
- třídu (class)
- rozsah platnosti
Místa definice:
- ve faces-config.xml
- v Seamu pomocí anotace @Name("helloBean")
- vlastním funkce resolver

v Seamu definice také pomocí anotací

   @Name("helloBean")
   @Scope(ScopeType.EVENT)
   class HelloBean {

Plugovatelné resolvery

Rozsah platnosti (Scope)

Hodnoty mají omezenou platnost
- Název aplikace
- Nákupní košík
- Přihlášený uživatel
- Hodnoty v průvodci
JSF podporuje:
- APPLICATION
- SESSION
- EVENT
- PAGE
- STATELESS

Akce

Funkce volaná při stisku tlačítka
Funkce volaná při zobrazení stránky
Není nutné implementovat nějaké rozhraní
Definice pomocí EL
Vrací String nebo je void

Navigace

Pravidla pro přesměrování na základě výsledku akce

Do faces-config.xml:

<navigation-rule>
   <from-view-id>/tabular.xhtml</from-view-id>
   <navigation-case>
        <from-outcome>drilldown</from-outcome>
        <to-view-id>/edit.xhtml</to-view-id>
   </navigation-case>
</navigation-rule>

Seam umožňuje do tabular.page.xml:

<navigation>
   <rule if-outcome="drilldown">
      <redirect view-id="/edit.xhtml"/>
   </rule>
</navigation>

akce umožňují vrátit string
null je zůstat na stejné stránce
redirect vs to-view-id

Validace

<h:inputText ... >
	<f:validateLength minimum="2" maximum="25" />
</h:inputText>

<f:validateDoubleRange minimum="" maximum="" />
<s:convertEntity />

Vlastní validace

Do faces-config.xml:

        <validator>
                <validator-id>myValidator</validator-id>
                <validator-class>cz.softeu.test.MyValidator</validator-class>
        </validator>

V šabloně:

<h:inputText ...>
   <f:validator validatorId="myValidator"/>
</h:inputText>

public class MyValidator implements Validator {
   public void validate(FacesContext facesContext, UIComponent uiComp, Object value)
                    throws ValidatorException {
      FacesMessage fm = new FacesMessage(FacesMessage.SEVERITY_ERROR, 
      			"Always fail", "This validator always fails.");
      throw new ValidatorException(fm);
   }
}

lze používat lokalizované texty (MessageResources)

Hibernate Validator

Knihovna pro validace
Podpora Hibernate a JSF
Validační pravidla jsou umístěna v modelu

@Length(min=, max=)
@NotNull
@Pattern(regex="regexp", flag=)
@Email
@Digits
...

Někdy je lepší mít validační pravidla v modelu a někdy ve view

Konverze a formátování

Převádí HTML formu na hodnotu v aplikaci
Formátování datumu
Formátování čísel

<f:convertDateTime />
<f:convertNumber />

U čísel není potřeba, používá to aktuální locale pro uživatele

Messages

Ve validátorech nastávají chyby:
- globální
- pro danou položku
různé důležitosti (severity):
- INFO, WARN, ERROR, FATAL

V kódu:

FacesContext.getCurrentInstance().addMessage("fieldName",
						 new FacesMessage("Error description"));

V šabloně:

<h:messages showOnlyGlobal="true" styleClass="errors" >
<h:message for="fieldName" styleClass="errors">

u fieldů uvádět atribut 'label'
Když zapomenete messages a selže validace, nedozvíte se to (JSF-RI to vypíše do logu)

Fáze

c:forEach vs ui:repeat

c:forEach – vyhodnocení ve fázi restore-view
ui:repeat – vyhodnocení ve fází render-response

<ui:repeat value="#{bean.users}" var="user">
	#{user.fullName}
</ui:repeat>

kombinace s c:if

AJAX

Kvalita komponent

Integrace s dalšímií knihovnami (Seam + Hibernate)

RichFaces + Ajax4JSF
ICEFaces

našeptávač (suggest)
výběr datumu
modální okna
drag&drop, progress bar, menu, tree

<h:inputText id="field" value="#{hostGroupHome.filter.idTe}" />
<rich:suggestionbox for="field"
       suggestionAction="#{teManager.autocomplete}"
       var="detail"
       selfRendered="true"
       fetchValue="#{detail.id}">
    <h:column>
         <h:outputText value="#{detail.name}" />
    </h:column>
</rich:suggestionbox>

Komponentový systém je vhodný pro tvorbu komponent.

Problémy

SEO
REST
Kvalita komponent
Integrace s dalšímií knihovnami (Seam + Hibernate)
...

Problémy jsou specifické pro programátora - musí vědět co používat a co ne
URL Rewriter
Preferovat h:outputLink před h:commandLink
Používat správný scope

Seam

Integrace komponent
- Hibernate
- Hibernate validator
- JAAS a Hibernate Drools
- Portlety
- JSF
Zlepšují práci s JSF
- @Name
- @RequestParameter
Příští přednáška :-)

Problémy jsou specifické pro programátora - musí vědět co používat a co ne
URL Rewriter

Závěr

http://blog.softeu.cz/prednasky/2007/jsf-a-seam/

Obsah

Java Server Faces

Web

Ukázková aplikace

Ukázková aplikace

MVC

Model

View – kostra

View

Binding

Controller

Controller – binding

Controller – navigace

JSF Podrobněji

Komponenty

Expression Language

Binding

Rozsah platnosti (Scope)

Akce

Navigace

Validace

Vlastní validace

Hibernate Validator

Konverze a formátování

Messages

Fáze

c:forEach vs ui:repeat

AJAX

Problémy

Seam

Závěr