PrimeFaces-Carousel Kullanımı

Merhabalar arkadaşlar. Bu yazımıda PrimeFaces’ın bir başka kategorisi olan Data kategorisindeki bileşenleri öğrenmeye başlayacağız. İlk öğreneceğimiz bileşen de Carousel bileşeni.

Dersimize başlamadan önce söylemek istediğim bir şey var arkadaşlar. PrimeFaces yazılarını giriş yazısında sıralı bir liste haline getirdim. O yazıya buradan ulaşabilirsiniz. Tüm yazılara oradan ulaşabilirsiniz. Şimdi konumuza geçelim.

Carousel kullanıcıya vermek istediğimiz bilgileri bir slayt şeklinde vermemiz sağlayan bir bileşen arkadaşlar. Responsive , Custom ve Tab şeklinde 3 kullanım türü mevcut. Fakat Responsive için primefaces.org’da örnek olmasına rağmen şu anda indirilebilir durumdaki Jar içindeki Carousel’de responsive yapısı yok. Bu yüzden biz Custom ve Tab kullanımlarını göreceğiz. Şimdi örnek kodumuz üstünde nasıl kullanıldığını inceleyelim.

index.xhtml Kodu

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>PrimeFaces Carousel Kullanımı</title>
    </h:head>
    <h:body>
        <h:form>
            <p:carousel headerText="Custom" value="#{carouselBean.liste}" var="yaz" 
                        numVisible="1" easing="easeOutBounce" style="width:250px" circular="true">
                <h:panelGrid columns="2">
                    <f:facet name="header">
                        <p:graphicImage name="#{yaz.resimAdi}" library="images"/>
                    </f:facet>
                    
                    <h:outputText value="İsim:"/>
                    <h:outputText value="#{yaz.isim}"/>
                    
                    <h:outputText value="Açıklama"/>
                    <h:outputText value="#{yaz.aciklama}"/>
                    
                    <f:facet name="footer">
                        <p:commandButton update=":#{p:component('infoDetail')}" oncomplete="PF('infoDialog').show()" icon="ui-icon-search">
                            <f:setPropertyActionListener value="#{yaz}" target="#{carouselBean.secilenOge}" />
                        </p:commandButton>
                    </f:facet>
                </h:panelGrid>
             </p:carousel>
            
            <br/>
            <br/>
            
            <p:carousel headerText="Tab" numVisible="1" effect="easeInStrong" headerText="Tabs">
                <p:tab title="JSP">
                    <h:panelGrid columns="2" cellpadding="10">
                        <p:graphicImage name="jsp.png" library="images"/>
                        <h:outputText value="Java'nın Temel Web Teknolojisi"/>
                    </h:panelGrid>
                </p:tab>
                <p:tab title="JSF">
                    <h:panelGrid columns="2" cellpadding="12">
                        <p:graphicImage name="jsf.png" library="images"/>
                        <h:outputText value="Java'nın Standart Web Çatısı"/>
                    </h:panelGrid>
                </p:tab>
                <p:tab title="Swift">
                    <h:panelGrid columns="2" cellpadding="7">
                        <p:graphicImage name="swift.jpg" library="images"/>
                        <h:outputText value="iOS'un Yeni Nesil Programlama Dili"/>
                    </h:panelGrid>
                </p:tab>
            </p:carousel>
            
            
            <p:dialog header="Detay" widgetVar="infoDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
                <p:outputPanel id="infoDetail" style="text-align:center;">
                    <p:panelGrid  columns="2" rendered="#{not empty carouselBean.secilenOge}" columnClasses="label,value">
                        <f:facet name="header">
                            <p:graphicImage name="#{carouselBean.secilenOge.resimAdi}" library="images"/> 
                        </f:facet>
                        
                        <h:outputText value="İsim:"/>
                        <h:outputText value="#{carouselBean.secilenOge.isim}"/>
                        
                        <h:outputText value="Açıklama:"/>
                        <h:outputText value="#{carouselBean.secilenOge.aciklama}"/>
                        
                    </p:panelGrid>
                </p:outputPanel>
            </p:dialog>
        </h:form>
    </h:body>
</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:p="http://primefaces.org/ui"

xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>

<title>PrimeFaces Carousel Kullanımı</title>

</h:head>

<h:body>

<h:form>

<p:carousel headerText="Custom" value="#{carouselBean.liste}" var="yaz"

numVisible="1" easing="easeOutBounce" style="width:250px" circular="true">

<h:panelGrid columns="2">

<f:facet name="header">

<p:graphicImage name="#{yaz.resimAdi}" library="images"/>

</f:facet>

<h:outputText value="İsim:"/>

