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 analisámos no início deste documento:

Quando o destino é o navegador de um telemóvel, precisamos de alterar o layout. De facto, o tamanho do ecrã de um smartphone deve ser tido em conta e a usabilidade das páginas redesenhada. 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 móvel será idêntica à anterior, exceto que, além do JSF e do PrimeFaces, utilizaremos a biblioteca PrimeFaces Mobile (PFM).

Iremos rever todos os conceitos abordados com o JSF e o PrimeFaces. Apenas a camada de [apresentação] (principalmente as páginas) irá mudar.

8.2. As vantagens do PrimeFaces Mobile

O site do PrimeFaces Mobile

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

fornece uma lista de componentes que podem ser utilizados numa página PFM [1, 2]:

Pode utilizar simuladores de smartphones para visualizar a aplicação de demonstração acima. Um deles está disponível para o iPhone 4 no URL [http://iphone4simulator.com/] [3]. Introduza o endereço da aplicação a testar em [4] e esta será apresentada com as dimensões do iPhone. Estes simuladores são úteis durante a fase de desenvolvimento, mas, em última análise, a aplicação deve ser testada em condições reais em vários dispositivos móveis.

8.3. Aprendendo o 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]

fornece uma lista dos mesmos. Aqui, por exemplo, estão os componentes que podem ser utilizados num formulário [1], [2], [3]:

Pode descarregar o código-fonte dos exemplos [4]. Verificamos que a página PFM que apresenta os componentes [1], [2] e [3] 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">
        <!-- Forms -->
        <pm:view id="forms">
            <pm:header title="Forms">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>
            <pm:content>
                <p:inputText label="Input:" />   
                <p:inputText label="Search:" type="search"/>
                <p:inputText label="Phone:" type="tel"/>
                <p:inputTextarea id="inputTextarea" label="Textarea:"/>
                <pm:field>
                    <h:outputLabel for="selectOneMenu" value="Dropdown: "/>
                    <h:selectOneMenu id="selectOneMenu">
                        <f:selectItem itemLabel="Select One" itemValue="" />
                        <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                        <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                        <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                    </h:selectOneMenu>
                </pm:field>
                <pm:inputRange id="range" minValue="0" maxValue="100" label="Range:" />
                <pm:switch id="switch" onLabel="yes" offLabel="no" label="Switch:" />
                <p:selectBooleanCheckbox id="booleanCheckbox" value="false" itemLabel="I agree" label="Checkbox"/>
                <p:selectManyCheckbox id="checkbox" label="Checkboxes: ">
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                </p:selectManyCheckbox>
                <p:selectOneRadio id="radio" label="Radios: ">
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                </p:selectOneRadio>
            </pm:content>
        </pm:view>
    </pm:page>
</f:view>
  • Linha 7: Surge um novo namespace, 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. Este é um conceito que temos utilizado extensivamente nos nossos exemplos do PrimeFaces: uma única página com vários fragmentos que podem ser mostrados ou ocultados. Aqui, não teremos de fazer isso. Designaremos simplesmente a vista a apresentar, com as outras automaticamente ocultadas,
  • 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>
  

Repare na tag utilizada para criar um botão. O atributo href permite a navegação. O seu valor aqui é o nome de uma vista. Ao clicar no botão, será redirecionado (reverse=true) para a vista denominada main (não apresentada aqui).

  • linha 16: apresenta o conteúdo da vista,
  • 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 entrada para um número de telefone: 

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

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

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

                <p:inputTextarea id="inputTextarea" label="Textarea:"/>
  
  • Linhas 21–29: um campo que combina 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 rótulo do componente na 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 de alternância: 

                <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 conjunto 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 que a página utiliza tags das três bibliotecas: JSF, PF e PFM. Agora sabemos o suficiente para criar o nosso primeiro projeto PrimeFaces Mobile.

8.4. Um primeiro projeto PrimeFaces Mobile: mv-pfm-01

Vamos revisitar o exemplo estudado anteriormente para o integrar num projeto Maven. Isto permitir-nos-á explorar as dependências necessárias para um projeto PrimeFaces Mobile.

8.4.1. O projeto NetBeans

O projeto NetBeans é o seguinte:

O projeto NetBeans começa como um projeto web básico do Maven ao qual foram adicionadas as dependências [2]. Isto reflete-se no ficheiro [pom.xml] com o 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–16, a dependência do PrimeFaces Mobile. Aqui utilizámos a 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. Na verdade, deparei-me com bastantes problemas com o PFM, que é uma biblioteca inacabada. Durante algum tempo, houve uma versão 0.9.2 que apresentava erros. Desde então, foi removida. Regressámos à versão 0.9.1. O projeto PFM sofreu, assim, um retrocesso. Os testes também falharam com a versão 1.0-SNAPSHOT da próxima versão 1.0 (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">
 
    <!-- Main View -->
    <pm:view id="main">
      ...
    </pm:view>
 
    <!-- Forms -->
    <pm:view id="forms">
      ...
    </pm:view>
 
 
    <!-- Buttons -->
    <pm:view id="buttons">
      ...
    </pm:view>
 
    ...
  </pm:page>
</f:view>

Existe uma única página (linha 10) composta por doze vistas. Não entraremos em detalhes sobre elas aqui. O objetivo aqui é simplesmente mostrar como criar um projeto PrimeFaces Mobile.

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

A razão é que uma aplicação PrimeFaces Mobile deve ser chamada com o parâmetro [?javax.faces.RenderKitId=PRIMEFACES_MOBILE], conforme mostrado em [2]. Pode ignorar este parâmetro modificando 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].

