Yusuf SEZER

Java JSF Nedir? Kurulumu ve Kullanımı

Paylaş
Facebook
Linkedin
X

Java ile hızlı web uygulamaları geliştirmek için kullanılan JSF nedir, JSF kurulumu ve kullanımı ile ilgili bilgiler yer alıyor.

JSF nedir?

JSF veya Jakarta Server Faces (Java Server Faces) sunucu taraflı olaya dayalı, bileşen tabanlı web uygulamaları geliştirmek için kullanılan Jakarta/Java EE kütüphanesidir.

Kütüphanede yer alan bileşenlere ait özellikler kullanılarak sunucuda yer alan veri ve olay arasında bağlantı kurularak işlem yapılır.

Örnek olarak kullanıcı veri giriş yaptıktan sonra sayfa içerisinde yer alan butona basarak veri girişinin doğrulanması, verinin kayıt edilmesi işlemi verilebilir.

JSF kurulumu

Servlet tabanlı web projesine JSF implementasyonuna ait jar dosyasının eklenmesi ile kullanılabilir.

JSF 2.3 ile birlikte bağımlılık yöneticisi için CDI kullanıldığından GlassFish, Tomcat EE, Oracle Weblogic gibi uygulama sunucularının kullanımı faydalı olacaktır.

JSF nasıl çalışır

JSF bir çok web uygulamasında kullanılan ve MVC yani Model View Controller mimarisini kullanır.

Öncelikle Java EE, Servlet ve JSP yazılarıma bakmanda fayda var.

Controller

Gelen istekler Controller katmanında yer alan ve Servlet arayüzünü uygulayan-implement eden jakarta.faces.webapp.FacesServlet sınıfı tarafından yönetilir.

<servlet>
  <servlet-name>Faces Servlet</servlet-name>
  <servlet-class>jakarta.faces.webapp.FacesServlet</servlet-class>
  <load-on-startup>1</load-on-startup>
</servlet>

JSF sayfaları genellikle .xhtml ve .jsf uzantısı ile hazırlanır.

JSF sayfalarının işlenmesi için web.xml ayarı ile FacesServlet tarafından yönetileceği belirtilir.

<servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.jsf</url-pattern>
</servlet-mapping>

<servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

Gelen istekler eşleştikten sonra JSF sayfalarının yer aldığı view katmanı derlenerek istemciye gönderilir.

Derleme işlemi JSF yaşam döngüsü olarak adlandırılan adımlar kullanılarak yapılır.

View

View katmanında web sayfalarını oluşturmak için çeşitli JSF bileşenleri-etiketleri kullanılır.

JSF etiketlerini HTML etiketlerinden ayıran en önemli özellik Model katmanında yer alan ve Managed Bean olarak adlandırılan Java komutları ile bağlantı kurmayı sağlamasıdır.

<?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">
    <h:head>
        <title>Merhaba JSF</title>
    </h:head>
    <h:body>
        Merhaba JSF
    </h:body>
</html>

Burada dikkat edilmesi gereken en önemli kısım aşağıdaki gibi etiket tanımlarının JSF sayfasına dahil edilmesidir.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">

Model katmanında yer alan alanlara erişim için JSF Expression Language kullanılır.

<h:form>
    <p>First name: <h:inputText id="firstName" value="#{student.firstName}" /></p>
    <p>Last name: <h:inputText id="lastName" value="#{student.lastName}" /></p>
    <h:commandButton value="Submit" action="#{student.Save}" />
</h:form>

Model katmanındaki değerler FacesServlet tarafından JSF yaşam döngüsü sırasında yerleştirilir.

Model

Verilerin bulunduğu ve veriler üzerinde işlem yapıldığı katmandır.

Bu katmandaki sınıflar bazı kuralları olan sıradan Java sınıflarıdır.

  1. Parametresiz kurucusu olmalıdır.
  2. Serializable arayüzünü uygulamalıdır.
  3. Her bir sınıf özelliğine ait get ve set metodu olmalıdır.
  4. Viw katmanı ile bağlantı için @Named Annotation veya XML ayarları kullanılmalıdır.

