Skip to content

8. Introdução ao PrimeFaces Mobile

8.1. O papel do Primefaces Mobile em um aplicativo JSF

Voltemos à arquitetura de um aplicativo Primefaces, tal como a estudamos no início deste documento:

Quando o destino é o navegador de um celular, precisamos alterar a apresentação. De fato, o tamanho da tela de um smartphone deve ser levado em consideração e a ergonomia das páginas repensada. Existem bibliotecas especializadas na criação de páginas da web para dispositivos móveis. É o caso da biblioteca Primefaces Mobile, que, por sua vez, se baseia na biblioteca JQuery Mobile.

A arquitetura de um aplicativo web para dispositivos móveis será idêntica à anterior, com a diferença de que, além do JSF e do Primefaces, utilizaremos a biblioteca Primefaces Mobile (PFM).

Vamos retomar todos os conceitos estudados com o JSF e o Primefaces. Apenas a camada [présentation] (principalmente as páginas) será alterada.

8.2. As novidades do Primefaces Mobile

O site do Primefaces Mobile

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

apresenta a lista de componentes que podem ser utilizados em uma página PFM [1, 2]:

É possível utilizar simuladores de smartphone para visualizar o aplicativo de demonstração acima. Um deles está disponível para o iPhone 4 em URL [http://iphone4simulator.com/] [3]. Basta inserir o endereço do aplicativo a ser testado em [4] e ele será exibido nas dimensões do iPhone. Esses simuladores são úteis na fase de desenvolvimento, mas, no final, o aplicativo deve ser testado em ambiente real em diferentes aparelhos móveis.

8.3. Aprendizado do PrimeFaces Mobile

O PrimeFaces Mobile oferece muito menos componentes do que o PrimeFaces. O site do PrimeFaces Mobile

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

apresenta a lista deles. Aqui estão, por exemplo, os componentes que podem ser usados em um formulário [1], [2], [3]:

É possível baixar o código-fonte dos exemplos [4]. Assim, descobrimos que a página PFM, que exibe os componentes [1], [2] e [3] mencionados acima, é a seguinte:


<?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">
        <!-- Formulários -->
        <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>
  • linha 7: surge um novo espaço de nomes, o dos componentes PrimeFaces Mobile com o prefixo pm,
  • linha 10: define uma página. Uma página será composta por várias visualizações (linha 12). Apenas uma visualização fica visível por vez. Encontramos aqui um conceito que utilizamos amplamente em nossos exemplos do Primefaces: uma única página com vários fragmentos que podem ser exibidos ou ocultados. Aqui, não precisaremos fazer isso. Simplesmente indicaremos a visualização a ser exibida, ficando as demais automaticamente ocultas,
  • linha 12: uma visualização,
  • linhas 13-15: definem o cabeçalho da visualização: 


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

Observe a tag para gerar um botão. O atributo href permite a navegação. Seu valor aqui é o nome de uma visualização. Um clique no botão levará de volta (reverse=true) à visualização chamada main (não representada aqui).

  • linha 16: insere o conteúdo da visualização,
  • linha 17: gera um campo de entrada: 

                <p:inputText label="Input:" />
  
  • linha 18: um campo de entrada com um ícone específico: 

                <p:inputText label="Search:" type="search"/>
  
  • linha 19: um campo de preenchimento para um número de telefone: 

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

O atributo “type” de uma tag <inputText> tem um significado: ele determina o tipo de teclado oferecido ao usuário para a entrada de dados. Assim, para “type='tel'”, será oferecido um teclado numérico,

  • linha 20: um campo de entrada com várias linhas e expansível: 

                <p:inputTextarea id="inputTextarea" label="Textarea:"/>
  
  • linhas 21-29: um campo que reúne vários 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>
 
  • linha 2: o texto descritivo do componente da linha 3;
  • linha 3: uma lista suspensa;
  • linhas 4-7: seu conteúdo;
  • linha 30: um controle deslizante: 

                <pm:inputRange id="range" minValue="0" maxValue="100" label="Range:" />
  
  • linha 31: um botão com dois valores: 

                <pm:switch id="switch" onLabel="yes" offLabel="no" label="Switch:" />
 
  • linha 32: uma caixa de seleção: 

      <p:selectBooleanCheckbox id="booleanCheckbox" value="false" itemLabel="I agree" label="Checkbox"/>
  
  • linhas 33-37: um grupo de caixas de seleção: 

                  <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>
  
  • linhas 38-42: um grupo de botões de opção 

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

Observe que a página utiliza tags das três bibliotecas: JSF, PF e PFM. Já sabemos o suficiente para criar nosso primeiro projeto PrimeFaces para dispositivos móveis.

8.4. Um primeiro projeto Primefaces para dispositivos móveis: mv-pfm-01

Vamos retomar o exemplo estudado anteriormente para integrá-lo a um projeto Maven. Assim, descobriremos as dependências necessárias para um projeto Primefaces para dispositivos móveis.

8.4.1. O projeto NetBeans

O projeto NetBeans é o seguinte:

O projeto NetBeans é, inicialmente, um projeto web básico do Maven ao qual foram adicionadas as dependências [2]. Isso se traduz no arquivo [pom.xml] pelo seguinte 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>

Nas linhas 11 a 16, a dependência do Primefaces Mobile. Utilizamos aqui a versão 0.9.1 (linha 14). Além disso, utilizamos a versão 3.2 do Primefaces (linha 9). Esses números de versão são importantes. De fato, encontrei vários problemas com o PFM, que é uma biblioteca não finalizada. Assim, por um certo tempo, existiu uma versão 0.9.2 que apresentava bugs. Ela já foi retirada. Voltamos à versão 0.9.1. O projeto PFM, portanto, sofreu um retrocesso. Os testes também falharam com a versão 1.0-SNAPSHOT da versão 1.0 em desenvolvimento (início de junho de 2012).

A página inicial [index.xhtml] [1] é a página de demonstração dos 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">

    <!-- Visão principal -->
    <pm:view id="main">
      ...
    </pm:view>

    <!-- Formulários -->
    <pm:view id="forms">
      ...
    </pm:view>


    <!-- Botões -->
    <pm:view id="buttons">
      ...
    </pm:view>

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

Há uma única página (linha 10) composta por doze visualizações. Não entraremos em detalhes sobre elas. O objetivo aqui é simplesmente mostrar como construir um projeto PrimeFaces Mobile.

Vamos executar este projeto. Aparece uma página de erro [1]:

O motivo é que um aplicativo Primefaces para dispositivos móveis deve ser chamado com o parâmetro [?javax.faces.RenderKitId=PRIMEFACES_MOBILE], assim como em [2]. É possível dispensar esse parâmetro modificando o arquivo [faces-config.xml] (ou criando-o, caso não exista, como neste caso) [3]:

Seu conteúdo é o seguinte:


<?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>
  • linha 11: define o valor do parâmetro [javax.faces.RenderKitId].

Na execução, obtém-se a mesma página que anteriormente, mas sem precisar definir o parâmetro URL [4]. Deixamos a cargo do leitor testar esta aplicação. Nela, descobrimos alguns bugs: a tag <p:selectManyCheckbox> não é exibida, o mesmo ocorre com a tag <p:selectOneRadio>, e a tag <pm:range> não funciona. Essas falhas, que não ocorrem no site de demonstração, sugerem que a aplicação não funciona com a combinação utilizada aqui do PrimeFaces Mobile 0.9.1 com o PrimeFaces 3.2. No entanto, trata-se de um ponto de partida para explorar as tags dessa biblioteca ainda em desenvolvimento.

Para obter uma renderização mais realista, podemos testar o aplicativo em um simulador como o do iPhone 4 [http://iphone4simulator.com/]. Obtemos o seguinte resultado:

Digitamos [5], o mesmo URL usado pelo navegador anterior em [4].

8.5. Exemplo mv-pfm-02: formulário e modelo

Neste projeto, mostramos as interações entre uma página do Primefaces Mobile e seu modelo. Essas interações seguem as regras do framework JSF, no qual o Primefaces Mobile se baseia.

8.5.1. As visualizações

Existem duas visualizações no projeto

  • a vista 1 [1] apresenta um formulário que pode ser validado em [2],
  • a vista 2, [3], confirma os dados inseridos e oferece a possibilidade de retornar ao formulário [4].

O projeto mostra duas coisas:

  • a relação entre uma página e seu modelo,
  • a navegação entre as visualizações da página.

8.5.2. O projeto NetBeans

O projeto do NetBeans é o seguinte:

  • em [1], a página PrimeFaces para dispositivos móveis,
  • em [2], seu modelo
  • em [3], os arquivos de mensagens, já que o aplicativo é internacionalizado,
  • em [4], as dependências do projeto.

8.5.3. Configuração do projeto

Apresentamos os arquivos de configuração sem explicá-los. Eles já são padrão.

[web.xml]: configura a aplicação 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 a aplicação 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]: o arquivo de mensagens em 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. A página do PrimeFaces Mobile

A página [index.xhtml] é a seguinte:


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

    <!-- visualização do 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>

    <!-- visualização de informações -->
    <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>

Retomamos o exemplo de demonstração do site do Primefaces Mobile e o adaptamos para que funcionasse:

  • a tag <p:selectManyCheckbox> não era exibida. Nós a substituímos por uma tag <h:selectManyCheckbox> (linha 32),
  • a tag <p:selectOneRadio> não estava sendo exibida. Nós a substituímos por uma tag <p:selectOneRadio> (linha 40),
  • linha 27: mantivemos a tag <pm:inputRange>, que exibe um controle deslizante. Este apresenta um bug: não é possível mover o cursor do controle deslizante. Mas é possível digitar um número que faz com que ele se mova,
  • vale notar que há poucas tags específicas do PFM (linhas 13, 14, 15, 19, 27, 28 na primeira visualização). As demais tags são tags clássicas do JSF e do PF. O PrimeFaces Mobile se baseia nessas duas estruturas.

Observe a estrutura da 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">

    <!-- visualização do 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>

    <!-- visualização de informações -->
    <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>
  • linha 10: define uma página PFM. O atributo title define o título exibido pelo navegador;
  • uma página é composta por uma ou mais visualizações. Na primeira exibição da página, é a primeira visualização que é exibida. Em seguida, passa-se de uma visualização para outra por meio da navegação. Aqui há duas visualizações: “forms” na linha 13 e “infos” na linha 24,
  • linha 14: a tag header define o cabeçalho de uma visualização,
  • linha 15: a tag “content” define o conteúdo de uma visualização,
  • linha 16: a visualização “forms” contém um formulário JSF,
  • linha 18: esse formulário será validado por um botão clássico do Primefaces. O formulário será enviado para o modelo [Form] e será processado pelo método [Form].valider. Esse método fará seu trabalho. Veremos que ele solicita a exibição da vista infos. Antes disso, essa vista terá sido atualizada pela chamada AJAX (atributo update),
  • linha 26: será possível alternar da visualização de informações para a visualização de formulários por meio de um botão. Observe o formato do atributo href [href="#forms?reverse=true"]. A notação #forms designa a visualização de formulários. O parâmetro reverse=true solicita um retorno à página anterior. Retomei esse atributo da demonstração. Quando ele é removido, não se observa nenhuma diferença em um simulador... Talvez haja alguma diferença em smartphones reais,
  • por fim, vale destacar o uso da biblioteca Primefaces Mobile na linha 7.

Mesmo trazendo novidades, esta página PFM é totalmente compreensível. O mesmo vale para seu modelo [Form.java].

8.5.5. O modelo [Form.java]

Este modelo é o seguinte:


package beans;

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

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

  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() {
    // passamos para a visualização de informações
    return "pm:infos";
  }

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

  // getters e setters
  ...
}

