Bu yazımla beraber uzun bir aradan sonra JSF ve Primefaces bileşenlerini öğrenmeye başlayacağız. Öncelikle bu uzun aradan dolayı özür dilerim. Üniversitelerin açılması, eğitim planı değişikliği, ders seçimi derken kaldı. Bir üstüne bir proje alınca yazımı ihmal ettim ama telafi edeceğiz 🙂 Bu yazımda size outputlabel inputlabel password growl gibi bir takım basit bileşenleri göstereceğim. Öncelikle arkadaşlar yazacağımız koda bakalım.

<?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:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>BlogDeneme</title>
    </h:head>
    <h:body>
        <h:form>
            <h:outputLabel value="JSF HTML PANEL" />
            <h:panelGrid columns="2">
                <h:outputLabel value="Kullanıcı Adı" />
                <h:inputText value="#{loginBilesen.name}" required="true" />
                <h:outputLabel value="Şifre" />
                <h:inputSecret value="#{loginBilesen.password}" required="true" maxlength="6" />
            </h:panelGrid>

            <h:commandButton value="Tıkla" actionListener="#{loginBilesen.buttonAction()}" id="but" /> <br />
            <h:outputText value="#{loginBilesen.returnValue}" style="size: 35px;"/>
        </h:form>

        <h:form>
            <p:panel closable="true" header="JSF PRIMEFACES PANEL" footer="Footer Text" >
                <p:growl id="growls" showDetail="true" life="6000" />
                <p:panelGrid columns="2">
                    <p:outputLabel value="Kullanıcı Adı" />
                    <p:inputText value="#{loginBilesen.primefacesName}" />
                    <p:outputLabel value="Şifre" />
                    <p:password feedback="true" value="#{loginBilesen.primefacesPassword}" required="true" requiredMessage="Şifreyi Yazın" />
                </p:panelGrid>
                <p:commandButton value="Tıkla" action="#{loginBilesen.growlMessage()}" ajax="true" update="growls" />
            </p:panel>
        </h:form>
    </h:body>
</html>

Arkadaşlar görüldüğü gibi body içerisinde 2 tane form alanımız var. Üstteki form alanı JSF’in kendi html etiketleriyle, alttaki form alanı ise Primefaces’in etiketleriyle oluşturulmuş basit bir kullanıcı adı ve şifre isteyen giriş formudur. Şimdi ilk göze çarpan noktaları inceleyelim. En üstte gördüğümüz xmlns JSF namespace olarak geçer. Gerekli etiketlere ordaki başlık altından erişilir. Mesela “xmlns:h=”http://xmlns.jcp.org/jsf/html”” namespace ile html etiketlerine “h:” olarak erişilebilir. Kısaca Import edilen bir sınıf gibi düşünebilirsiniz.
Bir de “#{}” yapısı var. Arkadaşlar bu yapı JSF de Expression Language olarak geçmektedir. Kullanacağımız Java sınıflarını bu yapı içerisinde yazarız. Böylece sınıf içindeki değişken ve metotları kullanabiliriz.
Şimdi kullandığımız bileşenlerimizi inceleyelim :

JSF HTML Etiketleri
h:outputLabel : Bu bileşen ile ekrana “value” içindeki değeri yazarız.
h:inputText : Bu bileşen adı üzerinde giriş bileşenidir. Bu bileşen üzerine yazılan değer “value” içindeki değişkene kaydedilir.
h:inputSecret : Bu bileşen şifre gibi gizlilik gerektiren girişlerde kullanılır.
h:commandButton : Bu buton bir olayı(action) gerçekleştirmek için kullanılır. Gerçekleştirilecek fonksiyon actionListener ya da action içinde tanımlanır.