<h:outputText value="#{yaz.isim}"/>

<h:outputText value="Açıklama"/>

<h:outputText value="#{yaz.aciklama}"/>

<f:facet name="footer">

<p:commandButton update=":#{p:component('infoDetail')}" oncomplete="PF('infoDialog').show()" icon="ui-icon-search">

<f:setPropertyActionListener value="#{yaz}" target="#{carouselBean.secilenOge}" />

</p:commandButton>

</f:facet>

</h:panelGrid>

</p:carousel>

<br/>

<p:carousel headerText="Tab" numVisible="1" effect="easeInStrong" headerText="Tabs">

<p:tab title="JSP">

<h:panelGrid columns="2" cellpadding="10">

<p:graphicImage name="jsp.png" library="images"/>

<h:outputText value="Java'nın Temel Web Teknolojisi"/>

</h:panelGrid>

</p:tab>

<p:tab title="JSF">

<h:panelGrid columns="2" cellpadding="12">

<p:graphicImage name="jsf.png" library="images"/>

<h:outputText value="Java'nın Standart Web Çatısı"/>

</h:panelGrid>

</p:tab>

<p:tab title="Swift">

<h:panelGrid columns="2" cellpadding="7">

<p:graphicImage name="swift.jpg" library="images"/>

<h:outputText value="iOS'un Yeni Nesil Programlama Dili"/>

</h:panelGrid>

</p:tab>

</p:carousel>

<p:dialog header="Detay" widgetVar="infoDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">

<p:outputPanel id="infoDetail" style="text-align:center;">

<p:panelGrid columns="2" rendered="#{not empty carouselBean.secilenOge}" columnClasses="label,value">

<f:facet name="header">

<p:graphicImage name="#{carouselBean.secilenOge.resimAdi}" library="images"/>

</f:facet>

<h:outputText value="İsim:"/>

<h:outputText value="#{carouselBean.secilenOge.isim}"/>

<h:outputText value="Açıklama:"/>

<h:outputText value="#{carouselBean.secilenOge.aciklama}"/>

</p:panelGrid>

</p:outputPanel>

</p:dialog>

</h:form>

</h:body>

</html>

index kodumuz içinde 3 kısım var arkadaşlar. 2 adet carousel ve bir dialog bileşeni kullandık. Adım adım kullandığımız özellikleri açıklıyayım:

headerText ile carousel’in başlığını tanımlıyoruz.
value ile bean içinde doldurulmuş listeyi view tarafına geçiriyoruz. Yani ekranda carousel’in içinde nelerin görünmeisni istediğimzi tanımlıyoruz.
var ile gelen liste içindeki her bir öğeyi tutabiliyoruz.
numVisible ile listeden gelen öğelerin bir slayt halinde gösteriyoruz. numVisible özelliğine bunu yapmak için 1 atamamız gerekiyor.
easing özelliği öğeler arasında geçiş yaparken efekt kullanmak için tasarlanmış.
circular özelliği de liste bittiğinde başa dönebilmek için kullanılıyor.
İlk carousel’in footer kısmında bir detaylı görüntüleme butonu mevut. Bu buton her bir öğe için Ajax altyapısını kullanarak tıklandığında açılacak pencereyi güncelliyor. Butonun Update özelliğini güncellemek istediğimiz bileşenin id’si ile kullanıyoruz. Tıklandığında yeni pencere açılması için oncomplete özelliğini kullanıyorız ve dialog bileşininin widgetwar özelliğine atadığımız stringi veriyoruz. Bu sırada f:setPropertyActionListener etiketini kullarak bean içindeki değişkene değeri direk gönderiyor.
İkinci carousel’de fark öğeleri listeden almamamız ve tab yardımı ile elle oluşturmamız.
Dialog bileşenini de p:dialog etiketi ile kullanıyoruz ve içine ekranda görünecek bileşen ve ifadeleri yazıyoruz. Bu bileşen aynı zamanda her bir öğe için güncellenecek bileşendir.

CarouselBean.java Kodu

import java.util.ArrayList;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import java.util.List;
import javax.annotation.PostConstruct;
@ManagedBean
@RequestScoped
public class CarouselBean {
    public CarouselBean()
    {
        
    }
    public CarouselBean(String isim,String aciklama,String resimAdi)
    {
        this.isim=isim;
        this.aciklama=aciklama;
        this.resimAdi=resimAdi;
    }
    
    String isim;
    String aciklama;
    String resimAdi;
    List<CarouselBean> liste;
    
    CarouselBean secilenOge;
    
