1. RichFaces
İlknur Kabadayı
HacettepeBilgisayarMühendisliğiYazılım MühendisliğiLab.

2. RichFaces
• RichFaces nedir?
• RichFaces Mimarisi
• RichFaces Kurulumu
• RichFaces Kütüphaneleri
• RichFaces Bileşenleri

3. RichFaces Nedir? Genel Bilgi..
• Java ile web uygulamaları geliştirmenin pek çok
yöntemi vardır.
• Önceleri bu uygulamalar Servlet’ler ile başladı fakat
Servlet’ler kodun içine HTML yazmayı
gerektirdiğinden tutmadı.
• Daha sonra Java dünyası HTML içine Java kodu
gömmeyi başardı ve adına Java Server Pages(JSP) dedi.
• Ama Jsp ile büyük çaplı projeler gerçekleştirilirken bu
teknolojilerde iş mantığı ayrıştırması olmadığı için
yazılan kodların çöplük halini aldığı ve okunabilirliğin
büyük ölçüde azaldığı görüldü.

4. • Bu aşamadan sonra web çatıları kullanılmaya
başlandı. Günümüzde kullanılan en popüler web
çatısı Java Server Faces(JSF)tir.
• JSF, MVC(Model-View-Controller) yapısı ile, yazılımı
nesneler, görünümler ve kontrol sınıfları şeklinde
mantıksal olarak böler ve barındırdığı bileşenler
ile proje gerçekleştiriminde birçok kolaylık sağlar.
• Ancak yine de profesyonel bir proje geliştirirken
JSF bileşenleri yetersiz kalmaktadır. İşte bu anda
yardımımıza 3. parti JSF kütüphaneleri
(RichFaces, Icefaces, PrimeFaces) yetismektedir.

5. • RichFaces da Jboss firmasi tarafindan opensource
olarak gelistirilmekte ve ücretsiz dagitilmakta olan
zengin bir bileşen kütüphanesidir.
• RichFaces, JSF’e Ajax yeteneğini (Core Ajax component
kütüphanesi) kazandırarak, bizleri karmaşık scriptler
yazmaktan kurtarır. JSF’teki HTML bileşenler de dahil
olmak üzere her türlü bileşene kolayca AJAX desteği
verilebilir.
• RichFaces UI componenti ise RichFaces’a özel daha
estetik bir arayüz hazırlamaya imkan sunar.

6. RichFaces Mimarisi
• Ajax Filteresi: Filtre sayesinde birden fazla requesti
ele alabilmeyi sağlar. Geliştirici filtreyi web.xml içine
richfaces’in olanaklarından faydalanabilmek için
yerleştirmelidir.
• Ajax Action Bileşenleri:
AjaxCommandButton, AjaxCommandLink, AjaxPoll
and AjaxSupport ve diğer action bileşenleri ile istemci
tarafından ajax requestleri göndermek için kullanılır.

7. • Ajax Konteyner: JSF sayfalarının tutulduğu ve ajax
requestleri boyunca kodlandığı bir arayüzdür.
AjaxViewRoot ve AjaxRegion bu arayüzün
gerçekleştirimleridir.
• JavaScript Motoru: Rich faces Java Script motoru
istemci tarafında çalışır. Ajax responselarına göre jsf
sayfasında farklı alanları günler. Java Script motoru bir
api sağladığından programcının javascript kodu
yazmasına ve bunun fonksiyonelliğini sağlamasına
gerek yoktur.

8. RichFaces Kurulumu
• RichFaces’ın sisteme kurulması birkaç jarın eklenmesi
kadar basit bir işlemdir.
• WebContent/WEB-INF/lib klasörü altına aşağıdaki jarları
eklemeniz yeterlidir.
• richfaces-core-api.jar
• richfaces-core-impl.jar
• richfaces-components-api.jar
• richfaces-components-ui.jar
• RichFaces4 ile birlikte web.xml de herhangi bir değişiklik
yapmanıza gerek yoktur.

9. • Maven tabanlı projelerde kurulumu gerçekleştirdikten
sonra aşağıdaki kod bloğu pom.xml dosyasına
eklenmelidir.
<dependencyManagement><dependencies><dependency><groupId>org.rich
faces</groupId><artifactId>richfaces-
bom</artifactId><version>${richfaces.version}</version><scope>imp
ort</scope><type>pom</type></dependency></dependencies></dependen
cyManagement>
…
<dependency><groupId>org.richfaces.ui</groupId><artifactId>richfa
ces-components-
ui</artifactId></dependency><dependency><groupId>org.richfaces.co
re</groupId><artifactId>richfaces-core-impl</artifactId>

