JSF - Kompozit Bileşenler

JSF, geliştiricilere, özel içerikleri oluşturmak için kullanılabilecek kendi özel bileşenlerini tanımlama konusunda güçlü bir yetenek sağlar.

Özel Bileşeni Tanımlayın

JSF'de özel bir bileşen tanımlamak, iki aşamalı bir işlemdir.

Adım Açıklama
1 A

Kaynaklar klasörü oluşturun.

Kaynaklar klasöründe bileşik bir ad alanına sahip bir xhtml dosyası oluşturun.

1b

Bileşik bileşenin içeriğini tanımlamak için bileşik etiketler bileşik: arabirim, bileşik: öznitelik ve bileşik: uygulama kullanın. Kullanım cc.attrs içinde uygulanması: kompozit kullanılarak tanımlı değişken almak için öznitelik: kompozit içinde arayüzde: kompozit .

Adım 1a: Özel Bileşen Oluşturun: loginComponent.xhtml

Kaynaklar klasöründe bir klasör öğretici noktası oluşturun ve içinde bir loginComponent.xhtml dosyası oluşturun.

Html başlığında bileşik ad alanı kullanın.

<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:composite = "http://java.sun.com/jsf/composite">
...
</html>

Adım 1b: Bileşik Etiketler Kullanın: loginComponent.xhtml

Aşağıdaki tablo, bileşik etiketlerin kullanımını açıklamaktadır.

S.No Etiket ve Açıklama
1

composite:interface

Bileşik: uygulamada kullanılacak yapılandırılabilir değerleri bildirir.

2

composite:attribute

Yapılandırma değerleri bu etiket kullanılarak bildirilir.

3

composite:implementation

JSF bileşenini bildirir. # {Cc.attrs.attribute-name} ifadesini kullanarak bileşik: arabiriminde tanımlanan yapılandırılabilir değerlere erişebilir.

<composite:interface>
   <composite:attribute name = "usernameLabel" />
   <composite:attribute name = "usernameValue" />
</composite:interface>

<composite:implementation>
<h:form>
   #{cc.attrs.usernameLabel} : 
   <h:inputText id = "username" value = "#{cc.attrs.usernameValue}" />
</h:form>

Özel Bileşeni Kullan

JSF'de özel bir bileşen kullanmak basit bir işlemdir.

Adım Açıklama
2a Bir xhtml dosyası oluşturun ve özel bileşenin ad alanını kullanın. Ad alanı, http://java.sun.com/jsf/ <klasör-adı> olacaktır; burada klasör adı, özel bileşeni içeren kaynaklar dizinindeki klasördür
2b Özel bileşeni normal JSF etiketleri olarak kullanın

Adım 2a: Özel Ad Alanı kullanın: home.xhtml

<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:ui = "http://java.sun.com/jsf/facelets">
   xmlns:tp = "http://java.sun.com/jsf/composite/tutorialspoint">

Adım 2b: Özel Etiket Kullanın: home.xhtml ve Geçiş Değerleri

<h:form>
   <tp:loginComponent 
      usernameLabel = "Enter User Name: " 
      usernameValue = "#{userData.name}" />
</h:form>

Örnek Uygulama

Özel bileşeni JSF'de test etmek için bir test JSF uygulaması oluşturalım.

Adım Açıklama
1 JSF - First Application bölümünde açıklandığı gibi com.tutorialspoint.test paketinin altında helloworld adıyla bir proje oluşturun .
2 Src → ana klasör altında kaynaklar klasörü oluşturun .
3 Src → ana → kaynaklar klasörü altında öğretici nokta klasörü oluşturun .
4 Src → ana → kaynaklar → tutorialspoint klasörü altında loginComponent.xhtml dosyası oluşturun .
5 Değiştir UserData.java dosyası olarak aşağıda açıklanmıştır.
6 Home.xhtml'yi aşağıda açıklandığı gibi değiştirin . Dosyaların geri kalanını değiştirmeyin.
7 İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın.
8 Son olarak, uygulamayı savaş dosyası biçiminde oluşturun ve Apache Tomcat Web sunucusunda konuşlandırın.
9 Son adımda aşağıda açıklandığı gibi uygun URL'yi kullanarak web uygulamanızı başlatın.

loginComponent.xhtml

<?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://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:composite = "http://java.sun.com/jsf/composite">
   
   <composite:interface>
      <composite:attribute name = "usernameLabel" />
      <composite:attribute name = "usernameValue" />
      <composite:attribute name = "passwordLabel" />
      <composite:attribute name = "passwordValue" />
      <composite:attribute name = "loginButtonLabel" />
      <composite:attribute name = "loginButtonAction" 
         method-signature = "java.lang.String login()" />
   </composite:interface>
   
   <composite:implementation>
      <h:form>
         <h:message for = "loginPanel" style = "color:red;" />
         
         <h:panelGrid columns = "2" id = "loginPanel">
            #{cc.attrs.usernameLabel} : 
            <h:inputText id = "username" value = "#{cc.attrs.usernameValue}" />
            #{cc.attrs.passwordLabel} : 
            <h:inputSecret id = "password" value = "#{cc.attrs.passwordValue}" />
         </h:panelGrid>
         
         <h:commandButton action = "#{cc.attrs.loginButtonAction}" 
            value = "#{cc.attrs.loginButtonLabel}"/>
      </h:form>
   </composite:implementation>
</html>

UserData.java

package com.tutorialspoint.test;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {
   private static final long serialVersionUID = 1L;
   private String name;
   private String password;
   
   public String getName() {
      return name;
   }
   
   public void setName(String name) {
      this.name = name;
   }
   
   public String getPassword() {
      return password;
   }
   
   public void setPassword(String password) {
      this.password = password;
   }	
   
   public String login() {
      return "result";
   }	
}

home.xhtml

<?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://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:tp = "http://java.sun.com/jsf/composite/tutorialspoint">
   
   <h:head>
      <title>JSF tutorial</title>		     
   </h:head>
   
   <h:body> 
      <h2>Custom Component Example</h2>
      
      <h:form>
      <tp:loginComponent 
         usernameLabel = "Enter User Name: " 
         usernameValue = "#{userData.name}" 
         passwordLabel = "Enter Password: " 
         passwordValue = "#{userData.password}"
         loginButtonLabel = "Login" 
         loginButtonAction = "#{userData.login}" />
      </h:form>
   </h:body>
</html>

Yapılan tüm değişikliklere hazır olduğunuzda, uygulamayı JSF - İlk Uygulama bölümünde yaptığımız gibi derleyip çalıştıralım. Başvurunuzla ilgili her şey yolundaysa, bu aşağıdaki sonucu verecektir.