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] استفاده کرد، فهرست می‌کند:

شما می‌توانید برای مشاهده اپلیکیشن دمو بالا از شبیه‌سازهای گوشی هوشمند استفاده کنید. یکی از این شبیه‌سازها برای آیفون 4 در آدرس‌های URL [http://iphone4simulator.com/] [3] در دسترس است. آدرس اپلیکیشنی را که باید آزمایش شود در [4] وارد کنید تا در ابعاد صفحه نمایش آیفون نمایش داده شود. چنین شبیه‌سازهایی در مرحله توسعه مفید هستند، اما در نهایت باید اپ در شرایط واقعی بر روی دستگاه‌های مختلف موبایل آزمایش شود.

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>
  • خط ۷: یک فضای نام جدید ظاهر می‌شود، فضای نام کامپوننت‌های PrimeFaces Mobile با پیشوند 'pm'،
  • خط ۱۰: یک صفحه را تعریف می‌کند. یک صفحه از چندین نما تشکیل می‌شود (خط ۱۲). در هر لحظه تنها یک نما قابل مشاهده است. این مفهومی است که ما در مثال‌های PrimeFaces خود به طور گسترده از آن استفاده کرده‌ایم: یک صفحه واحد با چندین بخش که می‌توانند نمایش داده شوند یا پنهان گردند. با این حال، در اینجا نیازی به انجام این کار نخواهیم داشت. ما به سادگی نمایی را که باید نمایش داده شود مشخص می‌کنیم و سایر نماها به طور خودکار پنهان می‌شوند،
  • خط ۱۲: یک نما،
  • خطوط ۱۳–۱۵: هدر نما را تعریف می‌کنند: 


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

به تگ مربوط به ایجاد یک دکمه توجه کنید. ویژگی href برای ناوبری استفاده می‌شود. مقدار آن در اینجا نام یک ویو است. کلیک روی دکمه، کاربر را به ویوی با نام «main» (که در اینجا نمایش داده نشده است) بازمی‌گرداند (reverse=true).

  • خط ۱۶: محتوای ویو را معرفی می‌کند،
  • خط ۱۷: یک فیلد ورودی ایجاد می‌کند: 

                <p:inputText label="Input:" />
  
  • خط ۱۸: یک فیلد ورودی با آیکون مشخص: 

                <p:inputText label="Search:" type="search"/>
  
  • خط ۱۹: یک فیلد متنی برای شماره تلفن: 

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

ویژگی 'type' تگ <inputText> معنای خاصی دارد: این ویژگی نوع صفحه‌کلیدی را که برای ورود داده به کاربر نمایش داده می‌شود، تعیین می‌کند. بنابراین، برای '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>
  

توجه کنید که این صفحه از تگ‌های سه کتابخانه JSF، PF و PFM استفاده می‌کند. اکنون به اندازه کافی می‌دانیم که اولین پروژه PrimeFaces Mobile خود را بسازیم.

8.4. اولین پروژه PrimeFaces Mobile: 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>

خطوط ۱۱ تا ۱۶ وابستگی به PrimeFaces Mobile را شامل می‌شوند. ما در اینجا از نسخه ۰.۹.۱ استفاده کرده‌ایم (خط ۱۴). علاوه بر این، ما از نسخه ۳.۲ PrimeFaces (خط ۹) استفاده کرده‌ایم. این شماره نسخه‌ها مهم هستند. در واقع، من با PFM، که یک کتابخانه ناتمام است، با مشکلات زیادی مواجه شدم. برای مدتی، نسخه ۰.۹.۲ وجود داشت که باگ داشت. این نسخه از آن زمان بازپس‌گیری شده است. ما به نسخه 0.9.1 بازگشته‌ایم. بنابراین پروژه PFM پسرفت کرده است. تست‌ها نیز با نسخه 1.0-SNAPSHOT از نسخه 1.0 که در حال توسعه است (اوایل ژوئن 2012)، ناموفق بوده‌اند.

صفحه اصلی [index.xhtml] [1] صفحه نمایشی برای کامپوننت‌های 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">

    <!-- نمای اصلی -->
    <pm:view id="main">
      ...
    </pm:view>

    <!-- فرم‌ها -->
    <pm:view id="forms">
      ...
    </pm:view>


    <!-- دکمه‌ها -->
    <pm:view id="buttons">
      ...
    </pm:view>

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

یک صفحه واحد (خط ۱۰) شامل دوازده نما وجود دارد. ما به جزئیات آن‌ها نمی‌پردازیم. هدف در اینجا صرفاً نشان دادن نحوه ساخت یک پروژه 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>
  • خط ۱۱: مقدار پارامتر [javax.faces.RenderKitId] را تنظیم می‌کند.

هنگام اجرا، همان صفحه قبلی نمایش داده می‌شود، اما بدون نیاز به تنظیم هیچ پارامتری برای URL یا [4]. ما آزمایش این برنامه را به خواننده واگذار می‌کنیم. چند باگ آشکار است: تگ <p:selectManyCheckbox> نمایش داده نمی‌شود، تگ <p:selectOneRadio> نیز نمایش داده نمی‌شود و تگ <pm:range> کار نمی‌کند. این مشکلات که در سایت دمو رخ نمی‌دهند، نشان می‌دهند که دمو با ترکیب مورد استفاده در اینجا از PrimeFaces Mobile 0.9.1 و PrimeFaces 3.2 کار نمی‌کند. با این وجود، این می‌تواند به عنوان یک نقطه شروع برای بررسی تگ‌های این کتابخانه که هنوز در حال توسعه است، باشد.

برای دستیابی به رندرینگ واقع‌بینانه‌تر، می‌توانید برنامه را روی شبیه‌سازهایی مانند شبیه‌ساز آیفون 4 ([http://iphone4simulator.com/]) آزمایش کنید. نتیجه به شرح زیر است:

ما [5] را وارد می‌کنیم، همان URL که در [4] توسط مرورگر قبلی استفاده شده است.

8.5. مثال mv-pfm-02: فرم و مدل

در این پروژه، تعاملات بین یک صفحه PrimeFaces Mobile و مدل آن را نشان می‌دهیم. این تعاملات از قوانین چارچوب JSF پیروی می‌کنند که در نهایت PrimeFaces Mobile بر اساس آن ساخته شده است.

8.5.1. ویوها

در این پروژه دو نما وجود دارد

  • نما ۱ ([1]) فرم را نمایش می‌دهد که می‌توان آن را ارسال کرد ([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">

    <!--نمای فرم‌ها -->
    <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>#{msg['textarea']} : ${form.inputTextArea}
          <li>#{msg['dropdown']} : ${form.selectOneMenu}
          <li>#{msg['range']} : ${form.range}
          <li>#{msg['switch']}: ${form.bswitch}
          <li>#{msg['checkbox']}: ${form.booleanCheckbox}
          <li>#{msg['checkboxes']} : ${form.manyCheckboxValue}
          <li>#{msg['radios']} : ${form.radio}
        </ul>
      </pm:content>
    </pm:view>
  </pm:page>
</f:view>

ما مثال دمو را از وب‌سایت PrimeFaces Mobile تطبیق دادیم تا کار کند:

  • تگ <p:selectManyCheckbox> نمایش داده نمی‌شد. ما آن را با تگ <h:selectManyCheckbox> جایگزین کردیم (خط ۳۲)،
  • برچسب <p:selectOneRadio> نمایش داده نمی‌شد. ما آن را با برچسب <p:selectOneRadio> جایگزین کردیم (خط ۴۰)،
  • خط ۲۷: ما تگ <pm:inputRange> را که یک اسلایدر نمایش می‌دهد، حفظ کردیم. این اسلایدر معیوب است: نشانگر اسلایدر قابل حرکت نیست. با این حال، وارد کردن یک عدد باعث حرکت آن می‌شود،
  • توجه داشته باشید که چند تگ خاص برای PFM وجود دارد (خطوط ۱۳، ۱۴، ۱۵، ۱۹، ۲۷ و ۲۸ در نمای اول). برچسب‌های دیگر، برچسب‌های استاندارد 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>
  • خط ۱۰: یک صفحه PFM را تعریف می‌کند. ویژگی title عنوان نمایش‌داده‌شده توسط مرورگر را تعیین می‌کند؛
  • یک صفحه از یک یا چند نما تشکیل می‌شود. هنگامی که صفحه برای اولین بار نمایش داده می‌شود، نمای اول نشان داده می‌شود. سپس کاربران بین نماها جابجا می‌شوند. در اینجا دو نما وجود دارد: «forms» در خط ۱۳ و «infos» در خط ۲۴،
  • خط ۱۴: تگ `header` سربرگ یک نما را تعریف می‌کند،
  • خط ۱۵: تگ `content` محتوا را برای یک نما تعریف می‌کند،
  • خط ۱۶: نمای «forms» شامل یک فرم JSF است،
  • خط ۱۸: این فرم با استفاده از یک دکمه استاندارد PrimeFaces ارسال خواهد شد. فرم به مدل [Form] ارسال شده و توسط متد validator از کلاس [Form] پردازش می‌شود. این متد وظیفه خود را انجام خواهد داد. خواهیم دید که این درخواست نمایش نمای «اطلاعات» را انجام می‌دهد. پیش از این، این نما با فراخوانی AJAX (ویژگی update)، به‌روزرسانی شده است،
  • خط ۲۶: ما می‌توانیم با استفاده از یک دکمه از نمای «infos» به نمای «forms» سوئیچ کنیم. به فرمت ویژگی href یعنی [href="#forms?reverse=true"] توجه کنید. نشانه #forms به نمای فرم‌ها اشاره دارد. پارامتر reverse=true بازگشت به نمای قبلی را درخواست می‌کند. من این ویژگی را از دمو گرفته‌ام. وقتی حذف شود، در شبیه‌ساز هیچ تفاوتی قابل مشاهده نیست… شاید در گوشی‌های هوشمند واقعی تفاوتی وجود داشته باشد،
  • و در نهایت، به استفاده از کتابخانه PrimeFaces Mobile در خط ۷ توجه کنید.

اگرچه این صفحه (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** که توسط فرم فراخوانی می‌شود توجه کنید. خط ۲۱: این متد یک رشته را در قالب «pm:nameofviewtobe displayed» برمی‌گرداند. بنابراین، در اینجا ویوی «info» نمایش داده خواهد شد. این متد کاری جز این مسیریابی انجام نمی‌دهد. پیش‌تر، فیلدهای خطوط ۱۲ تا ۱۹ مقادیر ارسال‌شده را دریافت کردند. این مقادیر برای به‌روزرسانی ویوی «infos» (ویژگی «update» در زیر) استفاده خواهند شد:


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

ویوی «infos» سپس مقادیر ارسال‌شده را نمایش خواهد داد:

  

<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>#{msg['textarea']} : ${form.inputTextArea}
          <li>#{msg['dropdown']} : ${form.selectOneMenu}
          <li>#{msg['range']} : ${form.range}
          <li>#{msg['switch']}: ${form.bswitch}
          <li>#{msg['checkbox']} : ${form.booleanCheckbox}
          <li>#{msg['checkboxes']} : ${form.manyCheckboxValue}
          <li>#{msg['radios']} : ${form.radio}
        </ul>
      </pm:content>
    </pm:view>

8.5.6. را آزمایش کنید

پروژه NetBeans را اجرا کنید. پس از استقرار پروژه روی Tomcat ([1])، می‌توان آن را روی یک شبیه‌ساز ([http://iphone4simulator.com/], [2]) آزمایش کرد:

اکنون نشان خواهیم داد که چگونه آن را روی یک گوشی هوشمند واقعی تست کنیم. ما سرور میزبان برنامه و گوشی هوشمند را به همان شبکه متصل خواهیم کرد WIFI:

ما سرور را به شبکه وای‌فای متصل می‌کنیم. سپس می‌توانیم آدرس آن را بررسی کنیم: IP:

آدرس سرور IP را یادداشت کنید: 192.168.1.127. هرگونه فایروال و نرم‌افزار آنتی‌ویروس را روی سرور غیرفعال کنید:

 

در سرور، برنامه [mv-pfm-02] را در NetBeans [1] اجرا کنید:

گوشی هوشمند را به همان شبکه وای‌فای که سرور به آن متصل است وصل کنید تا دو دستگاه بتوانند یکدیگر را شناسایی کنند. سپس یک مرورگر را باز کرده و URL [http://192.168.1.127:8080/mv-pfm-02/] [2] را درخواست کنید. سپس می‌توانید برنامه را آزمایش کنید. خوشحال خواهید شد که متوجه شوید اسلایدر، که در شبیه‌ساز کار نمی‌کند، در گوشی هوشمند کار می‌کند. بنابراین بین شبیه‌سازها و دستگاه‌های واقعی اختلاف وجود دارد.

8.6. Conclusion

ما تنها تگ‌های فرم کتابخانه PrimeFaces Mobile را پوشش داده‌ایم، اما این برای اپلیکیشن مثال ما کافی است.

8.7. آزمایش با اکلیپس

ما پروژه‌های Maven را با شناسه [1] وارد Eclipse می‌کنیم و آن‌ها را اجرا می‌کنیم: [2],

روی سرور Tomcat [3]. سپس برنامه در حال اجرا در مرورگر داخلی Eclipse [4] ظاهر می‌شود.

شایان ذکر است که برنامه [mv-pfm-02] در مرورگر اکلیپس دچار اختلال شد. هنگام بارگذاری در فایرفاکس یا IE، این مشکلات از بین رفتند.

https://stahe.github.io
این آموزش دوره، نوشته شده توسط سرگئه تاه، تحت شرایط مجوز Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported در دسترس عموم قرار گرفته است.