    @PostConstruct
    public void init()
    {
        liste=new ArrayList<>();
        CarouselBean android=new CarouselBean("Android", "Java Tabanlı Mobil OS", "android.png");
        CarouselBean java=new CarouselBean("Java", "Çok Kapsamlı Ve Güçlü Bir Dil", "java.jpg");
        CarouselBean jpa=new CarouselBean("JPA", "Java'nın Standart ORM Çatısı", "jpa.png");
        CarouselBean jsp=new CarouselBean("JSP", "Java'nın Temel Web Teknolojisi", "jsp.png");
        CarouselBean jsf=new CarouselBean("JSF", "Java'nın Standart Web Çatısı", "jsf.png");
        CarouselBean swift=new CarouselBean("Swift", "iOS'un Yeni Nesil Programlama Dili", "swift.jpg");
        liste.add(android);
        liste.add(java);
        liste.add(jsp);
        liste.add(jsf);
        liste.add(swift);
    }

    public String getIsim() {
        return isim;
    }

    public void setIsim(String isim) {
        this.isim = isim;
    }

    public String getAciklama() {
        return aciklama;
    }

    public void setAciklama(String aciklama) {
        this.aciklama = aciklama;
    }

    public List<CarouselBean> getListe() {
        return liste;
    }

    public void setListe(List<CarouselBean> liste) {
        this.liste = liste;
    }

    public String getResimAdi() {
        return resimAdi;
    }

    public void setResimAdi(String resimAdi) {
        this.resimAdi = resimAdi;
    }

    public CarouselBean getSecilenOge() {
        return secilenOge;
    }

    public void setSecilenOge(CarouselBean secilenOge) {
        this.secilenOge = secilenOge;
    }
    
}

import java.util.ArrayList;

import javax.faces.bean.ManagedBean;

import javax.faces.bean.RequestScoped;

import java.util.List;

import javax.annotation.PostConstruct;

@ManagedBean

@RequestScoped

public class CarouselBean {

public CarouselBean()

{

}

public CarouselBean(String isim,String aciklama,String resimAdi)

{

this.isim=isim;

this.aciklama=aciklama;

this.resimAdi=resimAdi;

}

String isim;

String aciklama;

String resimAdi;

List<CarouselBean> liste;

CarouselBean secilenOge;

@PostConstruct

public void init()

{

liste=new ArrayList<>();

CarouselBean android=new CarouselBean("Android", "Java Tabanlı Mobil OS", "android.png");

CarouselBean java=new CarouselBean("Java", "Çok Kapsamlı Ve Güçlü Bir Dil", "java.jpg");

CarouselBean jpa=new CarouselBean("JPA", "Java'nın Standart ORM Çatısı", "jpa.png");

CarouselBean jsp=new CarouselBean("JSP", "Java'nın Temel Web Teknolojisi", "jsp.png");

CarouselBean jsf=new CarouselBean("JSF", "Java'nın Standart Web Çatısı", "jsf.png");

CarouselBean swift=new CarouselBean("Swift", "iOS'un Yeni Nesil Programlama Dili", "swift.jpg");

liste.add(android);

liste.add(java);

liste.add(jsp);

liste.add(jsf);

liste.add(swift);

}

public String getIsim() {

return isim;

}

public void setIsim(String isim) {

this.isim = isim;

}

public String getAciklama() {

return aciklama;

}

public void setAciklama(String aciklama) {

this.aciklama = aciklama;

}

public List<CarouselBean> getListe() {

return liste;

}

public void setListe(List<CarouselBean> liste) {

this.liste = liste;

}

public String getResimAdi() {

return resimAdi;

}

public void setResimAdi(String resimAdi) {

this.resimAdi = resimAdi;

}

public CarouselBean getSecilenOge() {

return secilenOge;

}

public void setSecilenOge(CarouselBean secilenOge) {

this.secilenOge = secilenOge;

}

Managed Bean sınıfımız içinde temel Java bilgilerinizle anlayabilceğiniz ifadeler mevcuttur. @PostConstruct notasyonunu da daha önce değinmiştik.

Ekran Çıktıları

Alttaki resimde Custom isimli carousel’imizin ekran çıktısını görüyorsunuz. Sağ üstteki numaralı liste ya da sağ-sol okları ile gezinebilirsiniz.

Öğeler arasında geçişi sağ-sol okları ile yapmanız durumunda sayı otomatik güncellenir.

Sol attaki detay butonuna tıkladığımda öğe hakkında daha detaylı bilgi edinebileceğim pencere açılıyor.

Tab kullanımında da benzer bir çıktı elde ederiz.

Bu yazıda da bu kadar arkadaşlar. Gelecek yazıda görüşmek üzere sağlıcakla kalın.

admin

Benzer Yazılar