Gambaran umum aplikasi JavaServer Faces

5 menit

Di unit ini, kita akan menggunakan JavaServer Faces (JSF) sebagai teknologi "Tampilan" untuk mempelajari konsep dasar JSF.

Apa itu JavaServer Faces?

JavaServer Faces diadopsi sebagai spesifikasi dalam platform Java, Enterprise Edition (Java EE), sebagai bagian dari Java EE 5 (2006). Awalnya, JSF menggunakan Java Server Pages (JSP) untuk merender halaman HTML. Sejak versi 2.0, Facelets, yang lebih mendekati HTML biasa, telah digunakan.

JSF adalah kerangka kerja aplikasi berbasis komponen. Setiap kondisi komponen disimpan tergantung dari interaksi klien. Kondisi disimpan saat halaman baru diminta dan dipulihkan saat ditampilkan.

Fungsionalitas dasar JSF

Aplikasi JSF kurang lebih dibagi ke dalam dua fungsi berikut:

Facelets: Mesin templat berbasis XHTML yang menjelaskan tata letak layar
BackingBean: Kelas Java yang mengikat ke Facelets dan mengatur serta memproses nilai

Facelets adalah mesin templat berbasis XHTML yang menjelaskan tata letak layar, yang ditulis oleh XHTML. XHTML sesuai dengan ketentuan jenis dokumen (DTD) yang ditentukan di W3C dan digambarkan sebagai file dengan ekstensi xhtml.

BackingBean adalah kelas Java yang ditautkan ke halaman JSF. Ia berisi metode Tindakan, pendengar Tindakan, dan pendengar Perubahan Nilai. Di Java EE 6, bean dukungan diterapkan dengan bean yang dikelola JSF. Sejak Java EE 7, bean Contexts and Dependency Injection (CDI) digunakan sebagai penerapan.

Membuat halaman JSF dengan PrimeFaces

PrimeFaces adalah penerapan JSF pihak ketiga yang memudahkan pembuatan komponen web JSF. PrimeFaces adalah pustaka ringan dengan satu jar, nol konfigurasi, dan tidak memerlukan dependensi. Anda hanya perlu mengunduh PrimeFaces, menambahkan primefaces-{version}.jar ke jalur kelas Anda, dan mengimpor namespace untuk memulai, seperti di xmlns:p="http://primefaces.org/ui".

Mari lihat contohnya. Di halaman PrimeFaces berikut, tag p:outputLabel, p:inputText, dan p:commandButton digunakan untuk menampilkan label, bidang input, dan tombol.

<?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:p="http://primefaces.org/ui" >
    <h:head>
        <title>Input Value Counter Sample</title>
    </h:head>
    <h:body>
        <h:form>
            <p:outputLabel value="Basic"/><br/>
            <p:inputText value="#{indexcontroller.inputValue}"/><br/>
            <p:commandButton value="Submit" action="#{indexcontroller.submitButtonAction()}"/><br/>
        </h:form>
    </h:body>
</html>

Saat Anda menulis kode XHTML sebelumnya, layar berikut muncul:

Screenshot that shows a JSF Facelets sample.

Dukungan Ajax PrimeFaces

JSF mendukung aplikasi Ajax secara default. Anda dapat memperbarui bagian layar secara dinamis tanpa merefresh layar.

PrimeFaces menggunakan atribut update untuk memudahkan penerapan dukungan Ajax yang disediakan oleh JSF. Anda menentukan komponen mana yang harus diperbarui dengan ID targetnya. Di contoh berikut, atribut update ="ajaxUpdateText" ditambahkan ke p:commandButton, sehingga bagian <div id ="ajaxUpdateText"> diperbarui saat tombol dipilih. Anda dapat menentukan di id sini untuk komponen HTML apa pun.

<div id="ajaxUpdateText">
...
</div>

<p:commandButton update="ajaxUpdateText" 
   value="Submit" action="#{indexcontroller.submitButtonAction()}"/>

Bean dukungan JSF

Bean dukungan adalah kelas Java yang menerapkan pemrosesan back-end yang dikaitkan dengan Tampilan JSF. Di contoh berikutnya, kita akan mereferensikan bean dukungan, IndexController, yang ditautkan ke XHTML sebelumnya. Kita akan menggunakan anotasi @Named untuk mengonfigurasi aplikasi JSF agar dapat dirujuk dari JSF Facelets kita.

Jika Anda menulis <p: inputText value ="#{indexcontroller.inputValue}"/> di Facelets, bidang Teks Input muncul pada layar. Nilai yang dimasukkan terikat ke inputValue yang ditentukan di kelas IndexController.

Selain itu, jika Anda menulis <p:commandButton value ="Submit" action="#{indexcontroller.submitButtonAction()}"/>, tombol HTML muncul. Ketika dipilih, tombol memanggil metode submitButtonAction() yang ditentukan di kelas IndexController.

import java.io.Serializable;

import javax.faces.view.ViewScoped;
import javax.inject.Named;
import lombok.Getter;
import lombok.Setter;

@Named("indexcontroller")
@ViewScoped
public class IndexController implements Serializable {

    private static final long serialVersionUID = 8485377386286855408L;

    @Setter @Getter
    private String inputValue;

    private int counter;

    public void submitButtonAction(){
        inputValue = inputValue + " : " + counter;
        counter++;
    }
}

Dengan cara ini, JSF memungkinkan Tampilan (Facelets) dan Pengontrol (bean dukungan) yang membentuk layar untuk diterapkan secara terpisah.

Di unit ini, kami memperkenalkan JSF. Di unit berikutnya, kita akan membuat aplikasi JSF dan menjalankannya secara lokal.

Lanjutkan