Skip to content

8. Primefaces Mobile'a Giriş

8.1. Bir uygulamada Primefaces Mobile'ın yeri JSF

Bu belgenin başında incelediğimiz Primefaces uygulamasının mimarisine geri dönelim:

Hedef, bir cep telefonunun tarayıcısı olduğunda, sunumu değiştirmemiz gerekir. Nitekim, bir akıllı telefonun ekran boyutu dikkate alınmalı ve sayfaların ergonomisi yeniden düşünülmelidir. Mobil cihazlar için web sayfaları oluşturmaya yönelik özel kütüphaneler mevcuttur. Primefaces mobile kütüphanesi de bunlardan biridir ve kendisi de JQuery mobile kütüphanesini temel alır.

Mobil web uygulamasının mimarisi, JSF ve Primefaces'e ek olarak Primefaces mobile kütüphanesini (PFM) kullanacağımız dışında, öncekiyle aynı olacaktır.

JSF ve Primefaces ile üzerinde çalıştığımız tüm kavramları tekrar ele alacağız. Yalnızca [présentation] katmanı (esas olarak sayfalar) değişecek.

8.2. Primefaces Mobile’ın getirdikleri

Primefaces Mobile web sitesi

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

, bir PFM [1, 2] sayfasında kullanılabilecek bileşenlerin listesini sunar:

Yukarıdaki demo uygulamasını görüntülemek için akıllı telefon simülatörleri kullanılabilir. Bunlardan biri, iPhone 4 için URL, [http://iphone4simulator.com/] ve [3] adreslerinde mevcuttur. Test edilecek uygulamanın adresi [4] adresine girildiğinde, uygulama iPhone boyutlarında görüntülenir. Bu tür simülatörler geliştirme aşamasında yararlıdır, ancak nihayetinde uygulama farklı mobil cihazlarda gerçek ortamda test edilmelidir.

8.3. PrimeFaces Mobile Öğrenimi

PrimeFaces Mobile, PrimeFaces'e kıyasla çok daha az bileşen sunar. PrimeFaces Mobile'ın web sitesi

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

bu bileşenlerin listesini vermektedir. Örneğin, [1], [2], [3] formlarında kullanılabilecek bileşenler şunlardır:

[4] örneklerinin kaynak kodunu indirebilirsiniz. Böylece, yukarıdaki [1], [2] ve [3] bileşenlerini görüntüleyen PFM sayfasının şu şekilde olduğunu görüyoruz:


<?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">
        <!-- Formlar -->
        <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. satır: pm önekine sahip PrimeFaces Mobile bileşenlerine ait yeni bir ad alanı ortaya çıkıyor,
  • 10. satır: bir sayfa tanımlanır. Bir sayfa, birden fazla görünümden oluşacaktır (12. satır). Herhangi bir anda yalnızca tek bir görünüm görülebilir. Burada, PrimeFaces örneklerimizde bolca kullandığımız bir kavramla karşılaşıyoruz: görüntülenebilen veya gizlenebilen birden fazla parçaya sahip tek bir sayfa. Burada bu işlemi yapmamıza gerek kalmayacak. Sadece görüntülenecek görünümü belirleyeceğiz; diğerleri otomatik olarak gizlenecektir,
  • 12. satır: bir görünüm,
  • 13-15. satırlar: görünümün başlığını tanımlar: 


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

Bir düğme oluşturmak için kullanılan etikete dikkat edin. href özniteliği gezinmeyi sağlar. Buradaki değeri bir görünümün adıdır. Düğmeye tıklandığında (reverse=true) main adlı görünüme geri dönülür (burada gösterilmemiştir).

  • 16. satır: görünümün içeriğini ekler,
  • 17. satır: bir giriş alanı oluşturur: 

                <p:inputText label="Input:" />
  
  • 18. satır: özel bir simgeye sahip bir giriş alanı: 

                <p:inputText label="Search:" type="search"/>
  
  • 19. satır: bir telefon numarası için giriş alanı: 

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

<inputText> etiketinin type özniteliği bir anlam taşır: kullanıcıya giriş yapması için sunulan klavye türünü belirler. Dolayısıyla, type='tel' olduğunda sayısal klavye sunulur,

  • 20. satır: çok satırlı ve genişletilebilir bir giriş alanı: 

                <p:inputTextarea id="inputTextarea" label="Textarea:"/>
  
  • 21-29. satırlar: Birden fazla bileşeni bir araya getiren bir alan: 

                <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. satır: 3. satırdaki bileşenin açıklaması;
  • 3. satır: bir açılır liste;
  • satır 4-7: içeriği,
  • satır 30: bir kaydırma çubuğu: 

                <pm:inputRange id="range" minValue="0" maxValue="100" label="Range:" />
  
  • 31. satır: iki seçenekli bir düğme: 

                <pm:switch id="switch" onLabel="yes" offLabel="no" label="Switch:" />
 
  • 32. satır: bir onay kutusu: 

      <p:selectBooleanCheckbox id="booleanCheckbox" value="false" itemLabel="I agree" label="Checkbox"/>
  
  • 33-37. satırlar: bir onay kutusu grubu: 

                  <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. satırlar: bir grup radyo düğmesi 

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

Sayfanın JSF, PF ve PFM olmak üzere üç kütüphanenin etiketlerini kullandığına dikkat edin. İlk Primefaces mobil projemizi oluşturmak için yeterli bilgiye sahibiz.

8.4. İlk Primefaces mobil projesi: mv-pfm-01

Daha önce incelediğimiz örneği alıp bir Maven projesine entegre edeceğiz. Böylece, bir Primefaces mobil projesi için gerekli bağımlılıkları keşfedeceğiz.

8.4.1. NetBeans Projesi

NetBeans projesi şöyledir:

NetBeans projesi, başlangıçta temel bir Maven web projesidir ve buna [2] bağımlılıkları eklenmiştir. Bu, [pom.xml] dosyasında aşağıdaki kodla ifade edilir:


<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. satırlarda Primefaces Mobile bağımlılığı yer almaktadır. Burada 0.9.1 sürümünü kullandık (14. satır). Ayrıca, Primefaces'in 3.2 sürümünü kullandık (9. satır). Bu sürüm numaraları önemlidir. Nitekim, henüz son halini almamış bir kütüphane olan PFM ile pek çok sorunla karşılaştım. Bir süreliğine hatalı çalışan 0.9.2 sürümü de mevcuttu. Bu sürüm daha sonra kaldırıldı. 0.9.1 sürümüne geri döndük. Dolayısıyla PFM projesi geriledi. Testler, geliştirme aşamasında olan 1.0 sürümünün 1.0-SNAPSHOT sürümüyle de (Haziran 2012 başı) başarısız oldu.

[index.xhtml] [1] ana sayfası, Primefaces mobil bileşenlerinin tanıtım sayfasıdır:


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

    <!-- Ana Görünüm -->
    <pm:view id="main">
      ...
    </pm:view>

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


    <!-- Düğmeler -->
    <pm:view id="buttons">
      ...
    </pm:view>

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

On iki görünümden oluşan tek bir sayfa (10. satır) bulunmaktadır. Bunları ayrıntılı olarak ele almayacağız. Buradaki amaç, sadece bir Primefaces mobil projesinin nasıl oluşturulacağını göstermektir.

Bu projeyi çalıştıralım. [1] hatalı bir sayfa ile karşılaşırız:

Bunun nedeni, bir Primefaces mobil uygulamasının [2]'te olduğu gibi [?javax.faces.RenderKitId=PRIMEFACES_MOBILE] parametresiyle çağrılması gerektiğidir. [faces-config.xml] dosyasını değiştirerek (veya burada olduğu gibi yoksa oluşturarak) bu parametreden kurtulmak mümkündür: [3]:

İçeriği şu şekildedir:


<?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. satır: [javax.faces.RenderKitId] parametresinin değerini belirler.

Çalıştırıldığında, URL ve [4] parametrelerini ayarlamaya gerek kalmadan, daha önce elde ettiğimizle aynı sayfa elde edilir. Bu uygulamayı test etmeyi okuyucuya bırakıyoruz. Burada bazı hatalar tespit edilir: <p:selectManyCheckbox> etiketi görüntülenmez, <p:selectOneRadio> etiketi için de durum aynıdır, <pm:range> etiketi ise çalışmaz. Demo sitesinde görülmeyen bu arızalar, uygulamanın burada kullanılan Primefaces Mobile 0.9.1 ile Primefaces 3.2 kombinasyonunda çalışmadığını düşündürüyor. Ancak yine de bu, geliştirme aşamasındaki bu kütüphanenin etiketlerini keşfetmek için bir başlangıç noktasıdır.

Daha gerçekçi bir görüntü elde etmek için, uygulamayı iPhone 4 [http://iphone4simulator.com/] gibi bir simülatörde test edebiliriz. Sonuç olarak şunu elde ederiz:

[5]'e giriyoruz; bu, önceki tarayıcıda URL olarak kullanılan ve [4]'te de kullanılan aynı değerdir.

8.5. mv-pfm-02 örneği: form ve model

Bu projede, bir Primefaces mobil sayfası ile model arasındaki etkileşimleri gösteriyoruz. Bu etkileşimler, nihayetinde Primefaces mobilin dayandığı JSF çerçevesinin kurallarına uyar.

8.5.1. Görünümler

Projede iki görünüm bulunmaktadır

  • 1 numaralı görünüm [1], [2] formunu doğrulayabileceğimiz bir form sunar;
  • 2. görünüm [3], girilen verileri onaylar ve [4] formuna geri dönme imkanı sunar.

Proje iki şeyi göstermektedir:

  • bir sayfa ile şablonu arasındaki ilişkiyi,
  • sayfanın görünümleri arasında gezinme.

8.5.2. NetBeans projesi

NetBeans projesi şu şekildedir:

  • [1]'e, PrimeFaces mobil sayfası ise
  • [2], şablonu
  • [3] dosyasında uygulama uluslararasılaştırılmış olduğu için mesaj dosyaları,
  • [4], projenin bağımlılıkları.

8.5.3. Proje yapılandırması

Yapılandırma dosyalarını açıklama yapmadan veriyoruz. Artık bunlar standart hale gelmiştir.

[web.xml]: web uygulamasını yapılandırır:


<?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]: uygulamayı yapılandırır 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]: Fransızca mesaj dosyası:


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 mobil sayfası

