Skip to content

8. Introdução ao PrimeFaces Mobile

8.1. O papel do Primefaces Mobile numa aplicação JSF

Voltemos à arquitetura de uma aplicação Primefaces, tal como a estudámos no início deste documento:

Quando o destino é o navegador de um telemóvel, temos de alterar a apresentação. Com efeito, é necessário ter em conta o tamanho do ecrã de um smartphone e repensar a ergonomia das páginas. Existem bibliotecas especializadas na criação de páginas web para dispositivos móveis. É o caso da biblioteca Primefaces Mobile, que, por sua vez, se baseia na biblioteca JQuery Mobile.

A arquitetura de uma aplicação web para dispositivos móveis será idêntica à anterior, com a diferença de que, além da JSF e da 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) irá mudar.

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 numa página PFM [1, 2]:

É possível utilizar simuladores de smartphone para visualizar a aplicação de demonstração acima. Um deles está disponível para o iPhone 4 em URL [http://iphone4simulator.com/] [3]. Basta introduzir o endereço da aplicação a testar em [4] e esta é apresentada com as dimensões do iPhone. Estes simuladores são úteis na fase de desenvolvimento, mas, no final, a aplicação deve ser testada em condições reais em diferentes telemóveis.

8.3. Aprendizagem 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. Aqui estão, por exemplo, os componentes que podem ser utilizados num formulário [1], [2], [3]:

É possível descarregar o código-fonte dos exemplos [4]. Assim, descobrimos que a página PFM, que apresenta os componentes [1], [2] e [3] acima referidos, é 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 vistas (linha 12). Apenas uma vista é visível de cada vez. Encontramos aqui um conceito que utilizámos amplamente nos nossos exemplos do Primefaces: uma única página com vários fragmentos que podemos mostrar ou ocultar. Aqui, não teremos de fazer isso. Iremos simplesmente indicar a vista a exibir, ficando as outras automaticamente ocultas,
  • linha 12: uma vista,
  • linhas 13-15: definem o cabeçalho da vista: 


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

Note-se a baliza para gerar um botão. O atributo href permite navegar. O seu valor aqui é o nome de uma vista. Um clique no botão irá redirecionar (reverse=true) para a vista denominada «main» (não representada aqui).

  • linha 16: introduz o conteúdo da vista,
  • linha 17: gera um campo de introdução de dados: 

                <p:inputText label="Input:" />
  
  • linha 18: um campo de introdução de dados com um ícone específico: 

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

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

O atributo «type» de uma baliza <inputText> tem um significado: determina o tipo de teclado apresentado ao utilizador para efetuar a introdução de dados. Assim, para «type='tel'», será apresentado um teclado numérico,

  • linha 20: uma área de introdução de texto com várias linhas e extensí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: o seu conteúdo,
  • linha 30: um controlo 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>
  

Note-se que a página utiliza tags das três bibliotecas JSF, PF e PFM. Já sabemos o suficiente para criar o 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 analisado anteriormente para o integrar num projeto Maven. Assim, iremos descobrir 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]. Isto traduz-se no ficheiro [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, encontra-se a dependência do Primefaces Mobile. Optámos aqui pela versão 0.9.1 (linha 14). Além disso, utilizámos a versão 3.2 do Primefaces (linha 9). Estes números de versão são importantes. De facto, deparei-me com bastantes problemas com o PFM, que é uma biblioteca não finalizada. Assim, existiu durante algum tempo uma versão 0.9.2 que apresentava erros. Esta foi entretanto retirada. Voltámos à versão 0.9.1. O projeto PFM sofreu, portanto, 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">

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

Existe uma única página (linha 10) composta por doze vistas. Não iremos detalhá-las. O objetivo aqui é simplesmente mostrar como construir um projeto PrimeFaces Mobile.

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

A razão para isso é que uma aplicação Primefaces para dispositivos móveis deve ser chamada com o parâmetro [?javax.faces.RenderKitId=PRIMEFACES_MOBILE], tal como em [2]. É possível dispensar este parâmetro alterando o ficheiro [faces-config.xml] (ou criando-o, caso não exista, como neste caso) [3]:

O 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].

Ao executar, obtém-se a mesma página que anteriormente, mas sem ter de definir o parâmetro URL [4]. Deixamos ao leitor a tarefa de testar esta aplicação. Descobrem-se alguns erros: a baliza <p:selectManyCheckbox> não é apresentada, o mesmo acontece com a baliza <p:selectOneRadio> e a baliza <pm:range> não funciona. Estas falhas, que não existem no site de demonstração, levam a crer que a aplicação não funciona com a combinação aqui utilizada do PrimeFaces Mobile 0.9.1 com o PrimeFaces 3.2. No entanto, trata-se de um ponto de partida para explorar as tags desta biblioteca ainda em desenvolvimento.

