Skip to content

8. Inleiding tot PrimeFaces Mobile

8.1. De rol van PrimeFaces Mobile in een applicatie JSF

Laten we terugkeren naar de architectuur van een PrimeFaces-applicatie zoals we die aan het begin van dit document hebben besproken:

Wanneer de browser van een mobiele telefoon het doel is, moeten we de weergave aanpassen. Er moet namelijk rekening worden gehouden met de schermgrootte van een smartphone en de gebruiksvriendelijkheid van de pagina’s moet opnieuw worden ontworpen. Er bestaan bibliotheken die gespecialiseerd zijn in het bouwen van webpagina’s voor mobiele apparaten. Dit geldt bijvoorbeeld voor de Primefaces Mobile-bibliotheek, die zelf weer is gebaseerd op de JQuery Mobile-bibliotheek.

De architectuur van een webapplicatie voor mobiele apparaten is identiek aan de vorige, met dit verschil dat we naast JSF en Primefaces ook de Primefaces Mobile-bibliotheek (PFM) zullen gebruiken.

We zullen alle concepten die we met JSF en Primefaces hebben bestudeerd, opnieuw behandelen. Alleen de [présentation]-laag (voornamelijk de pagina’s) zal veranderen.

8.2. De voordelen van Primefaces Mobile

De website van Primefaces Mobile

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

geeft een overzicht van de componenten die gebruikt kunnen worden in een PFM-pagina [1, 2]:

Het is mogelijk om smartphonesimulators te gebruiken om de bovenstaande demo-app te bekijken. Een daarvan is beschikbaar voor de iPhone 4 op URL [http://iphone4simulator.com/] [3]. Je voert het adres van de te testen app in via [4] en deze wordt weergegeven in de afmetingen van de iPhone. Dergelijke simulators zijn handig tijdens de ontwikkelingsfase, maar uiteindelijk moet de app in de praktijk op verschillende mobiele toestellen worden getest.

8.3. PrimeFaces Mobile leren

PrimeFaces Mobile biedt veel minder componenten dan PrimeFaces. De website van PrimeFaces Mobile

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

geeft een overzicht. Hieronder staan bijvoorbeeld de componenten die in een formulier kunnen worden gebruikt: [1], [2], [3]:

De broncode van de voorbeelden [4] kan worden gedownload. Zo ontdekken we dat de pagina PFM, die de hierboven genoemde componenten [1], [2] en [3] weergeeft, er als volgt uitziet:


<?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">
        <!-- Formulieren -->
        <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>
  • regel 7: er verschijnt een nieuwe naamruimte, die van de PrimeFaces Mobile-componenten met het voorvoegsel pm,
  • regel 10: definieert een pagina. Een pagina bestaat uit meerdere weergaven (regel 12). Er is op elk moment slechts één weergave zichtbaar. Dit is een concept dat we in onze PrimeFaces-voorbeelden veelvuldig hebben gebruikt: één enkele pagina met meerdere fragmenten die we weergeven of verbergen. Hier hoeven we dat niet te doen. We geven gewoon aan welke weergave moet worden getoond; de andere worden dan automatisch verborgen,
  • regel 12: een weergave,
  • regels 13-15: definiëren de koptekst van de weergave: 


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

Let op de tag voor het genereren van een knop. Met het href-attribuut kan worden genavigeerd. De waarde ervan is hier de naam van een weergave. Een klik op de knop leidt terug (reverse=true) naar de weergave met de naam main (hier niet weergegeven).

  • regel 16: introduceert de inhoud van de weergave,
  • regel 17: genereert een invoerveld: 

                <p:inputText label="Input:" />
  
  • regel 18: een invoerveld met een specifiek pictogram: 

                <p:inputText label="Search:" type="search"/>
  
  • regel 19: een invoerveld voor een telefoonnummer: 

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

Het type-attribuut van een tag <inputText> heeft een betekenis: het bepaalt het type toetsenbord dat aan de gebruiker wordt aangeboden om gegevens in te voeren. Zo wordt bij type='tel' een numeriek toetsenbord aangeboden,

  • regel 20: een uitbreidbaar invoerveld met meerdere regels: 

                <p:inputTextarea id="inputTextarea" label="Textarea:"/>
  
  • regels 21-29: een veld dat meerdere componenten bevat: 

                <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>
 
  • regel 2: de tekst voor het onderdeel op regel 3;
  • regel 3: een vervolgkeuzelijst;
  • regels 4-7: de inhoud ervan,
  • regel 30: een schuifbalk: 

                <pm:inputRange id="range" minValue="0" maxValue="100" label="Range:" />
  
  • regel 31: een knop met twee waarden: 

                <pm:switch id="switch" onLabel="yes" offLabel="no" label="Switch:" />
 
  • regel 32: een selectievakje: 

      <p:selectBooleanCheckbox id="booleanCheckbox" value="false" itemLabel="I agree" label="Checkbox"/>
  
  • regels 33-37: een groep selectievakjes: 

                  <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>
  
  • regels 38-42: een groep keuzerondjes 

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

Merk op dat de pagina tags uit de drie bibliotheken JSF, PF en PFM gebruikt. We weten nu genoeg om ons eerste PrimeFaces Mobile-project te bouwen.

8.4. Een eerste PrimeFaces Mobile-project: mv-pfm-01

We gaan het eerder besproken voorbeeld gebruiken om het in een Maven-project te integreren. Zo ontdekken we welke afhankelijkheden nodig zijn voor een mobiel PrimeFaces-project.

8.4.1. Het NetBeans-project

Het NetBeans-project is als volgt:

Het NetBeans-project is in eerste instantie een standaard Maven-webproject waaraan de afhankelijkheden [2] zijn toegevoegd. Dit komt in het bestand [pom.xml] tot uiting in de volgende code:


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

In de regels 11-16 staat de afhankelijkheid van PrimeFaces Mobile. We hebben hier versie 0.9.1 gebruikt (regel 14). Daarnaast hebben we versie 3.2 van Primefaces gebruikt (regel 9). Deze versienummers zijn belangrijk. Ik heb namelijk behoorlijk wat problemen ondervonden met PFM, een bibliotheek die nog niet definitief was. Er bestond namelijk een tijdje een versie 0.9.2 die vol fouten zat. Deze is inmiddels verwijderd. We zijn teruggegaan naar versie 0.9.1. Het project PFM is dus achteruitgegaan. De tests zijn ook mislukt met versie 1.0-SNAPSHOT van de versie 1.0 die momenteel in ontwikkeling is (begin juni 2012).

De startpagina [index.xhtml] [1] is de demonstratiepagina van de PrimeFaces Mobile-componenten:


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

    <!-- Hoofdweergave -->
    <pm:view id="main">
      ...
    </pm:view>

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


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

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

Er is één pagina (regel 10) die uit twaalf weergaven bestaat. We gaan hier niet in detail op in. Het doel is hier simpelweg te laten zien hoe je een PrimeFaces Mobile-project opzet.

Laten we dit project uitvoeren. We krijgen een foutpagina [1] te zien:

De reden hiervoor is dat een mobiele Primefaces-applicatie moet worden aangeroepen met de parameter [?javax.faces.RenderKitId=PRIMEFACES_MOBILE], net als in [2]. Je kunt deze parameter omzeilen door het bestand [faces-config.xml] aan te passen (of aan te maken als het nog niet bestaat, zoals hier het geval is) [3]:

De inhoud ervan is als volgt:


<?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>
  • regel 11: stelt de waarde van de parameter [javax.faces.RenderKitId] in.

Bij uitvoering krijgen we dezelfde pagina als eerder, maar zonder dat we een parameter hoeven in te stellen voor URL [4]. We laten het aan de lezer over om deze toepassing te testen. Er zijn enkele fouten te ontdekken: de tag <p:selectManyCheckbox> wordt niet weergegeven, hetzelfde geldt voor de tag <p:selectOneRadio>, en de tag <pm:range> werkt niet. Deze storingen, die niet voorkomen op de demosite, doen vermoeden dat de applicatie niet werkt met de hier gebruikte combinatie van PrimeFaces Mobile 0.9.1 en PrimeFaces 3.2. Toch is het een goed uitgangspunt om de tags van deze bibliotheek, die nog in ontwikkeling is, te verkennen.

Voor een realistischer resultaat kun je de applicatie testen op een simulator, zoals die van de iPhone 4 [http://iphone4simulator.com/]. Je krijgt dan het volgende resultaat:

We voeren [5] in, dezelfde URL die door de vorige browser in [4] werd gebruikt.

8.5. Voorbeeld mv-pfm-02: formulier en model

In dit project laten we de interacties zien tussen een mobiele Primefaces-pagina en het bijbehorende model. Deze volgen de regels van het JSF-framework waarop Primefaces Mobile uiteindelijk is gebaseerd.

8.5.1. De weergaven

Er zijn twee weergaven in het project

  • weergave 1 [1] toont een formulier dat kan worden gevalideerd via [2],
  • weergave 2 [3] bevestigt de invoer en biedt de mogelijkheid om terug te keren naar het formulier [4].

Het project laat twee dingen zien:

  • de relatie tussen een pagina en het bijbehorende sjabloon,
  • de navigatie tussen de weergaven van de pagina.

8.5.2. Het NetBeans-project

Het NetBeans-project is als volgt:

  • in [1], de mobiele PrimeFaces-pagina,
  • in [2], het model ervan
  • in [3], de berichtbestanden omdat de applicatie geïnternationaliseerd is,
  • in [4], de afhankelijkheden van het project.

8.5.3. Projectconfiguratie

We geven de configuratiebestanden weer zonder ze uit te leggen. Ze zijn inmiddels standaard.

[web.xml]: configureert de webapplicatie:


<?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]: configureert de applicatie 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]: het bestand met Franse berichten:


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. De PrimeFaces Mobile-pagina

