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 il layout. Infatti, occorre tenere conto delle dimensioni dello schermo di uno smartphone e riprogettare l'usabilità 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 mobile sarà identica a quella precedente, tranne per il fatto che, oltre a JSF e PrimeFaces, utilizzeremo la libreria PrimeFaces Mobile (PFM).

Ripasseremo tutti i concetti trattati con JSF e PrimeFaces. Cambierà solo il livello [di presentazione] (principalmente le pagine).

8.2. I vantaggi di PrimeFaces Mobile

Il sito web di PrimeFaces Mobile

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

fornisce un elenco di componenti che possono essere utilizzati 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'URL [http://iphone4simulator.com/] [3]. Inserite l'indirizzo dell'applicazione da testare in [4] e questa verrà visualizzata con le dimensioni dell'iPhone. Tali simulatori sono utili durante la fase di sviluppo, ma alla fine l'applicazione deve essere testata in condizioni reali su vari dispositivi mobili.

8.3. Imparare PrimeFaces Mobile

PrimeFaces Mobile offre un numero di componenti molto inferiore rispetto a PrimeFaces. Il sito web di PrimeFaces Mobile

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

ne fornisce un elenco. Ecco, ad esempio, i componenti che possono essere utilizzati in un modulo [1], [2], [3]:

È possibile scaricare il codice sorgente degli esempi [4]. La pagina PFM che mostra 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">
        <!-- Forms -->
        <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 namespace, quello dei componenti PrimeFaces Mobile con il prefisso pm,
  • riga 10: definisce una pagina. Una pagina sarà composta da diverse viste (riga 12). In un dato momento è visibile una sola vista. Questo è un concetto che abbiamo ampiamente utilizzato nei nostri esempi PrimeFaces: una singola pagina con più frammenti che possono essere mostrati o nascosti. Qui non dovremo farlo. Designeremo semplicemente la vista da visualizzare, mentre le altre verranno automaticamente 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>
  

Si noti il tag utilizzato per generare un pulsante. L'attributo href consente la navigazione. Il suo valore in questo caso è il nome di una vista. Cliccando sul pulsante si tornerà indietro (reverse=true) alla vista denominata main (non mostrata 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 specifica: 

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

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

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

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

                <p:inputTextarea id="inputTextarea" label="Textarea:"/>
  
  • Righe 21–29: un campo che combina diversi elementi: 

                <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: l'etichetta del componente nella riga 3;
  • riga 3: un elenco a discesa;
  • righe 4–7: il suo contenuto;
  • riga 30: un cursore: 

                <pm:inputRange id="range" minValue="0" maxValue="100" label="Range:" />
  
  • riga 31: un pulsante di attivazione/disattivazione: 

                <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 controllo: 

                  <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 provenienti da tre librerie: JSF, PF e PFM. Ora abbiamo le conoscenze necessarie per creare 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. Questo ci consentirà di esplorare le dipendenze richieste per un progetto PrimeFaces Mobile.

8.4.1. Il progetto NetBeans

Il progetto NetBeans è il seguente:

Il progetto NetBeans inizia come un progetto web Maven di base a cui sono state aggiunte le dipendenze [2]. Ciò si riflette 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, la dipendenza da PrimeFaces Mobile. Qui 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 incompleta. Per un certo periodo è stata disponibile 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 una regressione. Anche i test hanno dato esito negativo con la versione 1.0-SNAPSHOT della prossima release 1.0 (inizio giugno 2012).

La home page [index.xhtml] [1] è la pagina demo 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">
 
    <!-- Main View -->
    <pm:view id="main">
      ...
    </pm:view>
 
    <!-- Forms -->
    <pm:view id="forms">
      ...
    </pm:view>
 
 
    <!-- Buttons -->
    <pm:view id="buttons">
      ...
    </pm:view>
 
    ...
  </pm:page>
</f:view>

C'è una singola pagina (riga 10) composta da dodici viste. Non entreremo nei dettagli in questa sede. L'obiettivo è semplicemente mostrare come creare un progetto PrimeFaces Mobile.

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

Il motivo è che un'applicazione PrimeFaces Mobile deve essere richiamata con il parametro [?javax.faces.RenderKitId=PRIMEFACES_MOBILE], come mostrato in [2]. È possibile bypassare 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, otteniamo la stessa pagina di prima ma senza dover includere un parametro nell'URL [4]. Lasciamo al lettore il compito di testare questa applicazione. Scopriamo alcuni bug: il tag <p:selectManyCheckbox> non viene visualizzato, così come il tag <p:selectOneRadio>, e il tag <pm:range> non funziona. Questi problemi, che non si riscontrano sul sito demo, suggeriscono che la demo non funzioni con la combinazione qui utilizzata di PrimeFaces Mobile 0.9.1 e PrimeFaces 3.2. Tuttavia, essa funge da punto di partenza per esplorare i tag di questa libreria, che è ancora in fase di sviluppo.

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