[index.xhtml] sayfası şöyledir:


<?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 görünümü -->
    <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>

    <!-- bilgi görünümü -->
    <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 sitesindeki örnek uygulamayı aldık ve çalışır hale getirmek için düzenledik:

  • <p:selectManyCheckbox> etiketi görüntülenmiyordu. Bunu bir <h:selectManyCheckbox> etiketiyle değiştirdik (32. satır),
  • <p:selectOneRadio> etiketi görüntülenmiyordu. Bunu <p:selectOneRadio> etiketiyle değiştirdik (40. satır),
  • 27. satır: Bir kaydırma çubuğu görüntüleyen <pm:inputRange> etiketini koruduk. Bu etiket hatalı çalışıyor: kaydırma çubuğunun imlecini hareket ettiremiyoruz. Ancak bir sayı girerek çubuğu hareket ettirebiliyoruz,
  • PFM'e özgü etiketlerin sayısının az olduğuna dikkat edelim (ilk görünümde 13, 14, 15, 19, 27 ve 28. satırlar). Diğer etiketler ise klasik JSF ve PF etiketleridir. Primefaces mobile, bu iki çerçeveye dayanmaktadır.

Sayfanın yapısına dikkat edelim:


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

    <!-- Formlar görünümü -->
    <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>

    <!-- bilgi görünümü -->
    <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. satır: PFM sayfasını tanımlar. title özniteliği, tarayıcıda görüntülenen başlığı belirler;
  • bir sayfa bir veya daha fazla görünümden oluşur. Sayfa ilk kez görüntülendiğinde, ilk görünüm gösterilir. Ardından gezinme yoluyla bir görünümden diğerine geçilir. Burada 13. satırdaki "forms" ve 24. satırdaki "infos" olmak üzere iki görünüm vardır,
  • 14. satır: header etiketi, bir görünümün başlığını tanımlar,
  • 15. satır: content etiketi, bir görünümün içeriğini tanımlar,
  • 16. satır: forms görünümü, JSF adlı bir form içerir,
  • 18. satır: Bu form, klasik bir Primefaces düğmesi ile onaylanacaktır. Form, [Form] modeline gönderilecek ve [Form].valider yöntemi tarafından işlenecektir. Bu yöntem görevini yerine getirecektir. Bu yöntemin "infos" görünümünün görüntülenmesini talep ettiğini göreceğiz. Bundan önce bu görünüm, AJAX çağrısı (update özniteliği) ile güncellenmiş olacaktır,
  • 26. satır: Bir düğmeyle bilgi görünümünden form görünümüne geçebileceğiz. [href="#forms?reverse=true"] href özniteliğinin biçimine dikkat edelim. #forms notasyonu, form görünümünü belirtir. reverse=true parametresi bir önceki sayfaya geri dönülmesini ister. Bu özniteliği demodan aldım. Bunu kaldırdığımızda, simülatörde hiçbir fark görülmez... Belki gerçek akıllı telefonlarda bir fark vardır,
  • son olarak 7. satırda Primefaces mobile kütüphanesinin kullanıldığına dikkat edelim.

