Skip to content

8. Introducción a PrimeFaces Mobile

8.1. El papel de PrimeFaces Mobile en una aplicación JSF

Volvamos a la arquitectura de una aplicación PrimeFaces tal como la estudiamos al inicio de este documento:

Cuando el destino es el navegador de un teléfono celular, debemos modificar la presentación. De hecho, hay que tener en cuenta el tamaño de la pantalla de un smartphone y rediseñar la ergonomía de las páginas. Existen bibliotecas especializadas en la creación de páginas web para dispositivos móviles. Este es el caso de la biblioteca Primefaces Mobile, que a su vez se basa en la biblioteca JQuery Mobile.

La arquitectura de una aplicación web para dispositivos móviles será idéntica a la anterior, salvo que, además de JSF y Primefaces, utilizaremos la biblioteca Primefaces Mobile (PFM).

Vamos a repasar todos los conceptos estudiados con JSF y Primefaces. Solo cambiará la capa [présentation] (principalmente las páginas).

8.2. Las aportaciones de Primefaces móvil

El sitio web de Primefaces móvil

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

ofrece la lista de componentes que se pueden utilizar en una página PFM [1, 2]:

Es posible utilizar simuladores de teléfonos inteligentes para visualizar la aplicación de demostración anterior. Uno de ellos está disponible para el iPhone 4 en URL [http://iphone4simulator.com/] [3]. Se ingresa la dirección de la aplicación que se desea probar en [4] y esta se muestra con las dimensiones del iPhone. Estos simuladores son útiles durante la fase de desarrollo, pero al final, la aplicación debe probarse en dispositivos móviles reales.

8.3. Aprendizaje de PrimeFaces Mobile

PrimeFaces Mobile ofrece muchos menos componentes que PrimeFaces. El sitio web de PrimeFaces Mobile

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

ofrece la lista. A continuación se muestran, por ejemplo, los componentes que se pueden utilizar en un formulario [1], [2], [3]:

Es posible descargar el código fuente de los ejemplos [4]. Así, descubrimos que la página PFM, que muestra los componentes [1], [2] y [3] mencionados anteriormente, es la siguiente:


<?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">
        <!-- Formularios -->
        <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>
  • línea 7: aparece un nuevo espacio de nombres, el de los componentes PrimeFaces Mobile con el prefijo pm,
  • línea 10: define una página. Una página estará compuesta por varias vistas (línea 12). Solo se puede ver una vista a la vez. Aquí encontramos un concepto que hemos utilizado ampliamente en nuestros ejemplos de PrimeFaces: una única página con varios fragmentos que se muestran u ocultan. En este caso, no tendremos que hacer eso. Simplemente designaremos la vista que se mostrará, quedando las demás ocultas por defecto,
  • línea 12: una vista,
  • líneas 13-15: definen el encabezado de la vista: 


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

Cabe destacar la etiqueta para generar un botón. El atributo href permite navegar. Su valor aquí es el nombre de una vista. Al hacer clic en el botón, se regresará (reverse=true) a la vista llamada «main» (que no se muestra aquí).

  • línea 16: introduce el contenido de la vista,
  • línea 17: genera un campo de entrada: 

                <p:inputText label="Input:" />
  
  • línea 18: un campo de entrada con un ícono específico: 

                <p:inputText label="Search:" type="search"/>
  
  • línea 19: un campo de entrada para un número de teléfono: 

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

El atributo «type» de una etiqueta <inputText> tiene un significado: determina el tipo de teclado que se le ofrece al usuario para realizar la entrada. Así, para «type='tel'» se le ofrecerá un teclado numérico,

  • línea 20: un campo de entrada de varias líneas y extensible: 

                <p:inputTextarea id="inputTextarea" label="Textarea:"/>
  
  • líneas 21-29: un campo que reúne varios componentes: 

                <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>
 
  • línea 2: el texto descriptivo del componente de la línea 3;
  • línea 3: una lista desplegable;
  • líneas 4-7: su contenido;
  • línea 30: un control deslizante: 

                <pm:inputRange id="range" minValue="0" maxValue="100" label="Range:" />
  
  • línea 31: un botón con dos valores: 

                <pm:switch id="switch" onLabel="yes" offLabel="no" label="Switch:" />
 
  • línea 32: una casilla de selección: 

      <p:selectBooleanCheckbox id="booleanCheckbox" value="false" itemLabel="I agree" label="Checkbox"/>
  
  • líneas 33-37: un grupo de casillas de selección: 

                  <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>
  
  • líneas 38-42: un grupo de botones de opción 

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

Cabe destacar que la página utiliza etiquetas de las tres bibliotecas: JSF, PF y PFM. Ya sabemos lo suficiente para crear nuestro primer proyecto de PrimeFaces para dispositivos móviles.

8.4. Un primer proyecto de PrimeFaces móvil: mv-pfm-01

Vamos a retomar el ejemplo que vimos anteriormente para integrarlo en un proyecto Maven. Así, descubriremos las dependencias necesarias para un proyecto móvil de PrimeFaces.

8.4.1. El proyecto NetBeans

El proyecto NetBeans es el siguiente:

El proyecto NetBeans es, en un principio, un proyecto web básico de Maven al que se le han agregado las dependencias [2]. Esto se refleja en el archivo [pom.xml] con el siguiente código:


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

En las líneas 11 a 16, la dependencia de PrimeFaces Mobile. Aquí hemos utilizado la versión 0.9.1 (línea 14). Por otro lado, hemos utilizado la versión 3.2 de PrimeFaces (línea 9). Estos números de versión son importantes. De hecho, he tenido bastantes problemas con PFM, que es una biblioteca no finalizada. Así, durante un tiempo existió una versión 0.9.2 que tenía errores. Desde entonces, ha sido retirada. Hemos vuelto a la versión 0.9.1. Por lo tanto, el proyecto PFM ha retrocedido. Las pruebas también fallaron con la versión 1.0-SNAPSHOT de la versión 1.0 que se encuentra en desarrollo (a principios de junio de 2012).

La página de inicio [index.xhtml] [1] es la página de demostración de los componentes de 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 principal -->
    <pm:view id="main">
      ...
    </pm:view>

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


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

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

Hay una sola página (línea 10) compuesta por doce vistas. No las detallaremos aquí. El objetivo es simplemente mostrar cómo crear un proyecto de PrimeFaces Mobile.

Ejecutemos este proyecto. Aparece una página de error [1]:

La razón es que una aplicación móvil de Primefaces debe invocarse con el parámetro [?javax.faces.RenderKitId=PRIMEFACES_MOBILE], tal como en [2]. Es posible prescindir de este parámetro modificando el archivo [faces-config.xml] (o creándolo si no existe, como en este caso) [3]:

Su contenido es el siguiente:


<?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>
  • línea 11: establece el valor del parámetro [javax.faces.RenderKitId].

Al ejecutarlo, se obtiene la misma página que antes, pero sin necesidad de establecer ningún parámetro en URL ni en [4]. Dejamos que el lector pruebe esta aplicación. Se observan algunos errores: la etiqueta <p:selectManyCheckbox> no se muestra, lo mismo ocurre con la etiqueta <p:selectOneRadio>, y la etiqueta <pm:range> no funciona. Estos fallos, que no se observan en el sitio de la demostración, sugieren que esta no funciona con la combinación utilizada aquí de PrimeFaces Mobile 0.9.1 con PrimeFaces 3.2. No obstante, es un punto de partida para explorar las etiquetas de esta biblioteca que se encuentra en desarrollo.

Para obtener un resultado más realista, podemos probar la aplicación en un simulador como el del iPhone 4 [http://iphone4simulator.com/]. Se obtiene lo siguiente:

Ingresamos en [5], el mismo URL que utilizó el navegador anterior en [4].

8.5. Ejemplo mv-pfm-02: formulario y modelo

En este proyecto, mostramos las interacciones entre una página de PrimeFaces móvil y su modelo. Estas siguen las reglas del marco JSF, sobre el que se basa, en última instancia, PrimeFaces móvil.

8.5.1. Las vistas

Hay dos vistas en el proyecto

  • la vista 1 [1] presenta un formulario que se puede validar en [2],
  • la vista 2, [3], confirma los datos ingresados y ofrece la posibilidad de regresar al formulario [4].

El proyecto muestra dos cosas:

  • la relación entre una página y su modelo,
  • la navegación entre las vistas de la página.

8.5.2. El proyecto de NetBeans

El proyecto de NetBeans es el siguiente:

  • en [1], la página móvil de PrimeFaces,
  • en [2], su modelo
  • en [3], los archivos de mensajes, ya que la aplicación está internacionalizada,
  • en [4], las dependencias del proyecto.

8.5.3. Configuración del proyecto

Presentamos los archivos de configuración sin explicarlos. Ya son estándar.

[web.xml]: configura la aplicación 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 la aplicación 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]: el archivo de mensajes en francés:


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 página de PrimeFaces para dispositivos móviles

La página [index.xhtml] es la siguiente:


<?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 de 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 de información -->
    <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>

Hemos tomado el ejemplo de demostración del sitio de Primefaces móvil y lo hemos adaptado para que funcione:

  • la etiqueta <p:selectManyCheckbox> no se mostraba. La hemos reemplazado por una etiqueta <h:selectManyCheckbox> (línea 32),
  • la etiqueta <p:selectOneRadio> no se mostraba. La hemos reemplazado por una etiqueta <p:selectOneRadio> (línea 40),
  • línea 27: conservamos la etiqueta <pm:inputRange>, que muestra un control deslizante. Este tiene un error: no se puede mover el cursor del control deslizante. Sin embargo, se puede ingresar un número que lo haga moverse,
  • cabe señalar que hay pocas etiquetas específicas de PFM (líneas 13, 14, 15, 19, 27 y 28 en la primera vista). Las demás etiquetas son etiquetas clásicas de JSF y PF. PrimeFaces Mobile se basa en estos dos marcos de trabajo.

Cabe destacar la estructura de la página:


<?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 de 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 de información -->
    <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>
  • línea 10: define una página PFM. El atributo title establece el título que muestra el navegador;
  • una página se compone de una o más vistas. Al abrir la página por primera vez, se muestra la primera vista. Luego, se pasa de una vista a otra mediante la navegación. Aquí hay dos vistas: «forms» en la línea 13 e «infos» en la línea 24,
  • línea 14: la etiqueta header define el encabezado de una vista,
  • línea 15: la etiqueta «content» define el contenido de una vista,
  • línea 16: la vista «forms» contiene un formulario JSF,
  • línea 18: este formulario se validará mediante un botón clásico de PrimeFaces. El formulario se enviará al modelo [Form] y será procesado por el método [Form].valider. Este método hará su trabajo. Veremos que solicita que se muestre la vista «infos». Previamente, esta vista se habrá actualizado mediante la llamada a AJAX (atributo «update»),
  • línea 26: podremos pasar de la vista «infos» a la vista «forms» con un botón. Observemos la forma del atributo href [href="#forms?reverse=true"]. La notación #forms designa la vista de formularios. El parámetro reverse=true solicita regresar a la vista anterior. He tomado este atributo de la demostración. Cuando se elimina, no se nota ninguna diferencia en un simulador... Quizás haya alguna en smartphones reales,
  • por último, cabe destacar el uso de la biblioteca PrimeFaces Mobile en la línea 7.

Aunque aporta novedades, esta página PFM es totalmente comprensible. Lo mismo ocurre con su modelo [Form.java].

8.5.5. El modelo [Form.java]

Este modelo es el siguiente:


package beans;

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

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

  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() {
    // se pasa a la vista de información
    return "pm:infos";
  }

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

  // getters y setters
  ...
}

