PrimeFaces Örnek Bir Proje Kurulumu

Merhaba, bu yazıda size adım adım PrimeFaces içeren örnek bir proje nasıl
kolayca yaratılır bunu göstermeye çalışacağım. Kurulum ve çalıştırmak için benim
kullandığım araçlar Maven 2, eclipse 3.3, tomcat 6.0.14 ve tabii ki PrimeFaces.

Maven, eclipse kurulumu, JSF kurulumu gibi konuları biraz hızlı geçip asıl amacımız
olan gerçek bir uygulamada PrimeFacesʼin entegrasyonunu ve çalışmasını göreceğiz.
Maven 2 ile bir JSF projesinin oluşturulmasını Çağatayʼın blogunda bulabilirsiniz. Ben
şimdilik bunları kısaca geçerek bize içinde PrimeFaces olan hazır bir proje yapmak için
gerekli adımları yazacağım.

Üzerinde çalışacağımız projeyi yaratmak için Mavenʼı kullanacağız. Terminal veya

Command Lineʼdan çalıştırdığımız aşağıdaki komut ile projemizi Maven yardımıyla
yaratacağız. Proje adını ben ToplantiOrganizatoru olarak seçtim siz isterseniz bunu
değiştirebilirsiniz.

mvn archetype:create -DgroupId=com.prime -DartifactId=ToplantiOrganizatoru

-DarchetypeArtifactId=maven-archetype-webapp

Yukarıdaki komut ile ToplantiOrganizatoru adı projemizi yaratmış olduk. Bu proje

içerisindeki yaratılmış olan pom.xml dosyasını aşağıdaki şekilde değiştirerek
bağımlılıklarını belirleyelim:

<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-
v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.prime</groupId>
<artifactId>ToplantiOrganizatoru</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>ToplantiOrganizatoru Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>javax.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>1.2_10</version>
</dependency>
<dependency>
<groupId>com.sun</groupId>
<artifactId>jsf-impl</artifactId>
<version>1.2_10</version>
</dependency>
 <dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces-ui</artifactId>
<version>0.8.2</version>
</dependency>
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>optimus</artifactId>
<version>0.7.1</version>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>com.google.code.guice</groupId>
<artifactId>guice</artifactId>
<version>1.0</version>
</dependency>
<dependency>
<groupId>com.sun.facelets</groupId>
<artifactId>jsf-facelets</artifactId>
<version>1.1.14</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.4</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-simple</artifactId>
<version>1.5.6</version>
<scope>compile</scope>
</dependency>
</dependencies>
<build>
<finalName>ToplantiOrganizatoru</finalName>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>1.5</source>
<target>1.5</target>
</configuration>
</plugin>
</plugins>
</build>
<repositories>
<repository>
<id>prime-repo</id>
<name>Prime Technology Maven Repository</name>
<url>http://repository.prime.com.tr/</url>
<layout>default</layout>
</repository>
</repositories>
</project>
 Biraz uzun gibi görünse de PrimeFaces, facelets, mojarra 1.2 kullanan basit bir
projenin bağımlılıkları bu kadardır.

Bağımlılıklarımız da hazır olduğuna göre, artık bu projeyi eclipseʼe eklemek için

aşağıdaki gerekli komutu çalıştırarak artık projeyi eclipseʼden yönetebileceğiz.

mvn eclipse:eclipse -Dwtpversion=1.5

Artık projemizi eclipseʼe ekleyip, onu çalıştırabiliriz.

Projeyi eclipseʼe ekledikten sonra yukarıdaki gibi bir görüntünün olmasını

bekliyoruz. Projeyi eclipseʼe ekledikten sonra artık bu projeyi çalışır hale getirmemiz için
aşağıdaki şu 2 basit adımı uygulamamız yeterli olacaktır.

1) src/main/webapp/WEB-INF altına aşağıdaki sekildeki faces-config.xml dosyasını

yaratmak:

<?xml version="1.0" encoding="utf-8"?>

<faces-config 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_1_2.xsd" version="1.2">

<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
</faces-config>
 Bazı forumlarda veya blogʼlarda JSFʼte çok fazla xml var gibi yazılar bu aralar çok
moda ama buradaki xmlʼden başka JSFʼe özel başka bir xml dosyası projemizde
olmayacak.

2) src/main/webapp/WEB-INF altındaki web. xml dosyamızı aşağıdaki gibi değiştiriyoruz:

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/
j2ee/web-app_2_4.xsd"
version="2.4">
<description>web.xml</description>

