• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Richfaces
 

Richfaces

on

  • 1,091 views

 

Statistics

Views

Total Views
1,091
Views on SlideShare
1,091
Embed Views
0

Actions

Likes
0
Downloads
42
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Richfaces Richfaces Presentation Transcript

    • RichFacesİlknur KabadayıHacettepeBilgisayarMühendisliğiYazılım MühendisliğiLab.
    • RichFaces• RichFaces nedir?• RichFaces Mimarisi• RichFaces Kurulumu• RichFaces Kütüphaneleri• RichFaces Bileşenleri
    • 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ü.
    • • 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.
    • • 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.
    • 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.
    • • 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.
    • 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.
    • • 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>
    • • 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"
    • 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.
    • 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
    • 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
    • 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
    • a4j:ajax (devamı)
    • 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>
    • • 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.
    • Alax Queue Bileşenleri• a4j: attachQueue
    • 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
    • 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>
    • • 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.
    • rich:graphValidator• Bu bileşen nesnelerin geçerlemesini yapmak için kullanılmaktadır.
    • • Burada girilen parolalar managed bean’e gönderilmektedir ancak sayfa tekrar render edilmemektedir. Girilen şifrelerin eşleştirilmesi managed bean’de yapılmaktadır.
    • ManagedBean:
    • Data Iteration Bileşenleri• rich: extendedDataTable
    • 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>
    • 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>
    • <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>
    • Data Table SortingKolonları sırlamayı sağlar. Aşağıdaki resimde Sort by CapitalName linkine tıklanıldığında sıralama gerçekleşecektir.
    • Data Table Edit• Verinin tablo üstünde Ajax desteğiyle düzenlenmesini sağlar.
    • • 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.
    • • 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.
    • 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:
    • • Ağaçta açılmış durumdaki düğüm seçildikten sonra :
    • • rich:treeModelRecursiveAdaptor: Burada recursive olarak hiyerarşik model gösterilir.• rich:tree ve rich:treeNode bileşenleri kullanılır.
    • 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.
    • • Aşağıda 3 aşamalı geliştirilmiş toogle paneli incelersek:
    • • 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.
    • 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.
    • 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