10. • RichFaces kütüphanelerini JSF sayfalarında
kullanabilmek için son olarak JSF sayfalarına aşağıdaki
linkler eklenmelidir.
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"

11. RichFaces Kütüphaneleri
• a4j: Temel ajax bileşenlerini destekler. <a4j:xxx >
etiketi ile kullanılır
• rich: Bağımsız, zengin kullanıcı arayüzlü bileşenleri
destekler <rich:xxx> etiketi ile kullanılır.

12. RichFaces Bileşenleri
• RichFaces bileşenlerini aşağıdaki başlıklarla
genelleştirebiliriz:
• Ajax Action • Trees
• Ajax Queue • Output/Panels
• Menus
• Ajax Output/Containers
• Inputs and Selects
• Validation • Drag and Drop
• Data Iteration • Miscellaneous

13. Ajax Action Bileşenleri
• AJAX: İstemci taraflı dinamik sayfalar oluşturulup, sayfa
bütünüyle yenilenmeden yalnızca belli bir parçasının
yenilenebilmesine olanak sağlayan teknolojiler bütünü.
• RichFaces’ın Ajax desteği a4j:xxxx etiketleriyle sağlanır
• a4j:ajax
• a4j:commandButton
• a4j:commandLink
• a4j:jsFunction
• a4j:poll
• a4j:param

14. a4j:ajax
<h:form>
<h:inputText value="#{userBean.name}">
<a4j:ajax event="keyup" render="out" />
</h:inputText>
<br />
<h:outputText value="#{userBean.name}" id="out" />
</h:form>
• render : Hedef bileşenin ID’si
• event : Ne zaman render edilecek?
Belirtilen event her gerçekleştiğinde hedef bileşenin
değeri güncellenir.  userBean.getName() çağrılır

15. a4j:ajax (devamı)

16. a4j:commandButton
<h:form>
<h:panelGrid columns="3">
<h:outputText value="Name:" />
<h:inputText value="#{userBean.name}" />
<a4j:commandButton value="Selam ver" render="out"
execute="@form" />
</h:panelGrid>
</h:form>
<br />
<a4j:outputPanel id="out">
<h:outputText value="Merhaba #{userBean.name} !"
rendered="#{not empty userBean.name}"
styleClass="outhello" />
</a4j:outputPanel>

17. • Standart h:commandButton ile a4j:ajax bileşenini birleştirir.
• rendered="#{not empty userBean.name}" text
alanı boş olduğunda Merhaba yazmamak için eklenmiştir.

18. Alax Queue Bileşenleri
• a4j: attachQueue

19. Validation
• Sunucu tarafına gitmeden istemci tarafında girdiler
için beklenen biçimsel kısıtların sağlanıp
sağlanmamasını kontrol eder.
• E-mail’in geçerli biçimde olup olmadığı
• En az x en fazla y tane karakter girilebilir
• Sayı girmelisiniz
• Girilen sayı x ile y arasında olmalıdır
• Girilen şifreler uyuşmuyor

20. Client Side Validation
<h:panelGrid columns="3">
<h:outputText value="Name:" />
<h:inputText value="#{userBean.name}" id="name"
validatorMessage="En az 3, en fazla 8 karakter girebilirsiniz!">
<f:validateLength minimum="3" maximum="8" />
<f:validateRequired />
<rich:validator />
</h:inputText>
<rich:message for="name" />
<h:outputText value="Email" />
<h:inputText value="#{userBean.email}" id="email"
validatorMessage="Geçersiz email adresi">
<f:validateRegex
pattern="^(([a-zA-Z0-9_-.]+)@([a-zA-Z0-9_-.]+).([a-zA-
Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_-.]+)@([a-zA-Z0-9_-.]+).([a-zA-
Z]{2,5}){1,25})+)*$"></f:validateRegex>
<rich:validator />
</h:inputText>
<rich:message for="email" />
<h:outputText value="Age" />
<h:inputText value="#{userBean.age}" id="age"
validatorMessage="Yaş aralığı 18le 99 arasında olmalı!">
<f:validateLongRange minimum="18" maximum="99" />
<rich:validator />
</h:inputText>
<rich:message for="age" />
</h:panelGrid>