<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
<context-param>
<param-name>facelets.SKIP_COMMENTS</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</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>*.jsf</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>Resource Servlet</servlet-name>
<servlet-class>
org.primefaces.ui.resource.ResourceServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Resource Servlet</servlet-name>
<url-pattern>/primefaces_resources/*</url-pattern>
</servlet-mapping>
</web-app>
 Ayarlamaları bitirdikten sonra artık aşağıdaki test sayfamızı yazıp şimdiye kadar
yaptıklarımızı deneyelim. Aşağıdaki örnek bir JSF test sayfası bulunmaktadır. Bu sayfayı
test.xhtml olarak src/main/webapp/ altına kaydedebilirsiniz:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">

<f:view contentType="text/html">
<head>
</head>
<body>
<h:outputText value=”Merhaba” />
</body>

</f:view>
</html>

Test sayfamız da hazır olduktan sonra, projemizi artık tomcat üstünden çalıştırıp,
test edebiliriz. Projemizi çalıştırdıktan sonra aşağıdaki linkten test sayfamız denenmeye
hazır olacaktır. Burada benim projemin adının ToplantiOrganizatoru olduğunu lüten
unutmayın, eğer başka bir proje adı yazdıysanız onu kullanmanız gerekir. Herhangi bir
tarayıcıdan aşağıdaki adres ile test sayfamızı görebiliriz:

http://localhost:8080/ToplantiOrganizatoru/test.jsf

Aşağıdaki gibi bir çıktı görüyorsak sorun yok demektir:

 Bundan sonra artık JSF - facelets kurulumunu halletiğimiz için asıl amacımız olan
PrimeFacesʼi kurcalamaya başlayabiliriz. Şimdi test.xhtml dosyamızı değiştirelim ve oraya
bir WYSIWYG editör koyalım. test.xhtml dosyamızı aşağıdaki gibi değiştiriyoruz:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">

<f:view contentType="text/html">
<head>
</head>
<body>
<p:editor />
</body>

</f:view>
</html>

Sayfamızı tekrar çalıştıralım ve güzel sonucu görelim:

Ama bu hiç de güzel görünmüyor. Bir yerlerde bir eksiklik olduğunu düşünüyorsanız
haklısınız çünkü PrimeFacesʼtaki bileşenlerin çalışması için head içinde p:resources
bileşeninin olması gerekmektedir. Bu bileşen o sayfadaki bileşenler için gerekli javascript
ve imajları sayfanıza yükleyecektir. test.xhtml kodumuzu aşağıdaki şekilde değiştiriyoruz
( head içine sadece p:resources ekledik ) :
 <html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">

<f:view contentType="text/html">
<head>
<p:resources/>
</head>
<body>
<p:editor />
</body>

</f:view>
</html>

Şimdi sayfayı tekrar çalıştıralım:

Bu sefer herşey daha güzel görünüyor. Artık PrimeFaces de çalışmaya hazır

olduğuna göre, basit bir kayıt sayfamızı yapalım. Bu sayfada PrimeFacesʼın hem Ajax,
hem grafik,hem datatable hem de persistence desteğinden faydalanalım.
 Toplantı organizatör projemiz için, gelecek olan misafirlerin bir tabloya kaydı, bu
misafirlerin bir grafikte gösterilmesi ve istenildiği zaman bir excel çıktısı alınması şeklinde
bir senaryo üstünden gidelim. Böyle bir senaryo için bir kaç eklenti yapmamız lazım
pom.xml ve web.xml dosyamıza. pom.xml dosyasına aşağıdaki bağımlılıkları ekleyelim:

<dependency>
<groupId>poi</groupId>
<artifactId>poi</artifactId>
<version>2.5.1-final-20040804</version>
</dependency>
<dependency>
<groupId>aopalliance</groupId>
<artifactId>aopalliance</artifactId>
<version>1.0</version>
</dependency>
<dependency>
<groupId>javax.persistence</groupId>
<artifactId>persistence-api</artifactId>
<version>1.0</version>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate</artifactId>
<version>3.2.2.ga</version>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-annotations</artifactId>
<version>3.2.1.ga</version>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-entitymanager</artifactId>
<version>3.2.1.ga</version>
</dependency>
<dependency>
<groupId>hsqldb</groupId>
<artifactId>hsqldb</artifactId>
<version>1.8.0.7</version>
</dependency>

Yukarıdaki bağımlılıklar database işlemlerʼi ve excel çıktısı için gerekmekte.

Yukarıdaki bağımlılıkları pom.xmlʼde dependencies altına ekledikten sonra aşağıdaki
komutu çalıştırırsanız bu bağımlılıklar eclipse projenize de eklenecektir. Bu komutu
çalıştırdıktan sonra eclipse projenizde refresh yapmayı unutmayalım.

mvn eclipse:clean eclipse:eclipse -Dwtpversion=1.5

 Bağımlılıklarımızı halletikten sonra database işlemlerimizi halledelim. Bunun için
src/main/resources altına META-INF klasörünü yaratıp içine persistence.xml dosyamızı
ekliyoruz. Bu dosyanın içeriği aşağıdaki gibidir:

<?xml version="1.0" encoding="UTF-8"?>

<persistence xmlns="http://java.sun.com/xml/ns/persistence"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/
xml/ns/persistence/persistence_1_0.xsd"
version="1.0">

<persistence-unit name="toplantiOrganizatoru" transaction-type="RESOURCE_LOCAL">

<provider>org.hibernate.ejb.HibernatePersistence</provider>
<class>com.prime.toplanti.alan.Misafir</class>
<properties>
<property name="hibernate.dialect"
value="org.hibernate.dialect.HSQLDialect"/>
<property name="hibernate.connection.url"
value="jdbc:hsqldb:mem:jpabox"/>
<property name="hibernate.connection.driver_class"
value="org.hsqldb.jdbcDriver"/>
<property name="hibernate.connection.username" value="sa"/>
<property name="hibernate.connection.password" value=""/>
<property name="hibernate.hbm2ddl.auto" value="create"/>
<property name="hibernate.show.sql" value="true"/>
</properties>
</persistence-unit>
</persistence>

Yukarıdaki kod, veritabanı kısmında JPAʼya hsql kullanacağımız belirtiyor ve

com.prime.toplanti.alan.Misafir diye bir sınıfımızın olduğunu bunun veritabanına
kaydedilecek olduğunu belirtiyor. Projemizde bu paket altında Misafir sınıfı yaratmayı
unutmamamız lazım yani.

Şimdi bu paket yapısını oluşturalım. Eclipse projemizde src/main altına java/com/

prime/toplanti/alan paketi yarattıktan sonra Misafir.java sınıfımızı oluşturalım. Misafir.java
sınıfımızın içeriği aşağıdaki gibi olsun :

package com.prime.toplanti.alan;

import javax.persistence.Basic;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class Misafir {
 @Id
@GeneratedValue(strategy = GenerationType.AUTO)
private long id;

@Basic
private String isim;

@Basic
private Integer kisiSayisi;

public long getId() {

return id;
}

public void setId(long id) {

this.id = id;
}

public String getIsim() {

return isim;
}

public void setIsim(String isim) {

this.isim = isim;
}

public Integer getKisiSayisi() {

return kisiSayisi;
}

public void setKisiSayisi(Integer kisiSayisi) {

this.kisiSayisi = kisiSayisi;
}
}

Misafir sınıfımız hazır olduğuna göre şimdi de bu misafir sınıfımızı kaydedecek,
getirecek DAO sınıflarımızı yapalım. com.prime.toplanti.ambar.MisafirAmbari.java
aşağıdaki gibi olsun:

package com.prime.toplanti.ambar;

import java.util.List;

import com.prime.toplanti.alan.Misafir;

public interface MisafirAmbari {

List<Misafir> hepsiniGetir();

void kaydet( Misafir misafir );
}
 Gene aynı paketteki MisafirAmbariJPA.java ise şöyle:

package com.prime.toplanti.ambar;

import java.util.List;

import javax.persistence.EntityManager;

import org.primefaces.optimus.config.annotations.Transactional;

import com.google.inject.Inject;
import com.prime.toplanti.alan.Misafir;

public class MisafirAmbariJPA implements MisafirAmbari {

@Inject
private EntityManager em;

public List<Misafir> hepsiniGetir() {

return em.createQuery("SELECT m FROM Misafir m").getResultList();
}

@Transactional
public void kaydet(Misafir misafir) {
em.persist(misafir);
}

public void setEm(EntityManager em) {

this.em = em;
}
}

Gördüğünüz gibi, çok kolay bir şekilde metotlarımızı ekledik. Burada @Inject ile
gördüğünüz kısımda Google Guice kullanarak EntityManager sınıfını bu MisafirAmbariJPA
sınıfına verdik. PrimeFacesʼin bunu yapması için aşağıdaki 2 eklentiye ihtiyacımız var.

1) Ambar sınıfımızın tanımlı olduğu bir configürasyon sınıfı. com/prime/toplanti/ altına

kurulum diye bir paket açıp içine Konfigurasyon.java sınıfını aşağıdaki içerikle
ekleyelim:

package com.prime.toplanti.kurulum;

import com.google.inject.Binder;
import com.google.inject.Module;
import com.google.inject.Scopes;
import com.prime.toplanti.ambar.MisafirAmbari;
import com.prime.toplanti.ambar.MisafirAmbariJPA;

public class Konfigurasyon implements Module{

public void configure(Binder binder) {

binder.bind(MisafirAmbari.class).to(MisafirAmbariJPA.class).in(Scopes.SINGLETON);
}
}
 Artık son ayarımızı da web.xml dosyamıza yaptıktan sonra, veritabanı kısmını da
halletmiş olacağız. web.xml dosyamıza aşağıdaki kodu ekleyelim:

<context-param>
<param-name>optimus.CONFIG_MODULES</param-name>
<param-value>com.prime.toplanti.kurulum.Konfigurasyon,
org.primefaces.optimus.persistence.JPAModule
</param-value>
</context-param>

<context-param>
<param-name>optimus.CONTEXT_SCAN_PATH</param-name>
<param-value>com.prime.toplanti</param-value>
</context-param>

<filter>
<filter-name>Optimus Filter</filter-name>
<filter-class>
org.primefaces.optimus.persistence.filter.PersistenceFilter
</filter-class>
</filter>

<filter-mapping>
<filter-name>Optimus Filter</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>

Yukarıda sizin de anlayabileceğiz gibi konfigürasyon dosyalarımız, projemizin

çalıştığı paketi ve veritabanı işlemleri için gerekli olan fiterʼı sistemimize tanıttık.
Konfigürasyon işlemlerimiz bu kadar. Tam sıkılmaya başlamıştık konfigurasyon
dosyalarından ki artık işin eğlenceli ve kolay kısmına geçebiliriz.

Artık sayfamızı tasarlamaya başlayabiliriz. Öncelikle sayfamızda kullanacağımız

managed beanʼi yaratmakla başlayabiliriz işimize. com.prime.toplanti.web altına
tanımlayacağımız MisafirKayit.java dosyamızın içeriği aşağıdaki gibi olsun:

package com.prime.toplanti.web;

import java.util.List;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

import org.primefaces.optimus.config.Scope;
import org.primefaces.optimus.config.annotations.Controller;

import com.google.inject.Inject;
import com.prime.toplanti.alan.Misafir;
import com.prime.toplanti.ambar.MisafirAmbari;
 @Controller(name = "misafirKayit", scope = Scope.REQUEST)
public class MisafirKayit {

private MisafirAmbari misafirAmbari;

private Misafir misafir = new Misafir();
private List<Misafir> misafirler;

@Inject
public MisafirKayit(MisafirAmbari misafirAmbari) {
this.misafirAmbari = misafirAmbari;
misafirler = misafirAmbari.hepsiniGetir();
}

public Misafir getMisafir() {

return misafir;
}

public void setMisafir(Misafir misafir) {

this.misafir = misafir;
}

public List<Misafir> getMisafirler() {

return misafirler;
}

public void setMisafirler(List<Misafir> misafirler) {

this.misafirler = misafirler;
}

public String kaydet() {

misafirAmbari.kaydet(misafir);
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO,
"Misafir Kaydedildi","Misafir Kaydedildi"));
misafir = new Misafir();
misafirler = misafirAmbari.hepsiniGetir();

return null;
}
}

Gördüğünüz gibi bu sınıfta bütün misafirleri temsil eden ve kaydedilecek misafir

objesini tutacak referanslarımız mevcut. Bu managed-beanʼe sayfalarımızdan ulaşmak
için, bu sınıfın tanımını faces-config.xml dosyasına yazalım.

Eğer az önce yukarıdaki yazıyı okurken, içinizden “faces-config.xml dosyasına

başka bir bilgi yazmayacaktık” diye düşünmediyseniz, bu yazıyı en baştan okumanızı
tavsiye ederim. Çünkü evet orada dediğimiz gibi, faces-config.xml dosyasına bir daha bir
yazı yazmayacağız. Peki jsf sayfalarımızdan bu sınıfa nasıl ulaşacağız? Cevap çok basit:

@Controller(name = "misafirKayit", scope = Scope.REQUEST)

 Bir önceki sayfadaki tanım ile otomatik olarak bu sınıfımız bir Request scopeʼda
çalışmak üzere misafirKayit adı ile jsf sayfalarımızdan ulaşabileceğimiz bir managed bean
oldu. Ne kadar kolay değil mi?

Artık misafir kaydeden ve listeleyen sayfamızı yapmaya başlayalım isterseniz. src/

main/webapp altına misafirKayit.xhtml dosyasını ekleyelim. İçeriği de şöyle olsun:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:opt="http://primefaces.prime.com.tr/optimus"
xmlns:p="http://primefaces.prime.com.tr/ui">

<f:view contentType="text/html">
<head>
<p:resources />
</head>
<body>
<h:form prependId="false">
<h:messages />
<p:panel header="Yeni Misafir">
<h:panelGrid columns="2">
<h:outputLabel value="isim : *" for="txt_isim"></h:outputLabel>
<h:inputText id="txt_isim" value="#{misafirKayit.misafir.isim}"
required="true"/>

<h:outputLabel value="Sayı : *" for="txt_sayi"></h:outputLabel>

<h:inputText id="txt_sayi" value="#{misafirKayit.misafir.kisiSayisi}"
required="true" />

<h:outputText value="" />

<h:panelGroup>
<h:commandButton action="#{misafirKayit.kaydet}" value="Kaydet" />
</h:panelGroup>
</h:panelGrid>
</p:panel>
</h:form>

<br />

<p:dataTable id="tablo" value="#{misafirKayit.misafirler}" var="misafir">

<p:column>
<f:facet name="header">
<h:outputText value="Title" />
</f:facet>
<h:outputText value="#{misafir.isim}" />
</p:column>

<p:column>
<f:facet name="header">
<h:outputText value="Discs" />
</f:facet>
<h:outputText value="#{misafir.kisiSayisi}" />
</p:column>

</p:dataTable>
</body>

</f:view>
</html>

 Sayfamız da hazır olduğuna göre, bu sayfayı test edelim. Tarayıcımızdan

http://localhost:8080/ToplantiOrganizatoru/misafirKayit.jsf

sayfasına girdiğimiz zaman aşağıdaki gibi bir görüntü ile misafir kaydımızı yapabileceğiz.

Bu sayfayla bir süre oyalandıktan sonra, bu sayfaya Ajax ekleyelim. Bir kayıt girip
Kaydet butonuna basıntığımızda Ajax ile tablomuza eklenmesi için, mevcut kaydet butonu
yerine aşağıdakini ekleyelim

<p:button value="Kaydet" action="#{misafirKayit.kaydet}"

update="tablo" async="true"/>

Evet sadece bu kadar. Artık bir Ajax butonumuz var ve artık misafirler tabloya Ajax
ile ekleniyor.

Ajaxʼsız versiyonda butona tıkladığımız zaman, tabloya misafir ekleniyordu ve eski

değerler siliniyordu. Ama Ajax ekledikten sonra artık form temizlenmiyor değil mi? Peki
bunun için ne yapmamız lazım? PrimeFacesʼin amacı basit kod yazmak olduğu için cevap
çok basit olmalı. Tahmin ettiğiniz gibi, p:button içindeki update özelliğine bir eklenti yaparak
sorunu çözeceğiz. Butonumuzu aşağıdaki gibi değiştiriyoruz ve artık form her kaydet
denildiğinde temizleniyor

<p:button value="Kaydet" action="#{misafirKayit.kaydet}"

update="tablo,txt_isim,txt_sayi" async="true"/>
 Ajax ile butonlarla oynadıktan sonra, biraz da datatable bileşenini biraz değiştirelim.
Mesela sayfa şeklinde gösterim ( paging ) ve sıralama ( sorting ) ekleyelim isterseniz. Eğer
tabloda çok fazla obje varsa, aynı sayfada gösterildiği zaman bu objeler, sayfa aşağıya
doğru uzayıp gider ve kullanıcı için hoş bir görüntü oluşturmaz. Bunun önüne geçmek için
tablomuza, sayfa şeklinde gösterilebilir hale getirelim. Bundan önce de olduğu gibi böyle
bir özellik eklemek tabii ki çok kolay. Aşağıdaki p:dataTable kodu yerine

<p:dataTable id="tablo" value="#{misafirKayit.misafirler}" var="misafir">

aşağıdaki kodu yazıyoruz.

<p:dataTable id="tablo" value="#{misafirKayit.misafirler}" var="misafir"

paginator="true" rows="5">

Gördüğünüz gibi sadece paginator="true" rows="5" diyerek bu özelliği eklemiş

olduk. Bu kod parçasını eklediğimizde aşağıdaki gibi bir ekran görüntüsü ile karşılaşıyoruz.

Paging özelliği de ekledikten sonra, isterseniz bir de sıralama ( sorting ) yapalım

tablomuzdaki kolonlarda. Bu özelliği de eklemek tabii ki çok kolay. Hangi kolonda sıralama
istiyorsak, o kolonun tanımına sadece sortable="true" ekliyoruz. Mesela isim
kolonuna ekleyelim aşağıdaki gibi:
 <p:column sortable="true">

Artık bu kolonun üstüne tıkladığımızda sıralam işlemi gerçekleşecektir ve ekran

görüntümüz aşağıdaki gibi olacaktır.

Her özellik kolay bir şekilde eklenip çıkarılabiliyor gördüğünüz gibi. En son özellik
olarak da bu tabloya bir excel çıktısı ekleyelim. bunun için sayfamıza aşağıdaki buton
kodunu ekliyoruz

<h:commandButton value="Excel">
<opt:exportActionListener type="xls" target="tablo" fileName="misafirler"/>
</h:commandButton>

ve herşey hazır. Bu butona tıkladığımız zaman bize aşağıdakine benzer bir excel
çıktısı verecektir.
 Burada fileName indirilecek dosyanın adını, type, çıktı tipini, target ise tabloʼnun
idʼsini gösterir. PDF çıktısı almak için yapmamız gereken tek şey, type="xls" yerine
type="pdf" yazmak. İstersek CSV ve XML çıktılarını gene aynı şekilde type özelliğini
değiştirerek alabiliriz.

Son olarak da bu sayfamıza bir pasta grafiği ekleyelim. Bu pasta grafiği de

misafirlerin kişi sayısını belirten bir pasta grafiği olsun. Normalde eklenmesi zor olabilecek
bu bileşeni, sayfamıza sadece aşağıdaki kodu ekleyerek bir pasta grafiği ekleyebiliriz:

<p:pieChart value="#{misafirKayit.misafirler}" var="misafir"
categoryField="#{misafir.isim}" dataField="#{misafir.kisiSayisi}" />

Sadece bu kadar!. Bu kod parçacığını ekledikten sonra sayfamızdaki çıktı aşağıdaki
gibi olacaktır:
 Gördüğünüz gibi bu dökümandaki amaç, PrimeFaces ile çok kolay bir şekilde
projelerinizi geliştirebiliyor olabilmemiz. Bu dökümanda bir kayıt işlemi senaryosunu
göstermiş olsak da, daha bahsetmediğimiz aşağıdaki özellikler de PrimeFacesʼde mevcut

• Bir çok zengin bileşen http://www.rehberharitam.com/primefaces-examples/ui/home.jsf

adresinden de bu bileşenleri görebilirsiniz. Grafik, CAPTCHA, ImageCropper,Ağaç,
Menü gibi bir çok zengin bileşen mevcut.
• XMLʼsiz navigasyon
• Sayfalarınızın o anki görüntüsünün PDF çıktısı http://www.rehberharitam.com/
primefaces-examples/optimus/playerDisplayExample.jsf
• Yardımcı validatorʼler
• Kod geliştirirken size hataları, mesajları, performansı gösterecek FacesTrace projesi
http://www.rehberharitam.com/primefaces-examples/facestrace/createBook.jsf

Son olarak PrimeFaces sayfasına ulaşmak için

http://primefaces.prime.com.tr/tr/ ,

Projenin google codeʼdaki sayfasına ulaşmak için

http://code.google.com/p/primefaces/ ,

Bu dökümandaki örnek uygulamaya

http://primefaces.prime.com.tr/docs/ToplantiOrganizatoru.zip ,

Bu döküman hakkında bana ulaşmak için

yigitdarcin@prime.com.tr adreslerini kullanabilirsiniz.