Aquí no hay nada nuevo. Todo ya se ha visto antes. Sin embargo, cabe destacar la forma del método valider que llama el formulario. Línea 21: devuelve una cadena de caracteres con el formato 'pm:nombredelavistapara mostrar'. En este caso, se mostrará la vista de información. El método no hace más que esta navegación. Anteriormente, los campos de las líneas 12 a 19 recibieron los valores enviados. Estos servirán para actualizar la vista «infos» (atributo «update» a continuación):


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

La vista «infos» mostrará entonces los valores enviados:

  

<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. es de prueba

Ejecutamos el proyecto en NetBeans. Una vez que el proyecto se ha implementado en Tomcat [1], podemos probarlo en un simulador [http://iphone4simulator.com/] [2]:

Ahora mostraremos cómo probarlo en un smartphone real . Conectaremos el servidor que aloja la aplicación y el smartphone a la misma red WIFI:

Conectamos el servidor a la red wifi. Luego podemos verificar su dirección IP:

Anotamos la dirección del servidor IP: 192.168.1.127. Desactivamos cualquier firewall y antivirus del servidor:

 

En el servidor, se inicia la aplicación [mv-pfm-02] en NetBeans [1]:

Conectamos el teléfono inteligente a la misma red wifi que el servidor para que ambos dispositivos se reconozcan. Luego abrimos un navegador y accedemos a URL [http://192.168.1.127:8080/mv-pfm-02/] [2]. A continuación, podemos probar la aplicación. Así descubriremos con alegría que el control deslizante que no funciona en el simulador sí funciona en el teléfono inteligente. Por lo tanto, existe una diferencia entre los simuladores y los dispositivos reales.

8.6. Conclusion

Solo hemos presentado las etiquetas de formulario de la biblioteca PrimeFaces Mobile, pero es suficiente para nuestra aplicación de ejemplo.

8.7. Pruebas con Eclipse

Importamos a Eclipse los proyectos Maven [1] y los ejecutamos [2],

en el servidor Tomcat [3]. La aplicación ejecutada aparece entonces en el navegador interno de Eclipse [4].

Cabe señalar que la aplicación [mv-pfm-02] presentó fallas en el navegador de Eclipse. Al cargarla en los navegadores Firefox o IE, estas fallas desaparecieron.

https://stahe.github.io
Este tutorial, escrito por Serge Tahé, se pone a disposición del público bajo los términos de la Creative Commons Reconocimiento – Sin uso comercial – Compartir igual 3.0 sin modificaciones.