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.
