Skip to content

8. Introduzione a PrimeFaces Mobile

8.1. Il ruolo di PrimeFaces Mobile in un’applicazione JSF

Torniamo all’architettura di un’applicazione Primefaces così come l’abbiamo esaminata all’inizio di questo documento:

Quando il destinatario è il browser di un telefono cellulare, è necessario modificare la presentazione. Infatti, occorre tenere conto delle dimensioni dello schermo di uno smartphone e ripensare l’ergonomia delle pagine. Esistono librerie specializzate nella creazione di pagine web per dispositivi mobili. È il caso della libreria Primefaces mobile, che a sua volta si basa sulla libreria JQuery mobile.

L’architettura di un’applicazione web per dispositivi mobili sarà identica a quella precedente, con la sola differenza che, oltre a JSF e Primefaces, utilizzeremo la libreria Primefaces mobile (PFM).

Ripasseremo tutti i concetti studiati con JSF e Primefaces. Cambierà solo il livello [présentation] (principalmente le pagine).

8.2. I vantaggi di Primefaces Mobile

Il sito di Primefaces Mobile

[http://www.primefaces.org/showcase-labs/mobile/showcase.jsf?javax.faces.RenderKitId=PRIMEFACES_MOBILE]

fornisce l’elenco dei componenti utilizzabili in una pagina PFM [1, 2]:

È possibile utilizzare simulatori di smartphone per visualizzare l'applicazione demo sopra riportata. Uno di questi è disponibile per l'iPhone 4 all'indirizzo URL [http://iphone4simulator.com/] [3]. Si inserisce l'indirizzo dell'applicazione da testare in [4] e questa viene visualizzata con le dimensioni dell'iPhone. Tali simulatori sono utili in fase di sviluppo, ma alla fine l'applicazione deve essere testata in condizioni reali su diversi dispositivi mobili.

8.3. Apprendimento di PrimeFaces Mobile

PrimeFaces Mobile offre molti meno componenti rispetto a PrimeFaces. Il sito di PrimeFaces Mobile

[http://www.primefaces.org/showcase-labs/mobile/showcase.jsf?javax.faces.RenderKitId=PRIMEFACES_MOBILE]

ne fornisce l’elenco. Ecco, ad esempio, i componenti utilizzabili in un modulo [1], [2], [3]:

È possibile scaricare il codice sorgente degli esempi [4]. Scopriamo così che la pagina PFM, che visualizza i componenti [1], [2], [3] sopra indicati, è la seguente:


<?xml version="1.0" encoding="windows-1250"?>
<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"
        contentType="text/html">

    <pm:page title="Components">
        <!-- Moduli -->
        <pm:view id="forms">
            <pm:header title="Forms">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>
            <pm:content>
                <p:inputText label="Input:" />   
                <p:inputText label="Search:" type="search"/>
                <p:inputText label="Phone:" type="tel"/>
                <p:inputTextarea id="inputTextarea" label="Textarea:"/>
                <pm:field>
                    <h:outputLabel for="selectOneMenu" value="Dropdown: "/>
                    <h:selectOneMenu id="selectOneMenu">
                        <f:selectItem itemLabel="Select One" itemValue="" />
                        <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                        <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                        <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                    </h:selectOneMenu>
                </pm:field>
                <pm:inputRange id="range" minValue="0" maxValue="100" label="Range:" />
                <pm:switch id="switch" onLabel="yes" offLabel="no" label="Switch:" />
                <p:selectBooleanCheckbox id="booleanCheckbox" value="false" itemLabel="I agree" label="Checkbox"/>
                <p:selectManyCheckbox id="checkbox" label="Checkboxes: ">
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                </p:selectManyCheckbox>
                <p:selectOneRadio id="radio" label="Radios: ">
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                </p:selectOneRadio>
            </pm:content>
        </pm:view>
    </pm:page>
</f:view>
  • riga 7: compare un nuovo spazio dei nomi, quello dei componenti PrimeFaces Mobile con prefisso pm,
  • riga 10: definisce una pagina. Una pagina sarà composta da diverse viste (riga 12). In un dato momento è visibile una sola vista. Ritroviamo qui un concetto che abbiamo ampiamente utilizzato nei nostri esempi PrimeFaces: un'unica pagina con diversi frammenti che vengono visualizzati o nascosti. In questo caso, non dovremo ricorrere a questa procedura. Indicheremo semplicemente la vista da visualizzare, mentre le altre saranno necessariamente nascoste,
  • riga 12: una vista,
  • righe 13-15: definiscono l’intestazione della vista: 


<pm:header title="Forms">
    <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
</pm:header>
  

Da notare il tag per generare un pulsante. L'attributo href consente di navigare. Il suo valore qui è il nome di una vista. Cliccando sul pulsante si tornerà (reverse=true) alla vista denominata main (non rappresentata qui).

  • riga 16: introduce il contenuto della vista,
  • riga 17: genera un campo di immissione: 

                <p:inputText label="Input:" />
  
  • riga 18: un campo di immissione con un'icona particolare: 

                <p:inputText label="Search:" type="search"/>
  
  • riga 19: un campo di inserimento per un numero di telefono: 

                <p:inputText label="Phone:" type="tel"/>
  

L'attributo "type" di un tag <inputText> ha un significato: determina il tipo di tastiera proposta all'utente per l'inserimento dei dati. Pertanto, per type='tel' verrà proposta una tastiera numerica,

  • riga 20: un campo di immissione multilinea ed espandibile: 

                <p:inputTextarea id="inputTextarea" label="Textarea:"/>
  
  • righe 21-29: un campo che raggruppa diversi componenti: 

                <pm:field>
                    <h:outputLabel for="selectOneMenu" value="Dropdown: "/>
                    <h:selectOneMenu id="selectOneMenu">
                        <f:selectItem itemLabel="Select One" itemValue="" />
                        <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                        <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                        <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                    </h:selectOneMenu>
</pm:field>
 
  • riga 2: la dicitura per il componente della riga 3;
  • riga 3: un menu a tendina;
  • righe 4-7: il suo contenuto,
  • riga 30: un cursore: 

                <pm:inputRange id="range" minValue="0" maxValue="100" label="Range:" />
  
  • riga 31: un pulsante a due valori: 

                <pm:switch id="switch" onLabel="yes" offLabel="no" label="Switch:" />
 
  • riga 32: una casella di controllo: 

      <p:selectBooleanCheckbox id="booleanCheckbox" value="false" itemLabel="I agree" label="Checkbox"/>
  
  • righe 33-37: un gruppo di caselle di selezione: 

                  <p:selectManyCheckbox id="checkbox" label="Checkboxes: ">
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                </p:selectManyCheckbox>
  
  • righe 38-42: un gruppo di pulsanti di opzione 

                    <p:selectOneRadio id="radio" label="Radios: ">
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                </p:selectOneRadio>
  

Si noti che la pagina utilizza tag delle tre librerie JSF, PF e PFM. Ora sappiamo abbastanza per realizzare il nostro primo progetto PrimeFaces mobile.

8.4. Un primo progetto Primefaces mobile: mv-pfm-01

Riprenderemo l’esempio studiato in precedenza per integrarlo in un progetto Maven. Scopriremo così le dipendenze necessarie per un progetto Primefaces mobile.

8.4.1. Il progetto NetBeans

Il progetto NetBeans è il seguente:

Il progetto NetBeans è inizialmente un progetto web Maven di base a cui sono state aggiunte le dipendenze [2]. Ciò si traduce nel file [pom.xml] con il seguente codice:


<dependency>
      <groupId>com.sun.faces</groupId>
      <artifactId>jsf-impl</artifactId>
      <version>2.1.8</version>
    </dependency>
    <dependency>
      <groupId>org.primefaces</groupId>
      <artifactId>primefaces</artifactId>
      <version>3.2</version>
    </dependency>
    <dependency>
      <groupId>org.primefaces</groupId>
      <artifactId>mobile</artifactId>
      <version>0.9.1</version>
      <type>jar</type>
    </dependency>
  </dependencies>
  <repositories>
    <repository>
      <url>http://download.java.net/maven/2/</url>
      <id>jsf20</id>
      <layout>default</layout>
      <name>Repository for library Library[jsf20]</name>
    </repository>
    <repository>
      <url>http://repository.primefaces.org/</url>
      <id>primefaces</id>
      <layout>default</layout>
      <name>Repository for library Library[primefaces]</name>
    </repository>
  </repositories>

Nelle righe 11-16 è presente la dipendenza da Primefaces Mobile. In questo caso abbiamo utilizzato la versione 0.9.1 (riga 14). Inoltre, abbiamo utilizzato la versione 3.2 di Primefaces (riga 9). Questi numeri di versione sono importanti. Infatti, ho riscontrato parecchi problemi con PFM, che è una libreria non definitiva. Per un certo periodo è esistita una versione 0.9.2 che presentava dei bug. Da allora è stata rimossa. Siamo tornati alla versione 0.9.1. Il progetto PFM ha quindi subito un regresso. I test sono falliti anche con la versione 1.0-SNAPSHOT della versione 1.0 in fase di sviluppo (inizio giugno 2012).

La pagina iniziale [index.xhtml] [1] è la pagina di dimostrazione dei componenti PrimeFaces Mobile:


<?xml version="1.0" encoding="windows-1250"?>
<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"
        contentType="text/html">

  <pm:page title="Components">

    <!-- Vista principale -->
    <pm:view id="main">
      ...
    </pm:view>

    <!-- Moduli -->
    <pm:view id="forms">
      ...
    </pm:view>


    <!-- Pulsanti -->
    <pm:view id="buttons">
      ...
    </pm:view>

    ...
  </pm:page>
</f:view>

C'è un'unica pagina (riga 10) composta da dodici viste. Non le descriveremo in dettaglio. Lo scopo qui è semplicemente mostrare come creare un progetto PrimeFaces Mobile.

Eseguiamo questo progetto. Si ottiene una pagina di errore [1]:

Il motivo è che un’applicazione mobile Primefaces deve essere richiamata con il parametro [?javax.faces.RenderKitId=PRIMEFACES_MOBILE], come in [2]. È possibile fare a meno di questo parametro modificando il file [faces-config.xml] (o creandolo se non esiste, come in questo caso) [3]:

Il suo contenuto è il seguente:


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

<!-- =========== FULL CONFIGURATION FILE ================================== -->

<faces-config version="2.0"
              xmlns="http://java.sun.com/xml/ns/javaee" 
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
              xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">

  <application>
    <default-render-kit-id>PRIMEFACES_MOBILE</default-render-kit-id>
  </application>
</faces-config>
  • riga 11: imposta il valore del parametro [javax.faces.RenderKitId].

All’esecuzione, si ottiene la stessa pagina di prima ma senza dover impostare alcun parametro per URL e [4]. Lasciamo al lettore il compito di testare questa applicazione. Si riscontrano alcuni bug: il tag <p:selectManyCheckbox> non viene visualizzato, lo stesso vale per il tag <p:selectOneRadio>, mentre il tag <pm:range> non funziona. Questi malfunzionamenti, che non si riscontrano sul sito della demo, lasciano supporre che quest’ultima non funzioni con la combinazione qui utilizzata di Primefaces Mobile 0.9.1 e Primefaces 3.2. Si tratta comunque di un punto di partenza per scoprire i tag di questa libreria ancora in fase di sviluppo.

Per ottenere un risultato più realistico, è possibile testare l’applicazione su un simulatore come quello dell’iPhone 4 [http://iphone4simulator.com/]. Si ottiene quanto segue:

Si inserisce [5], lo stesso URL utilizzato dal browser precedente in [4].

8.5. Esempio mv-pfm-02: modulo e modello

In questo progetto illustriamo le interazioni tra una pagina Primefaces mobile e il suo modello. Queste seguono le regole del framework JSF su cui si basa, in definitiva, Primefaces mobile.

8.5.1. Le viste

Nel progetto sono presenti due viste

  • la vista 1 [1] presenta un modulo che può essere convalidato [2],
  • la vista 2 [3] conferma i dati inseriti e offre la possibilità di tornare al modulo [4].

Il progetto illustra due aspetti:

  • la relazione tra una pagina e il suo modello,
  • la navigazione tra le viste della pagina.

8.5.2. Il progetto NetBeans

Il progetto NetBeans è il seguente:

  • in [1], la pagina PrimeFaces mobile,
  • in [2], il relativo modello
  • in [3], i file dei messaggi poiché l'applicazione è internazionalizzata,
  • in [4], le dipendenze del progetto.

8.5.3. Configurazione del progetto

Forniamo i file di configurazione senza spiegarli. Ormai sono standard.

[web.xml]: configura l'applicazione web:


<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

[faces-config.xml]: configura l'applicazione JSF:


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

<!-- =========== FULL CONFIGURATION FILE ================================== -->

<faces-config version="2.0"
              xmlns="http://java.sun.com/xml/ns/javaee" 
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
              xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">

  <application>
    <resource-bundle>
      <base-name>
        messages
      </base-name>
      <var>msg</var>
    </resource-bundle>
    <message-bundle>messages</message-bundle>
    <default-render-kit-id>PRIMEFACES_MOBILE</default-render-kit-id>
  </application>
</faces-config>

[messages_fr.properties]: il file dei messaggi in francese:


forms=Formulaire
input=Saisie de texte
textarea=Saisie multi-lignes
dropdown=Liste d\u00e9roulante
range=Slider
switch=Switch
checkbox=Case \u00e0 cocher
checkboxes=Cases \u00e0 cocher
radios=Boutons radio
valider=Valider
confirmations=Confirmations
back=Retour

8.5.4. La pagina Primefaces mobile

La pagina [index.xhtml] è la seguente:


<?xml version="1.0" encoding='UTF-8'?>
<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"
        contentType="text/html">

  <pm:page title="mv-pfm-02">

    <!-- vista Forms -->
    <pm:view id="forms" swatch="b">
      <pm:header title="#{msg['forms']}"/>
      <pm:content>
        <h:form id="formulaire">
          <p:inputText id="inputText" label="#{msg['input']}" value="#{form.inputText}"/>
          <p:inputTextarea id="inputTextArea" label="#{msg['textarea']}" value="#{form.inputTextArea}"/>
          <pm:field>
            <h:outputLabel for="selectOneMenu" value="#{msg['dropdown']}"/>
            <h:selectOneMenu id="selectOneMenu" value="#{form.selectOneMenu}">
              <f:selectItem itemLabel="Option 1" itemValue="1" />
              <f:selectItem itemLabel="Option 2" itemValue="2" />
              <f:selectItem itemLabel="Option 3" itemValue="3" />
            </h:selectOneMenu>
          </pm:field>
          <pm:inputRange id="range" minValue="0" maxValue="100" label="#{msg['range']}" value="#{form.range}"/>
          <pm:switch id="switch" onLabel="yes" offLabel="no" label="#{msg['switch']}" value="#{form.bswitch}"/>
          <p:selectBooleanCheckbox id="booleanCheckbox" itemLabel="I agree" label="#{msg['checkbox']}" value="#{form.booleanCheckbox}"/>
          <pm:field>
            <h:outputLabel for="manyCheckbox" value="#{msg['checkboxes']}"/>
            <h:selectManyCheckbox id="manyCheckbox" value="#{form.manyCheckbox}">
              <f:selectItem itemLabel="Option 1" itemValue="1" />
              <f:selectItem itemLabel="Option 2" itemValue="2" />
              <f:selectItem itemLabel="Option 3" itemValue="3" />
            </h:selectManyCheckbox>
          </pm:field>
          <pm:field>
            <h:outputLabel for="radio" value="#{msg['radios']}"/>
            <h:selectOneRadio id="radio" value="#{form.radio}">
              <f:selectItem itemLabel="Option 1" itemValue="1" />
              <f:selectItem itemLabel="Option 2" itemValue="2" />
              <f:selectItem itemLabel="Option 3" itemValue="3" />
            </h:selectOneRadio>
          </pm:field>
          <p:commandButton inline="true" value="#{msg['valider']}" update=":infos" action="#{form.valider}"/>
        </h:form>
      </pm:content>
    </pm:view>

    <!-- vista informazioni -->
    <pm:view id="infos" swatch="b">
      <pm:header title="#{msg['confirmations']}">
        <f:facet name="left"><p:button value="#{msg['back']}" icon="back" href="#forms?reverse=true"/></f:facet>
      </pm:header>
      <pm:content>
        <ul>
          <li>#{msg['input']} : ${form.inputText}</li>
          <li>#{msg['textarea']} : ${form.inputTextArea}</li>
          <li>#{msg['dropdown']} : ${form.selectOneMenu}</li>
          <li>#{msg['range']} : ${form.range}</li>
          <li>#{msg['switch']} : ${form.bswitch}</li>
          <li>#{msg['checkbox']} : ${form.booleanCheckbox}</li>
          <li>#{msg['checkboxes']} : ${form.manyCheckboxValue}</li>
          <li>#{msg['radios']} : ${form.radio}</li>
        </ul>
      </pm:content>
    </pm:view>
  </pm:page>
</f:view>

Abbiamo ripreso l'esempio dimostrativo dal sito di Primefaces mobile adattandolo affinché funzionasse:

  • il tag <p:selectManyCheckbox> non veniva visualizzato. Lo abbiamo sostituito con un tag <h:selectManyCheckbox> (riga 32),
  • il tag <p:selectOneRadio> non veniva visualizzato. Lo abbiamo sostituito con un tag <p:selectOneRadio> (riga 40),
  • riga 27: abbiamo mantenuto il tag <pm:inputRange> che visualizza uno slider. Questo presenta un bug: non è possibile spostare il cursore dello slider. Tuttavia, è possibile inserire un numero che lo fa muovere,
  • si noti che ci sono pochi tag specifici di PFM (righe 13, 14, 15, 19, 27, 28 nella prima vista). Gli altri tag sono tag JSF e PF classici. Primefaces mobile si basa su questi due framework.

Da notare la struttura della pagina:


<?xml version="1.0" encoding='UTF-8'?>
<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"
        contentType="text/html">

  <pm:page title="mv-pfm-02">

    <!-- vista Forms -->
    <pm:view id="forms" swatch="b">
      <pm:header ...>
      <pm:content>
        <h:form id="formulaire">
          ...
          <p:commandButton inline="true" value="#{msg['valider']}" update=":infos" action="#{form.valider}"/>
        </h:form>
      </pm:content>
    </pm:view>

    <!-- vista informazioni -->
    <pm:view id="infos" swatch="b">
      <pm:header title="#{msg['confirmations']}">
        <f:facet name="left"><p:button value="#{msg['back']}" icon="back" href="#forms?reverse=true"/></f:facet>
      </pm:header>
      <pm:content>
        ...
      </pm:content>
    </pm:view>
  </pm:page>
</f:view>
  • riga 10: definisce una pagina PFM. L'attributo title stabilisce il titolo visualizzato dal browser;
  • una pagina è composta da una o più viste. Al primo caricamento della pagina, viene visualizzata la prima vista. Successivamente si passa da una vista all’altra tramite la navigazione. In questo caso ci sono due viste: «forms» alla riga 13 e «infos» alla riga 24,
  • riga 14: il tag header definisce l'intestazione di una vista,
  • riga 15: il tag «content» definisce il contenuto di una vista,
  • riga 16: la vista «forms» contiene un modulo JSF,
  • riga 18: questo modulo verrà convalidato tramite un classico pulsante Primefaces. Il modulo verrà inviato al modello [Form] e verrà elaborato dal metodo [Form].valider. Questo metodo svolgerà il proprio compito. Vedremo che richiede la visualizzazione della vista «infos». In precedenza, questa vista sarà stata aggiornata dalla chiamata AJAX (attributo «update»),
  • riga 26: sarà possibile passare dalla vista «infos» alla vista «forms» tramite un pulsante. Si noti la forma dell’attributo href [href="#forms?reverse=true"]. La notazione #forms indica la vista «forms». Il parametro reverse=true richiede un ritorno indietro. Ho ripreso questo attributo dalla demo. Quando lo si rimuove, non si nota alcuna differenza su un simulatore... Forse ce n’è una sugli smartphone reali,
  • si noti infine l’utilizzo della libreria Primefaces mobile alla riga 7.

Sebbene introduca alcune novità, questa pagina PFM è del tutto comprensibile. Lo stesso vale per il suo modello [Form.java].

8.5.5. Il modello [Form.java]

Questo modello è il seguente:


package beans;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class Form implements Serializable {
  // modello

  private String inputText = "bonjour";
  private String inputTextArea = "ligne1\nligne2";
  private String selectOneMenu = "2";
  private int range = 4;
  private boolean bswitch = true;
  private boolean booleanCheckbox = false;
  private String[] manyCheckbox = {"1", "3"};
  private String radio = "3";

  public String valider() {
    // si passa alla vista informazioni
    return "pm:infos";
  }

  public String getManyCheckboxValue() {
    StringBuffer str = new StringBuffer("[");
    for (String checkbox : manyCheckbox) {
      str.append(checkbox);
    }
    str.append("]");
    return str.toString();
  }

  // getter e setter
  ...
}

Non c’è nulla di nuovo. È tutto già visto. Si noti comunque la forma del metodo valider chiamato dal modulo. Riga 21: restituisce una stringa di caratteri che ha la forma 'pm:nomedellavistada visualizzare'. In questo caso, verrà quindi visualizzata la vista infos. Il metodo non fa altro che eseguire questa navigazione. In precedenza, i campi delle righe 12-19 hanno ricevuto i valori inviati via POST. Questi serviranno ad aggiornare la vista "infos" (attributo "update" riportato di seguito):


<p:commandButton inline="true" value="#{msg['valider']}" update=":infos" action="#{form.valider}"/>

La vista «infos» visualizzerà quindi i valori inviati:

  

<pm:view id="infos" swatch="b">
      <pm:header title="#{msg['confirmations']}">
        <f:facet name="left"><p:button value="#{msg['back']}" icon="back" href="#forms"/></f:facet>
      </pm:header>
      <pm:content>
        <ul>
          <li>#{msg['input']} : ${form.inputText}</li>
          <li>#{msg['textarea']} : ${form.inputTextArea}</li>
          <li>#{msg['dropdown']} : ${form.selectOneMenu}</li>
          <li>#{msg['range']} : ${form.range}</li>
          <li>#{msg['switch']} : ${form.bswitch}</li>
          <li>#{msg['checkbox']} : ${form.booleanCheckbox}</li>
          <li>#{msg['checkboxes']} : ${form.manyCheckboxValue}</li>
          <li>#{msg['radios']} : ${form.radio}</li>
        </ul>
      </pm:content>
    </pm:view>

8.5.6. i di test

Si esegue il progetto NetBeans. Una volta che il progetto è stato distribuito su Tomcat [1], è possibile testarlo su un simulatore [http://iphone4simulator.com/] [2]:

Ora mostreremo come testarlo su uno smartphone reale. Collegheremo il server che ospita l'applicazione e lo smartphone alla stessa rete WIFI:

Colleghiamo il server alla rete Wi-Fi. Possiamo quindi verificarne l’indirizzo IP:

Si noti l’indirizzo IP del server riportato sopra: 192.168.1.127. Si disattivano eventuali firewall e antivirus presenti sul server:

 

Sul server, si avvia l’applicazione [mv-pfm-02] in NetBeans [1]:

Si collega lo smartphone alla stessa rete Wi-Fi del server in modo che i due dispositivi si riconoscano a vicenda. Quindi si apre un browser e si digita l'indirizzo URL [http://192.168.1.127:8080/mv-pfm-02/] [2]. A questo punto è possibile testare l'applicazione. Si scoprirà così con piacere che lo slider che non funziona nel simulatore funziona invece sullo smartphone. Esiste quindi una discrepanza tra i simulatori e i dispositivi reali.

8.6. Conclusion

Abbiamo presentato solo i tag dei moduli della libreria Primefaces Mobile, ma sono sufficienti per la nostra applicazione di esempio.

8.7. I test con Eclipse

Importiamo in Eclipse i progetti Maven [1] e li eseguiamo [2],

sul server Tomcat [3]. L’applicazione in esecuzione appare quindi nel browser interno di Eclipse [4].

Si noti che l'applicazione [mv-pfm-02] ha presentato malfunzionamenti nel browser di Eclipse. Se la si carica nei browser Firefox o IE, tali malfunzionamenti scompaiono.

https://stahe.github.io
Questo tutorial scritto da Serge Tahé è reso disponibile al pubblico secondo i termini della Creative Commons Attribuzione – Non commerciale – Condividi allo stesso modo 3.0 Unported.