Annotation hakkında detaylı bilgi almak için Java Annotations yazıma bakmanda fayda var.

import java.io.Serializable;
import jakarta.inject.Named;
//import jakarta.faces.bean.ManagedBean;

@Named // @ManagedBean
public class Student implements Serializable {

    private String firstName;
    private String lastName;

    public Student() {
    }

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public void Save() {
        System.out.println("Öğrenci kayıt edildi.");
    }

}

NOT: ManagedBean Annotation JSF 2.3 ile deprecated olmuştur – kullanımdan kaldırılmıştır yerine @Named kullanılmaktadır.

NOT2: JSF 2.0 öncesinde ManagedBean için karmaşık XML ayar dosyaları kullanılmaktaydı.

Model katmanındaki verilerin saklandığı alanı belirlemek için çeşitli Annotation değerleri kullanılır.

  1. @Dependent
  2. @ApplicationScoped
  3. @RequestScoped
  4. @SessionScoped
  5. @ConversationScoped
  6. @FlowScoped
  7. @ViewScoped

Veriye tüm istemcilerin erişebilmesi için ApplicationScoped kullanılır.

Bu sayede veriler application alanına kaydedilir böylece tüm istemciler aynı veriye erişim sağlar.

Veriye sadece istek yapıldığında erişim sağlamak için RequestScoped kullanılır.

Veriler istek yapan istemciye ait request alanına kaydedilir böylece sadece istek sırasında veriye erişim sağlanır.

NOT: Herhangi bir değer verilmediğinde varsayılan olarak RequestScoped kullanılır.

NOT2: Kullanılan Annotation değerleri JSF sürümüne göre değişiklik gösterir.

JSF yaşam döngüsü

JSF, Servlet ve JSP gibi yaşam döngüsü olarak adlandırılan aşağıdaki çalışma adımlarını takip eder.

  • Restore View Phase
    • View katmandaki bileşenler oluşturulur.
    • Olaylar ve doğrulama işlemleri bileşenlere bağlanır.
    • İşlemler FacesContext’e kaydedilerek sonraki adıma geçilir.
  • Apply Request Values Phase
    • İstemciden gelen değerler View katmanıdaki bileşenlere aktarılır.
  • Process Validations Phase
    • İstemciden gelen değerler belirlenen kurallara göre doğrulanır.
  • Update Model Values Phase
    • Doğrulama adımında hata ile karşılanırsa Model katmanı güncellenir.
  • Invoke Application Phase
    • Form gönderimi, JSF sayfaları arası geçiş bu adımda çalıştırılır.
  • Render Response Phase
    • Oluşan sonuç istemciye gönderilir.

JSF etiketleri

JSF içerisinde yer alan tüm etiketler-bileşenler UIComponent ve UIComponentBase soyut sınıflarından türetilerek oluşturulur.

<h:commandButton value="Submit" action="#{student.Save}" actionListener="#{student.Save}" />

JSF yukarıdaki etiketi aşağıdaki adımları takip ederek oluşturur.

UIComponent->UIComponentBase->UICommand->HtmlCommandButton

Temel etiketler

JSF sayfalarında kullanılan bazı etiketler şunlardır.

  • h:head
  • h:body
  • h:form
  • h:inputText
  • h:outputText
  • h:commandButton
  • h:inputTextarea
  • h:inputSecret
  • h:inputHidden
  • h:inputFile
  • h:selectBooleanCheckbox
  • h:selectManyCheckbox
  • h:selectOneListbox
  • h:selectManyListbox
  • h:selectOneMenu
  • h:outputFormat
  • h:graphicImage
  • h:outputStylesheet
  • h:outputScript
  • h:Link
  • h:commandLink
  • h:panelGrid
  • h:outputLink
  • h:message
  • h:messages
  • h:dataTable

Etiketlerin örnek kullanımı aşağıdaki gibidir.

