Richfaces

1,119 views
1,036 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,119
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
44
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Richfaces

  1. 1. RichFacesİlknur KabadayıHacettepeBilgisayarMühendisliğiYazılım MühendisliğiLab.
  2. 2. RichFaces• RichFaces nedir?• RichFaces Mimarisi• RichFaces Kurulumu• RichFaces Kütüphaneleri• RichFaces Bileşenleri
  3. 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. 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. 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. 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. 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. 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. 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.richfaces</groupId><artifactId>richfaces-bom</artifactId><version>${richfaces.version}</version><scope>import</scope><type>pom</type></dependency></dependencies></dependencyManagement>…<dependency><groupId>org.richfaces.ui</groupId><artifactId>richfaces-components-ui</artifactId></dependency><dependency><groupId>org.richfaces.core</groupId><artifactId>richfaces-core-impl</artifactId>
  10. 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. 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. 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. 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. 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şenindeğeri güncellenir.  userBean.getName() çağrılır
  15. 15. a4j:ajax (devamı)
  16. 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. 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. 18. Alax Queue Bileşenleri• a4j: attachQueue
  19. 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. 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. 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. 22. rich:graphValidator• Bu bileşen nesnelerin geçerlemesini yapmak için kullanılmaktadır.
  23. 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. 24. ManagedBean:
  25. 25. Data Iteration Bileşenleri• rich: extendedDataTable
  26. 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. 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. 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. 29. Data Table SortingKolonları sırlamayı sağlar. Aşağıdaki resimde Sort by CapitalName linkine tıklanıldığında sıralama gerçekleşecektir.
  30. 30. Data Table Edit• Verinin tablo üstünde Ajax desteğiyle düzenlenmesini sağlar.
  31. 31. • 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.
  32. 32. • 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.
  33. 33. Treerich: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:
  34. 34. • Ağaçta açılmış durumdaki düğüm seçildikten sonra :
  35. 35. • rich:treeModelRecursiveAdaptor: Burada recursive olarak hiyerarşik model gösterilir.• rich:tree ve rich:treeNode bileşenleri kullanılır.
  36. 36. 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.
  37. 37. • Aşağıda 3 aşamalı geliştirilmiş toogle paneli incelersek:
  38. 38. • 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.
  39. 39. Drag and DropŞekilde görüldüğü gibi kaynak listesinden ilgili alana aktarmasürükle bırak ile yapılabilmektedir. Uygun eşleşme yeşil ileonaylanmıştır.
  40. 40. 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

×