Após a execução, obtemos a mesma página de antes, mas sem ter de incluir um parâmetro no URL [4]. Deixamos ao leitor a tarefa de testar esta aplicação. Descobrimos alguns erros: a tag <p:selectManyCheckbox> não é apresentada, tal como a tag <p:selectOneRadio>, e a tag <pm:range> não funciona. Estes problemas, que não existem no site de demonstração, sugerem que a demonstração não funciona com a combinação aqui utilizada do PrimeFaces Mobile 0.9.1 e do PrimeFaces 3.2. No entanto, serve como ponto de partida para explorar as tags desta biblioteca, que ainda se encontra em desenvolvimento.

Para obter uma renderização mais realista, pode testar a aplicação num simulador como o simulador do iPhone 4 [http://iphone4simulator.com/]. Obterá o seguinte:

Introduza [5], o mesmo URL utilizado pelo navegador anterior em [4].

8.5. Exemplo mv-pfm-02: Formulário e Modelo

Neste projeto, demonstramos as interações entre uma página do PrimeFaces Mobile e o seu modelo. Estas interações seguem as regras da estrutura JSF, na 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 enviado [2],
  • A Vista 2 [3] confirma os dados introduzidos e oferece a opção de voltar ao formulário [4].

O projeto demonstra duas coisas:

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

8.5.2. O projeto NetBeans

O projeto NetBeans é o seguinte:

  • em [1], a página do PrimeFaces Mobile,
  • 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

Fornecemos os ficheiros de configuração sem os explicar. São agora 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 móvel do Primefaces

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">
 
    <!-- forms view -->
    <pm:view id="forms" swatch="b">
      <pm:header title="#{msg['forms']}"/>
      <pm:content>
        <h:form id="formulaire">
          <p:inputText id="inputText" label="#{msg['input']}" value="#{form.inputText}"/>
          <p:inputTextarea id="inputTextArea" label="#{msg['textarea']}" value="#{form.inputTextArea}"/>
          <pm:field>
            <h:outputLabel for="selectOneMenu" value="#{msg['dropdown']}"/>
            <h:selectOneMenu id="selectOneMenu" value="#{form.selectOneMenu}">
              <f:selectItem itemLabel="Option 1" itemValue="1" />
              <f:selectItem itemLabel="Option 2" itemValue="2" />
              <f:selectItem itemLabel="Option 3" itemValue="3" />
            </h:selectOneMenu>
          </pm:field>
          <pm:inputRange id="range" minValue="0" maxValue="100" label="#{msg['range']}" value="#{form.range}"/>
          <pm:switch id="switch" onLabel="yes" offLabel="no" label="#{msg['switch']}" value="#{form.bswitch}"/>
          <p:selectBooleanCheckbox id="booleanCheckbox" itemLabel="I agree" label="#{msg['checkbox']}" value="#{form.booleanCheckbox}"/>
          <pm:field>
            <h:outputLabel for="manyCheckbox" value="#{msg['checkboxes']}"/>
            <h:selectManyCheckbox id="manyCheckbox" value="#{form.manyCheckbox}">
              <f:selectItem itemLabel="Option 1" itemValue="1" />
              <f:selectItem itemLabel="Option 2" itemValue="2" />
              <f:selectItem itemLabel="Option 3" itemValue="3" />
            </h:selectManyCheckbox>
          </pm:field>
          <pm:field>
            <h:outputLabel for="radio" value="#{msg['radios']}"/>
            <h:selectOneRadio id="radio" value="#{form.radio}">
              <f:selectItem itemLabel="Option 1" itemValue="1" />
              <f:selectItem itemLabel="Option 2" itemValue="2" />
              <f:selectItem itemLabel="Option 3" itemValue="3" />
            </h:selectOneRadio>
          </pm:field>
          <p:commandButton inline="true" value="#{msg['valider']}" update=":infos" action="#{form.valider}"/>
        </h:form>
      </pm:content>
    </pm:view>
 
    <!-- info view -->
    <pm:view id="infos" swatch="b">
      <pm:header title="#{msg['confirmations']}">
        <f:facet name="left"><p:button value="#{msg['back']}" icon="back" href="#forms?reverse=true"/></f:facet>
      </pm:header>
      <pm:content>
        <ul>
          <li>#{msg['input']} : ${form.inputText}</li>
          <li>#{msg['textarea']} : ${form.inputTextArea}</li>
          <li>#{msg['dropdown']} : ${form.selectOneMenu}</li>
          <li>#{msg['range']} : ${form.range}</li>
          <li>#{msg['switch']} : ${form.bswitch}</li>
          <li>#{msg['checkbox']} : ${form.booleanCheckbox}</li>
          <li>#{msg['checkboxes']} : ${form.manyCheckboxValue}</li>
          <li>#{msg['radios']} : ${form.radio}</li>
        </ul>
      </pm:content>
    </pm:view>
  </pm:page>
</f:view>

Pegámos no exemplo de demonstração do site do PrimeFaces Mobile e modificámo-lo para que funcionasse:

  • a tag <p:selectManyCheckbox> não era exibida. 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 tag <pm:inputRange>, que exibe um controlo deslizante. Este controlo deslizante tem um bug: não é possível mover o cursor do controlo deslizante. No entanto, pode introduzir um número que o faça mover-se,
  • Note que existem poucas tags específicas do PFM (linhas 13, 14, 15, 19, 27 e 28 na primeira vista). As outras tags são tags padrão do JSF e do PF. O PrimeFaces Mobile baseia-se nestas 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">
 
    <!-- forms view -->
    <pm:view id="forms" swatch="b">
      <pm:header ...>
      <pm:content>
        <h:form id="formulaire">
          ...
          <p:commandButton inline="true" value="#{msg['valider']}" update=":infos" action="#{form.valider}"/>
        </h:form>
      </pm:content>
    </pm:view>
 
    <!-- info view -->
    <pm:view id="infos" swatch="b">
      <pm:header title="#{msg['confirmations']}">
        <f:facet name="left"><p:button value="#{msg['back']}" icon="back" href="#forms?reverse=true"/></f:facet>
      </pm:header>
      <pm:content>
        ...
      </pm:content>
    </pm:view>
  </pm:page>
</f:view>
  • 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. Quando a página é exibida pela primeira vez, a primeira vista é mostrada. Em seguida, navega-se de uma vista para outra. Aqui, existem duas vistas: formulários na linha 13 e informações na linha 24,
  • linha 14: a tag header define o cabeçalho de uma vista,
  • linha 15: a tag content define o conteúdo de uma vista,
  • linha 16: a vista de formulários contém um formulário JSF,
  • linha 18: este formulário será enviado através de um botão padrão do PrimeFaces. O formulário será enviado para o modelo [Form] e processado pelo método [Form].validate. Este método fará o seu trabalho. Veremos que ele solicita a exibição da vista de informações. Antes disso, a vista terá sido atualizada através de uma chamada AJAX (atributo update),
  • linha 26: podemos alternar da vista de informações para a vista de formulários utilizando um botão. Repare no formato do atributo href [href="#forms?reverse=true"]. A notação #forms refere-se à vista de formulários. O parâmetro reverse=true solicita o regresso à página anterior. Retirei este atributo da demonstração. Quando o remove, não se nota qualquer diferença num simulador... Talvez haja alguma em smartphones reais,
  • por fim, repare na utilização da biblioteca PrimeFaces Mobile na linha 7.

Apesar de introduzir novas funcionalidades, esta página PFM é bastante simples. 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 {
  // model
 
  private String inputText = "bonjour";
  private String inputTextArea = "ligne1\nligne2";
  private String selectOneMenu = "2";
  private int range = 4;
  private boolean bswitch = true;
  private boolean booleanCheckbox = false;
  private String[] manyCheckbox = {"1", "3"};
  private String radio = "3";
 
  public String valider() {
    // we move on to the news view
    return "pm:infos";
  }
 
  public String getManyCheckboxValue() {
    StringBuffer str = new StringBuffer("[");
    for (String checkbox : manyCheckbox) {
      str.append(checkbox);
    }
    str.append("]");
    return str.toString();
  }
 
  // getters and setters
  ...
}

Não há nada de novo aqui. Já vimos tudo isto antes. Repare, no entanto, na forma do método validate chamado pelo formulário. Linha 21: ele devolve uma string na forma «pm:viewname». Aqui, a vista de informações será apresentada. O método não faz nada além desta navegação. Anteriormente, os campos nas linhas 12–19 receberam os valores enviados. Estes serão utilizados para atualizar a vista de informações (atributo update abaixo):


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

A vista de informações 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. Teste

Execute o projeto NetBeans. Assim que o projeto estiver implementado no Tomcat [1], pode 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 Wi-Fi:

Ligue o servidor à rede Wi-Fi. Pode então verificar o seu endereço IP:

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

 

No servidor, inicie 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 possam ver mutuamente. Em seguida, abra um navegador e introduza o URL [http://192.168.1.127:8080/mv-pfm-02/] [2]. Agora pode testar a aplicação. Ficará satisfeito ao descobrir 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. Conclusão

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

Importe os projetos Maven [1] para o Eclipse e execute-os [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 avarias no navegador do Eclipse. Quando carregada nos navegadores Firefox ou IE, estas avarias 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.