De pagina [index.xhtml] ziet er als volgt uit:


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

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

We hebben het demonstratievoorbeeld van de Primefaces Mobile-website overgenomen en aangepast zodat het werkt:

  • de tag <p:selectManyCheckbox> werd niet weergegeven. We hebben deze vervangen door een tag <h:selectManyCheckbox> (regel 32),
  • de tag <p:selectOneRadio> werd niet weergegeven. We hebben deze vervangen door een tag <p:selectOneRadio> (regel 40),
  • regel 27: we hebben de tag <pm:inputRange> behouden, die een schuifbalk weergeeft. Deze vertoont een fout: de cursor van de schuifbalk kan niet worden verplaatst. Maar door een getal in te voeren, gaat hij wel bewegen,
  • merk op dat er maar weinig tags zijn die specifiek zijn voor PFM (regels 13, 14, 15, 19, 27, 28 in de eerste weergave). De overige tags zijn standaard JSF- en PF-tags. PrimeFaces Mobile is gebaseerd op deze twee frameworks.

Let op de structuur van de pagina:


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

    <!-- informatieweergave -->
    <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>
  • regel 10: definieert een pagina PFM. Het attribuut title bepaalt de titel die door de browser wordt weergegeven;
  • een pagina bestaat uit één of meerdere weergaven. Bij de eerste weergave van de pagina wordt de eerste weergave getoond. Vervolgens schakelt men via de navigatie van de ene weergave naar de andere. Hier zijn er twee weergaven: ‘forms’ op regel 13 en ‘infos’ op regel 24,
  • regel 14: de header-tag definieert de koptekst van een weergave,
  • regel 15: de tag `content` definieert de inhoud van een weergave,
  • regel 16: de weergave ‘forms’ bevat een formulier met de naam JSF,
  • regel 18: dit formulier wordt gevalideerd via een standaard Primefaces-knop. Het formulier wordt verzonden naar het model [Form] en verwerkt door de methode [Form].valider. Deze methode voert de nodige bewerkingen uit. We zullen zien dat deze methode vraagt om de weergave van de weergave ‘infos’. Eerder is deze weergave bijgewerkt door de aanroep AJAX (attribuut ‘update’),
  • regel 26: we kunnen met een knop overschakelen van de infoweergave naar de formulierenweergave. Let op de vorm van het href-attribuut [href="#forms?reverse=true"]. De notatie #forms verwijst naar de formulierenweergave. De parameter reverse=true vraagt om een stap terug. Ik heb dit attribuut overgenomen uit de demo. Wanneer we het verwijderen, zien we geen verschil op een simulator... Misschien is er wel een verschil op echte smartphones,
  • tot slot valt het gebruik van de Primefaces Mobile-bibliotheek op regel 7 op.