Não há nada de novo aqui. Tudo já foi visto antes. No entanto, vale a pena observar o formato do método valider chamado pelo formulário. Linha 21: ele retorna uma sequência de caracteres no formato 'pm:nomedavistaparaexibir'. Aqui, a vista “infos” será, portanto, exibida. O método não faz nada além dessa navegação. Anteriormente, os campos das linhas 12 a 19 receberam os valores enviados. Esses valores servirão para atualizar a visualização “infos” (atributo “update” abaixo):


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

A visualização “infos” exibirá, então, os 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 teste

Executamos o projeto no NetBeans. Após a implantação do projeto no Tomcat ([1]), é possível testá-lo em um simulador ([http://iphone4simulator.com/], [2]):

Agora vamos mostrar como testá-lo em um smartphone real. Vamos conectar o servidor que hospeda o aplicativo e o smartphone à mesma rede WIFI:

Conectamos o servidor à rede Wi-Fi. Em seguida, podemos verificar seu endereço IP:

Anote acima o endereço IP do servidor: 192.168.1.127. Desative eventuais firewalls e antivírus do servidor:

 

No servidor, inicie o aplicativo [mv-pfm-02] no NetBeans [1]:

Conecte o smartphone à mesma rede Wi-Fi do servidor para que os dois dispositivos se reconheçam. Em seguida, abra um navegador e acesse o endereço URL [http://192.168.1.127:8080/mv-pfm-02/] [2]. Depois, é possível testar o aplicativo. Assim, descobriremos com satisfação que o controle deslizante que não funciona no simulador funciona no smartphone. Portanto, há uma diferença entre os simuladores e os dispositivos reais.

8.6. Conclusion

Apresentamos apenas as tags de formulário da biblioteca Primefaces Mobile, mas isso é suficiente para nossa aplicação de exemplo.

8.7. Testes com o Eclipse

Importamos para o Eclipse os projetos Maven [1] e os executamos [2],

no servidor Tomcat [3]. A aplicação em execução aparece então no navegador interno do Eclipse [4].

Observe-se que a aplicação [mv-pfm-02] apresentou falhas no navegador do Eclipse. Ao carregá-la nos navegadores Firefox ou IE, essas falhas desapareceram.

https://stahe.github.io
Este tutorial, escrito por Serge Tahé, é disponibilizado ao público sob os termos da Creative Commons Atribuição – Sem uso comercial – Compartilhamento igual 3.0 inalterado.