Skip to content

8. Вступ до Primefaces Mobile

8.1. Роль Primefaces Mobile у додатку JSF

Повернемося до архітектури додатка Primefaces, яку ми розглядали на початку цього документа:

Коли цільовою платформою є браузер мобільного телефону, нам доводиться змінювати оформлення. Адже потрібно враховувати розмір екрану смартфона та переглянути ергономіку сторінок. Існують бібліотеки, спеціалізовані на створенні веб-сторінок для мобільних пристроїв. Прикладом є бібліотека Primefaces mobile, яка, у свою чергу, базується на бібліотеці JQuery mobile.

Архітектура веб-додатку для мобільних пристроїв буде ідентичною попередній, за винятком того, що крім JSF та Primefaces ми будемо використовувати бібліотеку Primefaces mobile (PFM).

Ми розглянемо всі концепції, які вивчали з JSF та Primefaces. Зміниться лише рівень [présentation] (переважно сторінки).

8.2. Переваги Primefaces Mobile

Веб-сайт Primefaces Mobile

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

містить перелік компонентів, які можна використовувати на сторінці PFM [1, 2]:

Для перегляду наведеного вище демо-додатка можна скористатися симуляторами смартфонів. Один із них доступний для iPhone 4 за посиланням URL [http://iphone4simulator.com/] [3]. Введіть адресу додатка, що тестується, у [4], і він відобразиться у розмірах iPhone. Такі симулятори корисні на етапі розробки, але в кінцевому підсумку додаток потрібно протестувати в реальних умовах на різних мобільних пристроях.

8.3. Ознайомлення з Primefaces Mobile

PrimeFaces Mobile пропонує значно менше компонентів, ніж PrimeFaces. Сайт PrimeFaces Mobile

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

наводить їхній перелік. Ось, наприклад, компоненти, які можна використовувати у формі [1], [2], [3]:

Можна завантажити вихідний код прикладів [4]. Таким чином, ми бачимо, що сторінка PFM, яка відображає вищезазначені компоненти [1], [2], [3], має такий вигляд:


<?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">
        <!-- Форми -->
        <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>
  • рядок 7: з’являється новий простір імен — простір імен мобільних компонентів PrimeFaces із префіксом pm,
  • рядок 10: визначає сторінку. Сторінка складатиметься з декількох подань (рядок 12). У будь-який момент часу видно лише одне подання. Тут ми бачимо концепцію, яку ми широко використовували у наших прикладах з Primefaces: одна сторінка з декількома фрагментами, які можна показувати або приховувати. Тут нам не доведеться цим займатися. Ми просто вкажемо вигляд, який потрібно відобразити, а інші, звісно, будуть приховані,
  • рядок 12: вигляд,
  • рядки 13–15: визначають заголовок виду: 


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

Зверніть увагу на тег для створення кнопки. Атрибут href дозволяє переходити між елементами. Його значенням тут є назва елемента. Клік на кнопку поверне (reverse=true) до елемента з назвою main (тут не показано).

  • рядок 16: вводить вміст подання,
  • рядок 17: створює поле введення: 

                <p:inputText label="Input:" />
  
  • рядок 18: поле введення з особливою піктограмою: 

                <p:inputText label="Search:" type="search"/>
  
  • рядок 19: поле для введення номера телефону: 

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

Атрибут type тегу <inputText> має певне значення: він визначає тип клавіатури, яка пропонується користувачеві для введення даних. Так, для type='tel' буде запропоновано цифрову клавіатуру,

  • рядок 20: багаторядкове та розширюване поле введення: 

                <p:inputTextarea id="inputTextarea" label="Textarea:"/>
  
  • рядки 21–29: поле, що об’єднує кілька компонентів: 

                <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>
 
  • рядок 2: назва компонента в рядку 3;
  • рядок 3: випадаючий список;
  • рядки 4–7: його вміст,
  • рядок 30: слайдер: 

                <pm:inputRange id="range" minValue="0" maxValue="100" label="Range:" />
  
  • рядок 31: кнопка з двома значеннями: 

                <pm:switch id="switch" onLabel="yes" offLabel="no" label="Switch:" />
 
  • рядок 32: прапорець: 

      <p:selectBooleanCheckbox id="booleanCheckbox" value="false" itemLabel="I agree" label="Checkbox"/>
  
  • рядки 33–37: група прапорців: 

                  <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>
  
  • рядки 38–42: група перемикачів 

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

Слід зазначити, що на сторінці використовуються теги з трьох бібліотек: JSF, PF та PFM. Ми знаємо достатньо, щоб створити наш перший мобільний проєкт Primefaces.

8.4. Перший мобільний проєкт Primefaces: mv-pfm-01

Ми повернемося до прикладу, який розглядали раніше, щоб інтегрувати його в проект Maven. Таким чином ми ознайомимося з необхідними залежностями для мобільного проекту Primefaces.

8.4.1. Проєкт NetBeans

Проект NetBeans виглядає наступним чином:

Проєкт NetBeans спочатку є базовим веб-проєктом Maven, до якого було додано залежності [2]. У файлі [pom.xml] це відображається таким кодом:


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

У рядках 11–16 вказано залежність від Primefaces mobile. Тут ми використали версію 0.9.1 (рядок 14). Крім того, ми використали версію 3.2 Primefaces (рядок 9). Ці номери версій є важливими. Справді, я зіткнувся з чималою кількістю проблем із PFM, яка є незавершеною бібліотекою. Так, певний час існувала версія 0.9.2, яка містила помилки. Згодом її було вилучено. Ми повернулися до версії 0.9.1. Отже, проект PFM зазнав регресії. Тести також не пройшли з версією 1.0-SNAPSHOT, яка перебуває на стадії розробки (початок червня 2012 року).

Головна сторінка [index.xhtml] [1] є демонстраційною сторінкою мобільних компонентів Primefaces:


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

    <!-- Головний вигляд -->
    <pm:view id="main">
      ...
    </pm:view>

    <!-- Форми -->
    <pm:view id="forms">
      ...
    </pm:view>


    <!-- Кнопки -->
    <pm:view id="buttons">
      ...
    </pm:view>

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

Є одна сторінка (рядок 10), що складається з дванадцяти подань. Ми не будемо детально їх описувати. Мета тут полягає лише в тому, щоб показати, як створити проект Primefaces Mobile.

Запустимо цей проєкт. Ми отримаємо сторінку з помилкою [1]:

Причина полягає в тому, що мобільний додаток Primefaces потрібно викликати з параметром [?javax.faces.RenderKitId=PRIMEFACES_MOBILE], як у [2]. Цього параметра можна уникнути, змінивши файл [faces-config.xml] (або створивши його, якщо його немає, як у цьому випадку) [3]:

Його вміст такий:


<?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>
  • рядок 11: встановлює значення параметра [javax.faces.RenderKitId].

Під час виконання ми отримуємо ту саму сторінку, що й раніше, але без необхідності вказувати параметри URL та [4]. Ми залишаємо читачеві можливість самостійно протестувати цей додаток. У ній виявляються помилки: тег <p:selectManyCheckbox> не відображається, те саме стосується тегу <p:selectOneRadio>, а тег <pm:range> не працює. Ці несправності, яких немає на демо-сайті, дають підстави припустити, що додаток не працює з комбінацією Primefaces mobile 0.9.1 та Primefaces 3.2, яка використовується тут. Проте це все ж таки відправна точка для ознайомлення з тегами цієї бібліотеки, яка перебуває на стадії розробки.

Щоб отримати більш реалістичне відображення, можна протестувати додаток на симуляторі, такому як iPhone 4 [http://iphone4simulator.com/]. Отримуємо таке:

Вводимо [5] — той самий URL, що використовувався попереднім браузером у [4].

8.5. Приклад mv-pfm-02: форма та модель

У цьому проєкті ми демонструємо взаємодію між мобільною сторінкою Primefaces та її моделлю. Ця взаємодія відбувається за правилами фреймворку JSF, на якому, зрештою, базується Primefaces mobile.

8.5.1. Види

У проєкті є два види

  • вигляд 1 [1] містить форму, яку можна підтвердити за допомогою [2],
  • вид 2 [3] підтверджує введені дані та надає можливість повернутися до форми [4].

Проєкт демонструє дві речі:

  • зв’язок між сторінкою та її шаблоном,
  • навігацію між видами сторінки.

8.5.2. Проєкт NetBeans

Проєкт NetBeans виглядає так:

  • у [1] — мобільна сторінка Primefaces,
  • в [2] — її модель
  • у [3] — файли повідомлень, оскільки додаток є інтернаціоналізованим,
  • у [4] — залежності проекту.

8.5.3. Налаштування проєкту

Ми наводимо конфігураційні файли без пояснень. Вони вже стали стандартними.

[web.xml]: налаштовує веб-додаток:


<?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]: налаштовує додаток 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]: файл повідомлень французькою мовою:


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. Сторінка Primefaces mobile