Hoewel deze bibliotheek nieuwe functies biedt, is deze pagina PFM heel begrijpelijk. Hetzelfde geldt voor het bijbehorende model [Form.java].

8.5.5. Het sjabloon [Form.java]

Dit sjabloon ziet er als volgt uit:


package beans;

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

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

  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 gaan naar de informatieweergave
    return "pm:infos";
  }

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

  // getters en setters
  ...
}

Hier is niets nieuws aan. We hebben dit allemaal al eens gezien. Let echter wel op de vorm van de methode valider die door het formulier wordt aangeroepen. Regel 21: deze retourneert een tekenreeks in de vorm 'pm:naamvanhetweer te geven'. Hier wordt dus de infoweergave getoond. De methode doet niets anders dan deze navigatie uitvoeren. Eerder hebben de velden in de regels 12-19 de verzonden waarden ontvangen. Deze worden gebruikt om de weergave 'infos' bij te werken (attribuut 'update' hieronder):


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

De infoweergave zal vervolgens de verzonden waarden weergeven:

  

<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. De test-

We voeren het NetBeans-project uit. Zodra het project is geïmplementeerd op Tomcat [1], kunnen we het testen op een simulator [http://iphone4simulator.com/] [2]:

We laten nu zien hoe je het op een echte smartphone kunt testen. We verbinden de server waarop de applicatie draait en de smartphone met hetzelfde netwerk WIFI:

We verbinden de server met het wifi-netwerk. Vervolgens kunnen we het adres controleren: IP:

Noteer hierboven het adres IP van de server: 192.168.1.127. Schakel eventuele firewalls en antivirusprogramma’s op de server uit:

 

Op de server starten we de applicatie [mv-pfm-02] in NetBeans [1]:

We verbinden de smartphone met hetzelfde wifi-netwerk als de server, zodat beide apparaten elkaar kunnen zien. Vervolgens openen we een browser en roepen we de URL URL [http://192.168.1.127:8080/mv-pfm-02/] [2] op. Daarna kunnen we de applicatie testen. Je zult dan tot je vreugde ontdekken dat de schuifbalk die in de simulator niet werkt, op de smartphone wel werkt. Er is dus een verschil tussen simulators en apparaten.

8.6. Conclusion

We hebben alleen de formulier-tags uit de PrimeFaces Mobile-bibliotheek behandeld, maar dat is voldoende voor onze voorbeeldapplicatie.

8.7. Testen met Eclipse

We importeren de Maven-projecten [1] in Eclipse en voeren ze uit: [2],

op de Tomcat-server [3]. De uitgevoerde applicatie verschijnt vervolgens in de interne browser van Eclipse [4].

Opgemerkt moet worden dat de applicatie [mv-pfm-02] storingen vertoonde in de browser van Eclipse. Wanneer deze wordt geladen in de browsers Firefox of IE, zijn deze storingen verdwenen.

https://stahe.github.io
Deze cursus-tutorial, geschreven door Serge Tahé, wordt aan het publiek ter beschikking gesteld onder de voorwaarden van de Creative Commons Naamsvermelding – Geen commercieel gebruik – Gelijk delen 3.0 ongewijzigd.