Primefaces Etiketleri
p:panel : Bu bileşen size bir panel açar. Yani içinde çoklu bileşen kullanabileceğiniz bir bileşen.
p:growl : Bu bileşeni “System.out.println();” gibi düşünebilirsiniz 🙂 Kullanıcıyı bilgilendirmeye yönelik bir bilgi kutucuğudur.
p:panelGrid : Bu bileşen ile paneli belli sütunlara ayırıp işlem görebilirsiniz. Biz sol tarafta label sağ tarafta ise input bileşenler olacak şekilde 2 sütuna ayırdık.
p:outputLabel : Bu bileşen ile ekrana “value” içindeki değeri yazarız.
p:inputText : Bu bileşen üzerine yazılan değeri “value” içindeki değişkene kaydeder.
p:password : Bu bileşen şifre gibi gizlilik gerektiren girişlerde kullanılır. h:inputSecret bileşenine nazaran daha gelişmiştir. Mesela “feedback” true değeri aldığında size şifrenizin zorluğu hakkında geri bildirim gösterir.
p:commandButton : Bu buton ile bir olay tetiklenir. Bu butonda h:commandButton bileşenine göre çok gelişmiştir ki en göze batar yani ajax kullanımıdır. Primefaces ajax desteği ile bir çok konuda büyük kolaylıklar sağlamaktadır. “update” içine ajax ile tetiklenecek bileşenin id’si yazılır.

Evet arkadaşlar xhtml kodumuzu inceledik Şimdi Java kodumuzu inceleyelim.

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package com.kodumundunyasi.blogdeneme.loginbileseni;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;

/**
 *
 * @author tommy94
 */
@ManagedBean(name = "loginBilesen")
@RequestScoped
public class LoginBileseniBean {

    private String name;
    private String password;
    private String returnValue;

    private String primefacesName;
    private String primefacesPassword;
    private String returnPrimefaces;

    public LoginBileseniBean() {
    }

    public String getName() {
        return name;
    }

    public String getPassword() {
        return password;
    }

    public void setName(String name) {
        this.name = name;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public void buttonAction() {
        returnValue = name + " " + password;
    }

    public String getReturnValue() {
        return returnValue;
    }

    public void setReturnValue(String returnValue) {
        this.returnValue = returnValue;
    }

    public String getPrimefacesName() {
        return primefacesName;
    }

    public String getPrimefacesPassword() {
        return primefacesPassword;
    }

    public String getReturnPrimefaces() {
        return returnPrimefaces;
    }

    public void setPrimefacesName(String primefacesName) {
        this.primefacesName = primefacesName;
    }

    public void setPrimefacesPassword(String primefacesPassword) {
        this.primefacesPassword = primefacesPassword;
    }

    public void setReturnPrimefaces(String returnPrimefaces) {
        this.returnPrimefaces = returnPrimefaces;
    }

    public void growlMessage() {
        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Merhaba", primefacesName.toUpperCase() +
                " " + primefacesPassword));
    }
}

Arkadaşlar Java kodumuzu incelediğimizde ilk göze çarpan Annotation’lar. xhtml kodları bean üzerinde çalışır. Yani bir Java sınıfını xhtml ile bağdaştıracaksanız o Java kodunu bir bean yapmanız gerekir. Bu da @ManagedBean annotation’u ile olur. Bu annotation ile sınıfımız artık bir bean olur. “name” ise bu bean’in xhtml üzerindeki adını temsil eder. Scope’u başka yazımda detaylı anlatacağım o yüzden şimdilik böyle yazın sizde. Kolay anlaşılsın diye JSF html etiketlerden ve Primefaces etiketlerden gelecek değerleri farklı değişkenlerde belirttim. Ve get-set metodlarını yazdım. Burada growlMessage() metoduna dikkat etmenizi istiyorum. p:commandButton bu metonu actionListener olarak kullanıyordu. Peki bu metot ne yapıyor ? Bu metot growl bileşenini tetikliyor.(ve growl gibi bileşenleri) Kodu şöyle düşünebilirsiniz FacesContext.getCurrentInstance() ile sayfa Javaya indirgeniyor ve addMessage() ile de sayfaya gözükecek olan mesaj yazılıyor. JSF üzerinde gösterilecek mesajı tanımlamak için FacesMessage sınıfı kullanılır. Bu sınıf ile kullanıcıyı yaptığı işlem sonrası bilgilendirebilirsiniz. Mesela login olan bir kullanıcıya “Hoşgeldiniz” diyip sıcak bir karşılama yapabilirsiniz 🙂

Şimdi ise bileşenlerin nasıl göründüğüne bakalım.

HTML FORM
html form login

PRIMEFACES FORM
primefaces login panel

PRIEMFACES GROWL
primefaces growl

Arkadaşlar gördüğünüz gibi Primefaces normal HTML etiketlere nazaran gözle görülür bir fark yaratmaktadır. Evet arkadaşlar bir daha ki yazımda görüşmek üzere esenlikle kalın 🙂