JSF - Komponen Komposit

JSF memberi para pengembang kemampuan yang kuat untuk menentukan komponen kustom mereka sendiri, yang dapat digunakan untuk membuat konten kustom.

Tentukan Komponen Kustom

Mendefinisikan komponen kustom di JSF adalah proses dua langkah.

Langkah Deskripsi
1a

Buat folder sumber daya.

Buat file xhtml di folder sumber daya dengan namespace komposit.

1b

Gunakan tag komposit komposit: antarmuka, komposit: atribut, dan komposit: implementasi, untuk menentukan konten komponen komposit. Gunakan cc.attrs dalam komposit: implementasi untuk mendapatkan variabel yang ditentukan menggunakan komposit: atribut dalam komposit: antarmuka .

Langkah 1a: Buat Komponen Kustom: loginComponent.xhtml

Buat folder tutorialspoint di folder resources dan buat file loginComponent.xhtml di dalamnya.

Gunakan namespace komposit di header html.

<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>

Langkah 1b: Gunakan Tag Gabungan: loginComponent.xhtml

Tabel berikut menjelaskan penggunaan tag komposit.

S.No Tag & Deskripsi
1

composite:interface

Mendeklarasikan nilai yang dapat dikonfigurasi untuk digunakan dalam komposit: implementasi.

2

composite:attribute

Nilai konfigurasi dideklarasikan menggunakan tag ini.

3

composite:implementation

Mendeklarasikan komponen JSF. Dapat mengakses nilai yang dapat dikonfigurasi yang ditentukan dalam komposit: antarmuka menggunakan ekspresi # {cc.attrs.attribute-name}.

<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>

Gunakan Komponen Kustom

Menggunakan komponen kustom di JSF adalah proses yang sederhana.

Langkah Deskripsi
2a Buat file xhtml dan gunakan namespace komponen kustom. Namespace akan menjadi http://java.sun.com/jsf/ <folder-name> di mana nama folder adalah folder di direktori sumber daya yang berisi komponen kustom
2b Gunakan komponen khusus sebagai tag JSF biasa

Langkah 2a: Gunakan Namespace Khusus: 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">

Langkah 2b: Gunakan Tag Kustom: home.xhtml dan Nilai Pass

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

Contoh Aplikasi

Mari kita buat aplikasi uji JSF untuk menguji komponen kustom di JSF.

Langkah Deskripsi
1 Buat proyek dengan nama helloworld di bawah paket com.tutorialspoint.test seperti yang dijelaskan di JSF - bab Aplikasi Pertama .
2 Buat folder sumber daya di bawah src → folder utama .
3 Buat folder tutorialspoint di bawah folder src → main → resources .
4 Buat file loginComponent.xhtml di bawah folder src → main → resource → tutorialspoint .
5 Ubah file UserData.java seperti yang dijelaskan di bawah ini.
6 Ubah home.xhtml seperti yang dijelaskan di bawah ini. Jaga sisa file tidak berubah.
7 Kompilasi dan jalankan aplikasi untuk memastikan logika bisnis berfungsi sesuai kebutuhan.
8 Terakhir, buat aplikasi dalam bentuk file perang dan terapkan di Webserver Apache Tomcat.
9 Luncurkan aplikasi web Anda menggunakan URL yang sesuai seperti yang dijelaskan di bawah ini pada langkah terakhir.

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>

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dan jalankan aplikasi seperti yang kita lakukan di JSF - bab Aplikasi Pertama. Jika semuanya baik-baik saja dengan aplikasi Anda, ini akan memberikan hasil sebagai berikut.