Inserisci [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 interazioni seguono le regole del framework JSF, su cui PrimeFaces Mobile si basa.

8.5.1. I punti di vista

Nel progetto sono presenti due viste

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

Il progetto dimostra due cose:

  • 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 suo 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 mobile di Primefaces

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">
 
    <!-- forms view -->
    <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>
 
    <!-- info view -->
    <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 preso l'esempio dimostrativo dal sito web di PrimeFaces Mobile e lo abbiamo modificato per farlo funzionare:

  • 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 un cursore. Questo cursore presenta un bug: non è possibile spostare il cursore. Tuttavia, è possibile inserire un numero che ne provochi lo spostamento,
  • Si noti che ci sono pochi tag specifici per PFM (righe 13, 14, 15, 19, 27 e 28 nella prima vista). Gli altri tag sono tag JSF e PF standard. PrimeFaces Mobile si basa su questi due framework.

Si noti 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">
 
    <!-- forms view -->
    <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>
 
    <!-- info view -->
    <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 imposta il titolo visualizzato dal browser;
  • una pagina è costituita da una o più viste. Quando la pagina viene visualizzata per la prima volta, viene mostrata la prima vista. Successivamente, si naviga da una vista all'altra. Qui ci sono due viste: forms alla riga 13 e info 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à inviato tramite un pulsante standard di PrimeFaces. Il modulo verrà inviato al modello [Form] ed elaborato dal metodo [Form].validate. Questo metodo svolgerà il proprio compito. Vedremo che richiede la visualizzazione della vista info. Prima di ciò, la vista sarà stata aggiornata tramite una chiamata AJAX (attributo update),
  • riga 26: possiamo passare dalla vista delle informazioni alla vista dei moduli utilizzando un pulsante. Notate il formato dell'attributo href [href="#forms?reverse=true"]. La notazione #forms si riferisce alla vista dei moduli. Il parametro reverse=true richiede un ritorno alla pagina precedente. Ho preso questo attributo dalla demo. Quando lo si rimuove, non si nota alcuna differenza su un simulatore... Forse ce n'è una sugli smartphone reali,
  • infine, notate l'uso della libreria PrimeFaces Mobile alla riga 7.

Sebbene introduca nuove funzionalità, questa pagina PFM è piuttosto semplice. 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 {
  // model
 
  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() {
    // we move on to the news view
    return "pm:infos";
  }
 
  public String getManyCheckboxValue() {
    StringBuffer str = new StringBuffer("[");
    for (String checkbox : manyCheckbox) {
      str.append(checkbox);
    }
    str.append("]");
    return str.toString();
  }
 
  // getters and setters
  ...
}

Non c'è nulla di nuovo qui. L'abbiamo già visto tutto. Notate, tuttavia, la forma del metodo validate chiamato dal form. Riga 21: restituisce una stringa nella forma 'pm:viewname'. Qui verrà visualizzata la vista info. Il metodo non fa altro che questa navigazione. In precedenza, i campi nelle righe 12–19 hanno ricevuto i valori inviati. Questi saranno utilizzati per aggiornare la vista info (attributo update qui sotto):


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

La vista info 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. Test

Esegui il progetto NetBeans. Una volta che il progetto è stato distribuito su Tomcat [1], puoi 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 Wi-Fi:

Collegare il server alla rete Wi-Fi. È quindi possibile verificare il suo indirizzo IP:

Prendi nota dell'indirizzo IP del server sopra indicato: 192.168.1.127. Disattiva eventuali firewall e software antivirus sul server:

 

Sul server, avviare l'applicazione [mv-pfm-02] in NetBeans [1]:

Collegare lo smartphone alla stessa rete Wi-Fi del server in modo che i due dispositivi possano vedersi a vicenda. Quindi aprire un browser e inserire l'URL [http://192.168.1.127:8080/mv-pfm-02/] [2]. Ora è possibile testare l'applicazione. Sarai lieto di scoprire che il cursore, che non funziona nel simulatore, funziona sullo smartphone. Esiste quindi una discrepanza tra i simulatori e i dispositivi reali.

8.6. Conclusione

Abbiamo trattato solo i tag form della libreria PrimeFaces Mobile, ma ciò è sufficiente per la nostra applicazione di esempio.

8.7. Test con Eclipse

Importa i progetti Maven [1] in Eclipse ed eseguili [2],

sul server Tomcat [3]. L'applicazione in esecuzione viene quindi visualizzata nel browser interno di Eclipse [4].

Si noti che l'applicazione [mv-pfm-02] presentava malfunzionamenti nel browser di Eclipse. Una volta caricata nei browser Firefox o IE, questi problemi sono scomparsi.

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.