21. • Bir inputbox dan diğerine geçildiğine request
tetiklenmektedir.
• Yukarıdaki şekilde görüldüğü gibi server tarafına gitmeye
hiç gerek kalmadan gerekli kontroller yapılabilmektedir.
• İstenilen input için bütün kısıtlar istemci tarafında
konulabilir ve bunu yapmak için sadece <rich:validator/>
etiketini kullanmak yeterli olacaktır.

22. rich:graphValidator
• Bu bileşen nesnelerin geçerlemesini yapmak için
kullanılmaktadır.

23. • Burada girilen parolalar managed bean’e gönderilmektedir
ancak sayfa tekrar render edilmemektedir. Girilen şifrelerin
eşleştirilmesi managed bean’de yapılmaktadır.

24. ManagedBean:

25. Data Iteration Bileşenleri
• rich: extendedDataTable

26. Tablonun Başlığı:
<rich:extendedDataTable value="#{carsBean.allInventoryItems}"
var="car" id="table" frozenColumns="2"
style="height:300px; width:500px;"
selectionMode="none">
<f:facet name="header">
<h:outputText value="Cars marketplace"/>
</f:facet>

27. Gövdesi:
<rich:column>
<f:facet name="header">
<h:outputText value="vendor" />
</f:facet>
<h:outputText value="#{car.vendor}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Model" />
</f:facet>
<h:outputText value="#{car.model}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Price" />
</f:facet>
<h:outputText value="#{car.price}" />
</rich:column>

28. <rich:column>
<f:facet name="header">
<h:outputText value="Mileage" />
</f:facet>
<h:outputText value="#{car.mileage}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="VIN Code" />
</f:facet>
<h:outputText value="#{car.vin}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Items stock" />
</f:facet>
<h:outputText value="#{car.stock}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Days Live" />
</f:facet>
<h:outputText value="#{car.daysLive}" />
</rich:column>
</rich:extendedDataTable>

29. Data Table Sorting
Kolonları sırlamayı sağlar. Aşağıdaki resimde Sort by Capital
Name linkine tıklanıldığında sıralama gerçekleşecektir.

31. Data Table Edit
• Verinin tablo üstünde Ajax desteğiyle düzenlenmesini sağlar.

32. • Yukarıda ki şekilde kırmızı ile işaretlenen alana tıklanıldığında
aşağıdaki şekilde görüldüğü gibi delete butonu çıkar, onay
beklenir ve onaylanırsa silinir.

33. • Update için ise x butonunun yanıdaki update butonuna
basılır ve aşağıda bilgilerin günleneceği alan çıkar. Bilgiler
buradan günlenebilir.

34. Tree
rich:tree
• Webde Ağaç görünümü sağlar
• Ağaç düğümleri üstünde seçilebilme olanağı sağlar
• Esnek görünüm ve hissediş sağlar
• Herhangi bir düğüm seçilmeden önce:

35. • Ağaçta açılmış durumdaki düğüm seçildikten sonra :

36. • rich:treeModelRecursiveAdaptor: Burada recursive olarak
hiyerarşik model gösterilir.
• rich:tree ve rich:treeNode bileşenleri kullanılır.

37. Output/Panels
• Toggle Panel : içeriği değiştirilebilir ajax destekli bir
paneldir. Bu panel daha da zenginleştirilerek içerisine next,
prev gibi konum bilgileri konulabilir.

38. • Aşağıda 3 aşamalı geliştirilmiş toogle paneli incelersek:

39. • Görüldüğü gibi tek bir panel üzerinden durum bilgisini de
saklayarak bu işlemleri ajax desteğiyle hızlı ve estetik bir
şekilde gerçekleştirdik.

40. Drag and Drop
Şekilde görüldüğü gibi kaynak listesinden ilgili alana aktarma
sürükle bırak ile yapılabilmektedir. Uygun eşleşme yeşil ile
onaylanmıştır.

41. Referanslar
• http://refcardz.dzone.com/user/register?t=1307359226
• http://www.jboss.org/richfaces/docs
• http://richfaces-showcase.appspot.com/richfaces/ccomponent-
sample.jsf?demo=clientValidation&skin=blueSky
• http://docs.jboss.org/richfaces/latest_4_0_X/vdldoc/
• http://www.bilisimdergi.com/RichFacesin-Web-
Uygulamalarina-Getirdikleri-3-6.html
• http://en.wikipedia.org/wiki/RichFaces
• http://www.jboss.org/richfaces