<h:form id="myForm" enctype="multipart/form-data">
    <h:messages />
    <p>First name: <h:inputText id="firstName" value="#{firstName}" required="true" /></p>
    <p>Last name: <h:inputText id="lastName" value="#{lastName}" /></p>
    <p>Password: <h:inputSecret id="password" value="#{password}" required="true" /></p>
    <p>Address: <h:inputTextarea id="address" value="#{address}" rows="5" cols="30" /></p>
    <p>Photo: <h:inputFile id="photo" value="#{photo}"/></p>
    <h:commandButton value="Submit" action="result"/>
</h:form>

NOT: JSF etiketlerini HTML etiketlerinden ayıran en önemli özellik Model katmanında yer alan ve Managed Bean olarak adlandırılan Java komutları ile bağlantı kurmayı sağlamasıdır.

Doğrulama etiketleri

Kullanıcı tarafından girilen verilerin doğrulanması için kullanılan JSF etiketleridir.

  • f:validateLength
  • f:validateRequired
  • f:validateDoubleRange
  • f:validateLongRange
  • f:validateBean
  • f:validateRegex
<h:inputText id="firstName" value="#{student.firstName}" required="true" requiredMessage="Zorunludur.">
    <f:validateLength minimum="3" maximum="10" />
</h:inputText>

Bazı doğrulama etiketlerinin çalışması için web.xml dosyasında jakarta.faces.VALIDATE_EMPTY_FIELDS değerinin true olması gerekir.

<context-param>
    <param-name>jakarta.faces.VALIDATE_EMPTY_FIELDS</param-name>
    <param-value>true</param-value>
</context-param>

JSF Model katmanında yer alan ManagedBean sınıflarını doğrulamak için f:validateBean etiketi ile aşağıdaki Annotation kullanımına imkan verir.

  • @NotNull
  • @Null
  • @Size
  • @Digits
  • @DecimalMin
  • @DecimalMax
  • @Max
  • @Min
  • @Pattern
  • @Past
  • @Future
  • @AssertTrue
  • @AssertFalse

JSF ayrıca özel doğrulama etiketi oluşturmayı da sağlar.

Dönüşüm etiketleri

Kullanıcı tarafından girilen verileri Integer, Date gibi Java veri türlerine dönüştürme için kullanılan JSF etiketleridir.

  • f:convertDateTime
  • f:convertNumber
  • f:converter

f:converter etiketi ile kullanılabilecek değerler aşağıdaki gibidir.

BigDecimalConverterjakarta.faces.BigDecimal
BigIntegerConverterjakarta.faces.BigInteger
BooleanConverterjakarta.faces.Boolean
ByteConverterjakarta.faces.Byte
CharacterConverterjakarta.faces.Character
DateTimeConverterjakarta.faces.Datetime
DoubleConverterjakarta.faces.Double
EnumConverterjakarta.faces.Enum
FloatConverterjakarta.faces.Float
IntegerConverterjakarta.faces.Integer
LongConverterjakarta.faces.Long
NumberConverterjakarta.faces.Number
ShortConverterjakarta.faces.Short

Örnek kullanım aşağıdaki gibidir.

<p>Age:
    <h:inputText id="age" value="#{student.age}">
        <f:converter converterId="jakarta.faces.Integer" />
    </h:inputText>
</p>

JSF varsayılan olarak model katmanı (ManagedBean) bağlantısı sırasında dönümüşü yapar.

<p>Date Of Birth:
    <h:inputText id="dateOfBirth" value="#{student.dateOfBirth}">
        <f:convertDateTime type="both" dateStyle="short" locale="tr" timeZone="UTC" />
    </h:inputText>
</p>
<p>Salary:
    <h:outputText id="salary" value="#{1000}">
        <f:convertNumber currencySymbol="$" type="currency" />
    </h:outputText>
</p>

Facelet etiketleri

Web sayfa iskeleti hazırlamak(layout), Özel etiket oluşturmak için facelet etiketleri kullanılır.

  • ui:component
  • ui:composition
  • ui:debug
  • ui:decorate
  • ui:define
  • ui:fragment
  • ui:include
  • ui:insert
  • ui:param
  • ui:repeat
  • ui:remove

