Skip to content

8. مقدمة إلى PrimeFaces Mobile

8.1. دور PrimeFaces Mobile في تطبيق JSF

لنعد إلى بنية تطبيق PrimeFaces كما درسناها في بداية هذا المستند:

عندما يكون الهدف هو متصفح الهاتف المحمول، نحتاج إلى تغيير التخطيط. في الواقع، يجب أخذ حجم شاشة الهاتف الذكي في الاعتبار، وإعادة تصميم قابلية استخدام الصفحات. هناك مكتبات متخصصة في إنشاء صفحات الويب للأجهزة المحمولة. هذا هو الحال مع مكتبة PrimeFaces Mobile، التي تعتمد بدورها على مكتبة jQuery Mobile.

ستكون بنية تطبيق الويب للجوال مطابقة لتلك السابقة، باستثناء أنه بالإضافة إلى JSF و PrimeFaces، سنستخدم مكتبة PrimeFaces Mobile (PFM).

سنعيد استعراض جميع المفاهيم التي تمت تغطيتها باستخدام JSF و PrimeFaces. وستتغير فقط طبقة [العرض] (الصفحات بشكل أساسي).

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 على الرابط [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">
        <!-- 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>
  • السطر 7: يظهر مساحة اسم جديدة، وهي مساحة اسم مكونات PrimeFaces Mobile التي تبدأ بالبادئة 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 Mobile لنا.

8.4. مشروع PrimeFaces Mobile الأول: mv-pfm-01

سنعود إلى المثال الذي درسناه سابقًا لدمجه في مشروع Maven. سيسمح لنا ذلك باستكشاف التبعيات المطلوبة لمشروع PrimeFaces Mobile.

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 من الإصدار 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">
 
    <!-- 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>

توجد صفحة واحدة (السطر 10) تتكون من اثني عشر عرضًا. لن ندخل في تفاصيلها هنا. الهدف هنا هو ببساطة إظهار كيفية إنشاء مشروع PrimeFaces Mobile.

دعونا نقوم بتشغيل هذا المشروع. نحصل على صفحة خطأ [1]:

والسبب هو أنه يجب استدعاء تطبيق PrimeFaces Mobile باستخدام المعلمة [?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 Mobile ونموذجها. تتبع هذه التفاعلات قواعد إطار عمل JSF، الذي يستند إليه PrimeFaces Mobile في النهاية.

8.5.1. الآراء

هناك طريقتان للعرض في المشروع

  • يعرض العرض 1 [1] نموذجًا يمكن إرساله [2]،
  • الطريقة 2 [3] تؤكد الإدخالات وتقدم خيار العودة إلى النموذج [4].

يوضح المشروع أمرين:

  • العلاقة بين الصفحة وقالبها،
  • التنقل بين طرق العرض على الصفحة.

8.5.2. مشروع NetBeans

مشروع NetBeans هو كما يلي:

  • في [1]، صفحة PrimeFaces Mobile،
  • في [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 للجوال

صفحة [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 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>

أخذنا المثال التوضيحي من موقع 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">
 
    <!-- 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>
  • السطر 10: يحدد صفحة PFM. تحدد سمة العنوان العنوان الذي يعرضه المتصفح؛
  • تتكون الصفحة من عرض واحد أو أكثر. عند عرض الصفحة لأول مرة، يظهر العرض الأول. ثم، يمكنك التنقل من عرض إلى آخر. هنا، يوجد عرضان: النماذج في السطر 13 والمعلومات في السطر 24،
  • السطر 14: تحدد علامة header رأس العرض،
  • السطر 15: تحدد علامة المحتوى محتوى العرض،
  • السطر 16: تحتوي طريقة العرض forms على نموذج JSF،
  • السطر 18: سيتم إرسال هذا النموذج عبر زر PrimeFaces قياسي. سيتم إرسال النموذج إلى نموذج [Form] ومعالجته بواسطة طريقة [Form].validate. وستقوم هذه الطريقة بوظيفتها. سنرى أنها تطلب عرض طريقة عرض المعلومات. وقبل ذلك، سيتم تحديث طريقة العرض عبر استدعاء AJAX (السمة update)،
  • السطر 26: يمكننا التبديل من عرض المعلومات إلى عرض النماذج باستخدام زر. لاحظ تنسيق سمة href [href="#forms?reverse=true"]. تشير الرمزية #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 {
  // 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
  ...
}

لا يوجد شيء جديد هنا. لقد رأينا كل هذا من قبل. لاحظ، مع ذلك، شكل طريقة التحقق التي يستدعيها النموذج. السطر 21: تعيد سلسلة في شكل 'pm:viewname'. هنا، سيتم عرض عرض المعلومات. لا تفعل الطريقة شيئًا سوى هذا التنقل. سابقًا، تلقت الحقول في الأسطر 12–19 القيم المرسلة. سيتم استخدام هذه القيم لتحديث عرض المعلومات (سمة التحديث أدناه):


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

سنوضح الآن كيفية اختباره على هاتف ذكي حقيقي . سنقوم بتوصيل الخادم الذي يستضيف التطبيق والهاتف الذكي بنفس شبكة Wi-Fi:

قم بتوصيل الخادم بشبكة 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. الخلاصة

لقد تناولنا فقط علامات النماذج من مكتبة PrimeFaces Mobile، ولكن هذا يكفي لتطبيقنا النموذجي.

8.7. الاختبار باستخدام Eclipse

استورد مشاريع Maven [1] إلى Eclipse وقم بتشغيلها [2]،

على خادم Tomcat [3]. ثم يظهر التطبيق قيد التشغيل في المتصفح الداخلي لبرنامج Eclipse [4].

لاحظ أن التطبيق [mv-pfm-02] أظهر أعطالاً في متصفح Eclipse. وعند تحميله في متصفحي Firefox أو IE، اختفت هذه المشكلات.

https://stahe.github.io
هذا البرنامج التعليمي الذي كتبه Serge Tahé متاح للجمهور وفقًا لشروط Creative Commons Attribution – Non-Commercial – ShareAlike 3.0 Unported.