Para obter um resultado mais realista, podemos testar a aplicação num simulador como o do iPhone 4 [http://iphone4simulator.com/]. Obtemos o seguinte:

Introduzimos [5], o mesmo URL utilizado 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 o seu modelo. Estas interações seguem as regras do framework JSF, no qual o Primefaces Mobile se baseia.

8.5.1. As vistas

Existem duas vistas no projeto

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

O projeto mostra duas coisas:

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

8.5.2. O projeto NetBeans

O projeto NetBeans é o seguinte:

  • em [1], a página PrimeFaces para dispositivos móveis,
  • em [2], o seu modelo
  • em [3], os ficheiros de mensagens, uma vez que a aplicação está internacionalizada,
  • em [4], as dependências do projeto.

8.5.3. Configuração do projeto

Apresentamos os ficheiros de configuração sem os explicar. Atualmente, são já 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 ficheiro 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 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>

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

Retomámos o exemplo de demonstração do site do Primefaces Mobile, adaptando-o para que funcionasse:

  • a tag <p:selectManyCheckbox> não era apresentada. Substituímo-la por uma tag <h:selectManyCheckbox> (linha 32),
  • a tag <p:selectOneRadio> não era exibida. Substituímo-la por uma tag <p:selectOneRadio> (linha 40),
  • linha 27: mantivemos a baliza <pm:inputRange>, que exibe um controlo deslizante. Este apresenta um erro: não é possível deslocar o cursor do controlo deslizante. No entanto, é possível introduzir um número que o faz mover-se,
  • note-se que existem poucas balizas específicas do PFM (linhas 13, 14, 15, 19, 27, 28 na primeira vista). As restantes balizas são balizas clássicas do JSF e do PF. O PrimeFaces Mobile baseia-se nestes dois frameworks.

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

    <!-- vista 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 vistas. Na primeira visualização da página, é a primeira vista que é apresentada. Posteriormente, passa-se de uma vista para outra através da navegação. Aqui existem duas vistas: «forms» na linha 13 e «infos» na linha 24,
  • linha 14: a baliza header define o cabeçalho de uma vista,
  • linha 15: a baliza «content» define o conteúdo de uma vista,
  • linha 16: a vista «forms» contém um formulário JSF,
  • linha 18: este 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. Este método executará a sua função. Veremos que este método solicita a exibição da vista «infos». Anteriormente, esta vista terá sido atualizada pela chamada AJAX (atributo «update»),
  • linha 26: será possível passar da vista «infos» para a vista «forms» através de um botão. Repare-se na forma do atributo href [href="#forms?reverse=true"]. A notação #forms designa a vista «forms». O parâmetro reverse=true solicita um retorno à vista anterior. Retirei este atributo da demonstração. Quando o removemos, não se nota qualquer diferença num simulador... Talvez haja alguma diferença em smartphones reais,
  • por fim, note-se a utilização da biblioteca Primefaces Mobile na linha 7.

Embora traga novidades, esta página PFM é perfeitamente compreensível. O mesmo se aplica ao 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() {
    // passa-se para a vista 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á aqui nada de novo. Já vimos tudo isto antes. No entanto, é de salientar a forma do método «valider» chamado pelo formulário. Linha 21: devolve uma cadeia de caracteres com o formato «pm:nomedavistaparaexibir». Neste caso, será exibida a vista «infos». O método não faz mais nada além desta navegação. Anteriormente, os campos das linhas 12 a 19 receberam os valores enviados. Estes servirão para atualizar a vista «infos» (atributo «update» abaixo):


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

A vista «infos» irá então apresentar 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

Executa-se o projeto NetBeans. Depois de o projeto ter sido implementado no Tomcat [1], é possível testá-lo num simulador [http://iphone4simulator.com/] [2]:

Vamos agora mostrar como testá-lo num smartphone real. Vamos ligar o servidor que aloja a aplicação e o smartphone à mesma rede WIFI:

Ligamos o servidor à rede Wi-Fi. Podemos, em seguida, verificar o seu endereço IP:

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

 

No servidor, iniciamos a aplicação [mv-pfm-02] no NetBeans [1]:

Ligue o smartphone à mesma rede Wi-Fi que o servidor, para que os dois dispositivos se reconheçam. Em seguida, abra um navegador e aceda a URL [http://192.168.1.127:8080/mv-pfm-02/] [2]. Depois, pode testar a aplicação. Descobriremos assim, com satisfação, que o controlo deslizante que não funciona no simulador funciona no smartphone. Existe, portanto, uma discrepância entre os simuladores e os dispositivos reais.

8.6. Conclusion

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

8.7. Testes com o Eclipse

Importamos para o Eclipse os projetos Maven [1] e executamo-los [2],

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

Note-se que a aplicação [mv-pfm-02] apresentou falhas no navegador do Eclipse. Se a carregarmos nos navegadores Firefox ou IE, essas falhas desapareceram.

https://stahe.github.io
Este curso-tutorial escrito por Serge Tahé é disponibilizado ao público de acordo com os termos da Licença Creative Commons Atribuição – Sem uso comercial – Partilha nas mesmas condições 3.0 não adaptada.