Yeni özellikler sunsa da, PFM sayfası tamamen anlaşılırdır. Aynı durum, şablonu olan [Form.java] için de geçerlidir.

8.5.5. [Form.java] şablonu

Bu şablon şöyledir:


package beans;

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

@ManagedBean
@SessionScoped
public class Form implements Serializable {
  // şablon

  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() {
    // bilgi görünümüne geçiliyor
    return "pm:infos";
  }

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

  // alıcı ve ayarlayıcılar
  ...
}

Burada yeni bir şey yok. Her şey daha önce görülmüştü. Yine de form tarafından çağrılan valider yönteminin biçimine dikkat çekmek gerekir. 21. satır: 'pm:görüntülenecekgörünüşadı' biçiminde bir karakter dizesi döndürür. Burada, info görünümü görüntülenecektir. Yöntem, bu yönlendirme işleminden başka bir şey yapmaz. Daha önce, 12-19. satırlardaki alanlara gönderilen değerler alınmıştı. Bu değerler, "infos" görünümünü güncellemek için kullanılacak (aşağıdaki "update" özniteliği):


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

Böylece "infos" görünümü, gönderilen değerleri görüntüleyecektir:

  

<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. 'leri

NetBeans projesini çalıştırıyoruz. Proje Tomcat'e [1] dağıtıldıktan sonra, bir simülatörde [http://iphone4simulator.com/] [2] test edilebilir:

Şimdi bunu gerçek bir akıllı telefonda nasıl test edeceğimizi göstereceğiz. Uygulamayı barındıran sunucuyu ve akıllı telefonu aynı ağa bağlayacağız WIFI:

Sunucuyu Wi-Fi ağına bağlayalım. Ardından sunucunun adresini kontrol edebiliriz: IP:

Yukarıda sunucunun adresi IP: 192.168.1.127 not edilir. Sunucudaki olası güvenlik duvarları ve antivirüs programları devre dışı bırakılır:

 

Sunucuda, NetBeans'te [mv-pfm-02] uygulamasını başlatın:

Akıllı telefonu, sunucuyla aynı Wi-Fi ağına bağlayarak iki cihazın birbirini görebilmesini sağlarız. Ardından bir tarayıcı açıp URL [http://192.168.1.127:8080/mv-pfm-02/] [2] adresini gireriz. Sonra uygulamayı test edebiliriz. Böylece, simülatörde çalışmayan kaydırma çubuğunun akıllı telefonda çalıştığını memnuniyetle göreceksiniz. Dolayısıyla simülatörler ile gerçek cihazlar arasında bir fark vardır.

8.6. Conclusion

Primefaces Mobile kütüphanesindeki form etiketlerinden sadece bazılarını tanıttık, ancak bu örnek uygulamamız için yeterli.

8.7. Eclipse ile testler

Eclipse'e [1] adlı Maven projelerini içe aktarıp [2] ve

adlı projeleri Tomcat sunucusu [3] üzerinde çalıştırıyoruz. Çalıştırılan uygulama, Eclipse'in dahili tarayıcısında [4] olarak görünür.

[mv-pfm-02] uygulamasının Eclipse tarayıcısında bazı hatalar verdiği dikkat çekmektedir. Bu uygulama Firefox veya IE tarayıcılarında yüklendiğinde, söz konusu hatalar ortadan kalkmıştır.

https://stahe.github.io
Serge Tahé tarafından yazılan bu kurs-eğitim kılavuzu, aşağıdaki koşullar altında kamuoyuna sunulmaktadır: Creative Commons Atıf – Ticari Olmayan Kullanım – Aynı Şekilde Paylaş 3.0 Değiştirilemez.