Сторінка [index.xhtml] виглядає так:


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

    <!-- перегляд інформації -->
    <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>

Ми взяли демонстраційний приклад із сайту Primefaces mobile та адаптували його, щоб він працював:

  • тег <p:selectManyCheckbox> не відображався. Ми замінили його на тег <h:selectManyCheckbox> (рядок 32),
  • тег <p:selectOneRadio> не відображався. Ми замінили його на тег <p:selectOneRadio> (рядок 40),
  • рядок 27: ми залишили тег <pm:inputRange>, який відображає слайдер. У ньому є помилка: курсор слайдера не можна переміщати. Але можна ввести число, яке змусить його рухатися,
  • зауважимо, що тегів, характерних для PFM, небагато (рядки 13, 14, 15, 19, 27, 28 у першому вигляді). Решта тегів — це стандартні теги JSF та PF. Primefaces mobile базується на цих двох фреймворках.

Звернімо увагу на структуру сторінки:


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

    <!-- перегляд форм -->
    <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>

    <!-- перегляд інформації -->
    <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>
  • рядок 10: визначає сторінку PFM. Атрибут title встановлює заголовок, що відображається браузером,
  • сторінка складається з одного або декількох видів. При першому відкритті сторінки відображається перший вид. Далі перехід від одного виду до іншого здійснюється за допомогою навігації. Тут є два види: «forms» (рядок 13) та «infos» (рядок 24),
  • рядок 14: тег header визначає заголовок подання,
  • рядок 15: тег content визначає вміст подання,
  • рядок 16: вигляд «forms» містить форму JSF,
  • рядок 18: ця форма буде підтверджена за допомогою стандартної кнопки Primefaces. Форма буде відправлена до моделі [Form] і оброблена методом [Form].valider. Цей метод виконає свою роботу. Ми побачимо, що він вимагає відображення подання «infos». До цього подання буде оновлено за допомогою виклику AJAX (атрибут update),
  • рядок 26: за допомогою кнопки можна буде перейти з подання «infos» до подання «forms». Зверніть увагу на форму атрибута href [href="#forms?reverse=true"]. Позначення #forms вказує на вигляд «forms». Параметр reverse=true вимагає повернення назад. Я взяв цей атрибут із демо-версії. Якщо його видалити, на симуляторі не буде помітно жодної різниці... Можливо, на справжніх смартфонах вона є,
  • нарешті, зверніть увагу на використання бібліотеки Primefaces mobile у рядку 7.

