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 y como la hemos estudiado al principio de este documento:

Cuando el destino es el navegador de un teléfono móvil, debemos modificar la presentación. De hecho, hay que tener en cuenta el tamaño de la pantalla de un smartphone y replantearse la ergonomía de las páginas. Existen bibliotecas especializadas en la creación de páginas web para móviles. 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 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 Mobile

La página web de Primefaces Mobile

[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 smartphone 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 introduce 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 en la fase de desarrollo, pero, al final, la aplicación debe probarse en condiciones reales en diferentes dispositivos móviles.

8.3. Aprendizaje de PrimeFaces Mobile

PrimeFaces Mobile ofrece muchos menos componentes que PrimeFaces. La página 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í nos encontramos con 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 va a 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 volverá (reverse=true) a la vista denominada «main» (que no aparece 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 icono 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 ofrece al usuario para introducir datos. Así, para «type='tel'» se ofrecerá un teclado numérico,

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

                <p:inputTextarea id="inputTextarea" label="Textarea:"/>
  
  • líneas 21-29: un campo que agrupa 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 móviles.

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

Vamos a retomar el ejemplo que hemos visto anteriormente para integrarlo en un proyecto Maven. De este modo, descubriremos las dependencias necesarias para un proyecto Primefaces móvil.

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 añadido las dependencias [2]. Esto se traduce 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-16, la dependencia de PrimeFaces Mobile. Aquí hemos utilizado la versión 0.9.1 (línea 14). Por otra parte, 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 presentaba errores. Desde entonces, ha sido retirada. Hemos vuelto a la versión 0.9.1. Por lo tanto, el proyecto PFM ha sufrido un retroceso. Las pruebas también fallaron con la versión 1.0-SNAPSHOT de la versión 1.0, que se encuentra en fase de desarrollo (principios de junio de 2012).

La página de inicio [index.xhtml] [1] es la página de demostración de los componentes 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 única 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]:

El motivo es que una aplicación móvil de Primefaces debe invocarse con el parámetro [?javax.faces.RenderKitId=PRIMEFACES_MOBILE], tal y como se indica 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 ejecutarla, se obtiene la misma página que antes, pero sin tener que especificar ningún parámetro para URL ni [4]. Dejamos que sea el lector quien pruebe esta aplicación. Se detectan 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 producen en la página web de la demo, 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 descubrir las etiquetas de esta biblioteca, que aún está 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/]. El resultado es el siguiente:

Introducimos [5], el mismo URL utilizado por 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 Mobile y su modelo. Estas siguen las reglas del marco JSF, en el que se basa, en última instancia, Primefaces Mobile.

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 introducidos y ofrece la posibilidad de volver al formulario [4].

El proyecto muestra dos cosas:

  • la relación entre una página y su plantilla,
  • 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 PrimeFaces móvil,
  • 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

Proporcionamos los archivos de configuración sin explicarlos. A estas alturas ya son habituales.

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

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 formularios -->
    <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 de la página web de Primefaces Mobile y lo hemos adaptado para que funcione:

  • la etiqueta <p:selectManyCheckbox> no se mostraba. La hemos sustituido por una etiqueta <h:selectManyCheckbox> (línea 32),
  • la etiqueta <p:selectOneRadio> no se mostraba. La hemos sustituido por una etiqueta <p:selectOneRadio> (línea 40),
  • línea 27: hemos conservado 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 introducir un número que hace que se mueva,
  • cabe destacar que hay pocas etiquetas propias 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 formularios -->
    <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 varias vistas. La primera vez que se muestra la página, se muestra la primera vista. A continuación, 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 realizará su trabajo. Veremos que solicita que se muestre la vista «infos». Previamente, esta vista se habrá actualizado mediante la llamada AJAX (atributo «update»),
  • línea 26: podremos pasar de la vista «infos» a la vista «forms» con un botón. Obsérvese la forma del atributo href [href="#forms?reverse=true"]. La notación #forms designa la vista «forms». El parámetro reverse=true solicita volver atrás. He tomado este atributo de la demostración. Cuando se elimina, no se aprecia 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 se ha visto ya. No obstante, cabe destacar la forma del método «valider» al 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 «infos». El método no hace nada más que esta navegación. Previamente, los campos de las líneas 12-19 han recibido los valores enviados. Estos servirán para actualizar la vista «infos» (atributo «update» más abajo):


<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 de NetBeans. Una vez desplegado el proyecto en Tomcat ([1]), podemos probarlo en un simulador ([http://iphone4simulator.com/], [2]):

Ahora vamos a mostrar cómo probarlo en un smartphone real . Vamos a conectar el servidor que aloja la aplicación y el smartphone a la misma red WIFI:

Conectamos el servidor a la red wifi. A continuación, podemos comprobar su dirección IP:

Anotamos la dirección del servidor IP: 192.168.1.127. Desactivamos los posibles cortafuegos y antivirus del servidor:

 

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

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

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ó fallos de funcionamiento en el navegador de Eclipse. Al cargarla en los navegadores Firefox o IE, dichos fallos desaparecieron.

https://stahe.github.io
Este curso-tutorial escrito por Serge Tahé se pone a disposición del público según los términos de la Licencia Creative Commons Reconocimiento – Sin uso comercial – Compartir en las mismas condiciones 3.0 no adaptada.