Özel etiket oluşturmak için composite etiketleri kullanılır.

  • cc:interface
  • cc:implementation
  • cc:attribute
  • cc:insertChildren
  • cc:valueHolder
  • cc:editableValueHolder
  • cc:actionSource

Sayfa iskeleti oluşturmak

header.xhtml

<ui:composition> 
    <h1>Header</h1>    
</ui:composition>

footer.xhtml

<ui:composition> 
    <h1>Footer</h1>    
</ui:composition>

body.xhtml

<ui:composition> 
    <h1>Body</h1>    
</ui:composition>

layout.xhtml

<h:body>
    <ui:insert name="header">
        <ui:include src="header.xhtml" />
    </ui:insert>

    <ui:insert name="body">
        <ui:include src="body.xhtml" />
    </ui:insert>

    <ui:insert name="footer">
        <ui:include src="footer.xhtml" />
    </ui:insert>
</h:body>

Oluşturulan sayfa iskeletinin/template kullanımı aşağıdaki gibidir.

<h:body>
   <ui:composition template="layout.xhtml" />
</h:body>

Ajax ile çalışmak

JSF kütüphanesinin diğer bir önemli özelliği Ajax teknolojisi ile çalışabilmesidir.

Ajax teknolojisi hakkında bilgi almak  için AJAX yazıma bakmanda fayda var.

Örnek kullanım aşağıdaki gibidir.

<h:form id="myForm">
    <h:messages />
    <p>First name:  <h:inputText id="firstName" value="#{firstName}" required="true" /></p>
    <p>Last name:  <h:inputText id="lastName" value="#{lastName}" /></p>
    <p>Password:  <h:inputSecret id="password" value="#{password}" /></p>
    <p>Address:  <h:inputTextarea id="address" value="#{address}" rows="5" cols="30" /></p>
    <h:commandButton value="Submit">
        <f:ajax event="mouseover" execute="firstName lastName" render="info" />
    </h:commandButton>
</h:form>

<h:panelGroup id="info" layout="span">
    <p>First name:  <h:outputText id="firstName" value="#{firstName}"/></p>
    <p>Last name:  <h:outputText id="lastName" value="#{lastName}" /></p>
    <p>Password:  <h:outputText id="password" value="#{password}"  /></p>
    <p>Address:  <h:outputText id="address" value="#{address}" /></p>
</h:panelGroup>

f:ajax ile işlemin Ajax ile yapılacağı, event özelliği hangi olay ile çalışacağı, execute ile hangi değerlerin çalışacağı, render ile hangi değerin işleneceği bilgisini alır.

Sayfadaki tüm elemanların işlenmesi için @all, sadece bir elemanın işlenmesi için @this, formun işlenmesi için @form gibi değerler execute ve render özelliği ile kullanılır.

Son

JSF, Servlet ve JSP teknolojilerindeki karmaşıklığı azaltmakta ve MVC yapısı sayesinde hızlı geliştirme yapmayı sağlar.

PrimeFaces, RichFaces, MyFaces gibi çeşitli bileşen desteği sunan ek kütüphaneler ile dinamik web uygulamaları geliştirmeyi de sağlar.

Ancak Angular, React ve Vue gibi ön yüz teknolojilerinin REST, GraphQL gibi web servis teknolojilerinin gelişimesiyle birlikte JSF teknolojisinin kullanımı azalmıştır.

Dokümantasyon, kullanım oranını az olması, kullanıcı desteğinin neredeyse olmamasından dolayı JSF yerine diğer teknolojilerin kullanımı faydalı olacaktır.

Java JSF örneğine buradan ulaşabilirsiniz.

JPA ve JSF örneğine buradan ulaşabilirsiniz.

Java Derslerine buradan ulaşabilirsiniz.

Hayırlı günler dilerim.

Facebook
Linkedin
X
WhatsApp
Telegram
E-Posta ile paylaş
Yazdır

Bunlarda ilgini çekebilir

Destek almak için tıklayın.