Хоча ця сторінка PFM містить нові елементи, вона цілком зрозуміла. Те саме стосується її шаблону [Form.java].

8.5.5. Шаблон [Form.java]

Ця модель має такий вигляд:


package beans;

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

@ManagedBean
@SessionScoped
public class Form implements Serializable {
  // шаблон

  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() {
    // перехід до подання інформації
    return "pm:infos";
  }

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

  // гетери та сеттери
  ...
}

Тут немає нічого нового. Все це вже було. Проте варто звернути увагу на форму методу valider, який викликається формою. Рядок 21: він повертає рядок у форматі 'pm:назвапогляду,якийпотрібновідобразити'. Отже, тут буде відображено погляд infos. Метод не виконує нічого, крім цієї навігації. Раніше поля в рядках 12–19 отримали відправлені значення. Вони будуть використані для оновлення подання «infos» (атрибут update нижче):


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

Тоді інформаційний вигляд відобразить відправлені значення:

  

<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. Тестові файли

Запускаємо проект у NetBeans. Після розгортання проекту на Tomcat [1] його можна протестувати на симуляторі [http://iphone4simulator.com/] [2]:

Тепер ми покажемо, як протестувати його на реальному смартфоні . Ми підключимо сервер, на якому розміщено додаток, та смартфон до однієї мережі WIFI:

Підключаємо сервер до мережі Wi-Fi. Після цього можна перевірити його адресу IP:

Запишіть зазначену вище адресу сервера IP: 192.168.1.127. Вимкніть усі брандмауери та антивірусні програми на сервері:

 

На сервері запускаємо додаток [mv-pfm-02] у NetBeans [1]:

Підключаємо смартфон до тієї ж мережі Wi-Fi, що й сервер, щоб обидва пристрої бачили один одного. Потім відкриваємо браузер і вводимо адресу URL [http://192.168.1.127:8080/mv-pfm-02/] [2]. Після цього можна протестувати додаток. Таким чином, з радістю виявимо, що повзунок, який не працює в симуляторі, працює на смартфоні. Отже, між симуляторами та реальними пристроями існує розбіжність.

8.6. Conclusion

Ми розглянули лише теги форм із бібліотеки Primefaces Mobile, але цього достатньо для нашого прикладу додатка.

8.7. Тестування за допомогою Eclipse

Імпортуємо в Eclipse проекти Maven [1] та запускаємо їх [2],

на сервері Tomcat [3]. Запущений додаток з’являється у вбудованому браузері Eclipse [4].

Слід зазначити, що додаток [mv-pfm-02] демонстрував збої в роботі у вбудованому браузері Eclipse. Якщо завантажити його у браузерах Firefox або IE, ці збої зникають.

https://stahe.github.io
Цей навчальний курс, написаний Сержем Тахе, надається громадськості на умовах Creative Commons «Вказання авторства — Не для комерційного використання — Поділитися на рівних умовах 3.0 без змін.