Apa itu JSF? Memperkenalkan JavaServer Faces

JavaServer Faces (JSF) adalah teknologi standar Java untuk membangun antarmuka web berorientasi peristiwa berbasis komponen. Seperti JavaServer Pages (JSP), JSF memungkinkan akses ke data dan logika sisi server. Tidak seperti JSP, yang pada dasarnya adalah halaman HTML yang dijiwai dengan kemampuan sisi server, JSF adalah dokumen XML yang mewakili komponen formal dalam pohon logika. Komponen JSF didukung oleh objek Java, yang tidak bergantung pada HTML dan memiliki berbagai kemampuan Java, termasuk mengakses API dan database jarak jauh.

Ide utama kerangka kerja seperti JSF adalah merangkum (atau membungkus ) teknologi sisi klien seperti HTML, CSS, dan JavaScript, memungkinkan pengembang untuk membangun antarmuka web tanpa banyak interaksi dengan teknologi ini.

Artikel ini menyajikan cuplikan pendekatan JSF untuk pengembangan UI berbasis komponen untuk aplikasi web Java. Contoh sederhana memperkenalkan arsitektur MVC JSF, model acara, dan pustaka komponen. Contohnya termasuk fitur baru di JSF 2.3, dan kami akan menggunakan PrimeFaces untuk pustaka komponen kami.

Mengembangkan JSF

Lama populer, JSF baru-baru ini menghadapi persaingan dari kerangka kerja web yang kompatibel dengan Java, termasuk kerangka JavaScript sisi klien. Namun, JavaServer Faces tetap menjadi standar Java, terutama untuk pengembangan perusahaan Java skala besar. Spesifikasi JSF juga telah menghasilkan banyak kerangka kerja dan pustaka, yang sejalan dengan peningkatan sisi klien baru-baru ini. Salah satunya adalah PrimeFaces, yang kami jelajahi dalam tutorial ini.

Meskipun jadwal untuk pengembangan di masa mendatang tidak jelas, JSF 2.3 memberi banyak pengembang untuk dikerjakan sementara kami menunggu. Dirilis pada Maret 2017, JSF 2.3 sengaja dirancang untuk memodernisasi JSF. Di antara beberapa ratus perbaikan kecil dan pembaruan yang lebih besar, JSF 2.3 tidak lagi menggunakan anotasi kacang terkelola untuk mendukung CDI, yang akan saya perkenalkan nanti dalam tutorial ini.

JSF 2.3 di Jakarta EE

Pada September 2017, Oracle mengumumkan niatnya untuk mentransisikan Java EE ke Eclipse Foundation. Java EE telah diubah namanya menjadi Jakarta EE, dan JSF 2.3 (Eclipse Mojarra) telah diadopsi untuk kelanjutan. Rilis utama berikutnya dari spesifikasi JSF adalah Eclipse Mojarra 3.0.

Membangun antarmuka web berbasis komponen di JSF

Ide inti JSF adalah merangkum fungsionalitas menjadi komponen yang dapat digunakan kembali. Ini mirip dengan tag yang dapat digunakan kembali yang digunakan di JSP, tetapi komponen JSF lebih formal.

Meskipun Anda dapat menggunakan halaman JSF dalam Halaman JavaServer, lebih umum menggunakan Facelet untuk membuat halaman JSF mandiri. Facelet adalah halaman XHTML yang dirancang untuk mendefinisikan antarmuka JSF. Dengan Facelet, Anda menggunakan tag XML untuk membuat pohon komponen yang menjadi perancah untuk antarmuka pengguna JSF.

Kode 1 menyajikan bagian utama dari halaman JSF sederhana yang ditulis menggunakan Facelet. Dalam contoh ini kami mengakses kapabilitas sisi server Java melalui kacang yang ditempatkan dalam cakupan melalui CDI. Anda akan melihat lebih banyak tentang CDI nanti.

Daftar 1. Halaman contoh JSF

    Hello JavaWorld!   #{javaBean.content}  

Dalam Daftar 1 kita melihat halaman XHTML standar. Tampilan Facelet dibuat di atas XHTML. Selain namespace XHTML, namespace sekunder ditentukan dan direferensikan.

The hperpustakaan berisi komponen standar untuk digunakan dalam halaman JSF HTML. The //xmlns.jcp.org/jsf/htmlperpustakaan mendefinisikan kumpulan komponen JSF, dalam hal ini kumpulan elemen HTML umum. Salah satu komponen tersebut adalah elemen.

Komponen HTML di JSF

Dalam hal sintaksis, elemen Listing 1 mereferensikan jsf/htmlperpustakaan dengan hawalan. Ini kemudian mereferensikan komponen tertentu di dalam pustaka, yang merupakan headkomponen.

The komponen output elemen kepala HTML. (Semua sintaks itu mungkin tampak berlebihan untuk tujuan yang begitu sederhana, tetapi ada alasan bagus untuk itu, seperti yang akan Anda lihat sebentar lagi.)

Komponen bersarang

Di dalam kepala ada elemen HTML standar . Elemen ini disediakan untuk komponen, bersama dengan elemen anak konten yang bersarang di dalamnya.

Di badan dokumen, ekspresi JSF dimuat oleh #{}sintaks. Ini persis sama dengan ekspresi JSP dengan ${}format: memungkinkan akses objek Java dalam cakupan, dan fungsi sederhana.

Pola dasar JSF sederhana: Gunakan Faselet untuk membuat pohon XML yang mereferensikan pustaka atau pustaka komponen, lalu gunakan komponen di dalam pustaka untuk merender objek Java sebagai HTML.

Menggunakan objek Java di JSF

Kembali ke Listing 1, perhatikan bahwa di dalam ekspresi JSF ( ${javaBean.content) javaBeanObjek berada dalam lingkup saat markup ini dijalankan. XHTML dari Facelet mengakses .contentproperti pada javaBeanobjek. Hasil akhirnya adalah antarmuka web yang menggabungkan struktur tampilan Facelet dengan kemampuan logika dan data sisi server Java.

Menggunakan ekspresi JSF hanyalah salah satu cara untuk mengakses data aplikasi Java dari antarmuka pengguna JSF. Akhirnya, Anda ingin menjelajahi cara lain komponen JSF dapat berinteraksi dengan backend Java - hal-hal seperti daftar dan kisi data serta berbagai kontrol input. Untuk saat ini, cukup menyerap cara JSF menggunakan tag XML (atau anotasi) untuk membuat pohon komponen yang menghasilkan HTML berdasarkan data yang terdapat dalam objek Java.

Anotasi vs XML

Dengan JSF 2.3, menjadi mungkin untuk mendefinisikan komponen JSF dengan anotasi, menghindari metadata XML sepenuhnya. Sangat mungkin untuk menentukan dan menerapkan aplikasi JSF tanpa mengedit XML apa pun.

Struktur aplikasi JSF

Seperti Halaman JavaServer dan Servlet API, JavaServer Faces memerlukan struktur direktori dan metadata standar. Ini digunakan sebagai file .war .

Struktur file .war mirip dengan aplikasi Servlet atau JSP. Ini berisi /web-appdirektori, yang menyimpan file markup aplikasi (dalam hal ini HTML, JSP, dan Facelet), serta /WEB-INFdirektori, yang menampilkan metadata untuk mendeskripsikan aplikasi.

Melayani JSF

Meskipun Anda dapat menjalankan JSF dalam container Java EE seperti Glassfish, hanya container servlet sederhana yang Anda butuhkan. Tomcat adalah container populer untuk JSF dan teknologi Java sisi server lainnya.

JSF 2.3: Spesifikasi dan implementasi

Salah satu kekuatan Java adalah berbasis standar, dan standar tersebut diatur oleh proses komunitas sumber terbuka. Sejak awal, Java Community Process (JCP) telah mengawasi perkembangan teknologi Java. Setelah spesifikasi atau peningkatan spesifikasi telah dikembangkan dan disetujui oleh JCP, itu tersedia untuk diimplementasikan oleh banyak pihak. Sampai saat ini, Servlets, JSP, dan JSF semuanya dikembangkan menggunakan proses spesifikasi open source JCP.

Spesifikasi JSF terbaru pada tulisan ini adalah JSF 2.3, dirilis sebagai bagian dari Java EE 8 pada 2017. Mojarra Oracle (sekarang Eclipse) adalah implementasi referensi JSF, dan MyFaces serta PrimeFaces adalah implementasi pihak ketiga yang populer.

Masing-masing kerangka kerja ini mengimplementasikan inti JSF, yang mencakup beberapa komponen standar. Vendor juga dapat menawarkan pustaka komponen tambahan di atas standar. Saat mengevaluasi framework JSF, sebaiknya pertimbangkan kebutuhan aplikasi Anda dan library komponen apa yang tersedia untuk membantu Anda membangunnya. Idealnya, kerangka kerja JSF Anda harus membuat Anda sedekat mungkin dengan apa yang Anda butuhkan, langsung dari kotak.

MVC di JSF 2.3

JSF adalah kerangka kerja MVC , yang mengimplementasikan pola model-view-controller. Dalam pola MVC, idenya adalah untuk memisahkan tiga masalah UI menjadi bagian-bagian yang tersembunyi, sehingga lebih mudah untuk dikelola. Secara umum, tampilan bertanggung jawab untuk menampilkan data dalam model, dan pengontrol bertanggung jawab untuk menyiapkan model dan mengarahkan pengguna ke tampilan yang benar.

Dalam implementasi JSF, tampilan adalah halaman Facelet dengan kumpulan tag XML-nya. Ini menentukan tata letak antarmuka pengguna. Separuh lainnya dari penggunaan JSF adalah sisi server, tempat kelas Java mendukung komponen UI tersebut.

Biji yang dikelola tidak digunakan lagi di JSF 2.3

Anotasi kacang terkelola sudah tidak digunakan lagi di JSF 2.3, dan digantikan oleh CDI (Injeksi Konteks dan Ketergantungan). Dengan CDI, pengembang mendefinisikan konteks dan menyuntikkan objek ke konteks itu. Mereka yang akrab dengan kacang terkelola akan menemukan sintaks anotasi sedikit berbeda, tetapi semantiknya tetap sama persis.

Kacang pengontrol

Di JSF 2.3, kacang pengontrol menyediakan bagian pengontrol dari persamaan MVC. Objek Java normal (sering disebut POJO, atau objek Java lama biasa) menyediakan model.

Dalam hal aliran proses, kacang pengontrol:

  1. Putuskan ke mana harus mengarahkan permintaan pengguna
  2. Siapkan POJO untuk model tersebut
  3. Gunakan model untuk membuat tampilan Faselet

JSF kemudian melipat pohon komponen dan model untuk membuat HTML keluaran.

Kode 2 menunjukkan bagaimana Anda mendefinisikan javaBeanobjek dari Daftar 1 menggunakan CDI. Daftar ini mengasumsikan aplikasi memiliki cdi-api-1.2.jar dalam dependensinya.

Kode 2. Sebuah JavaBean didefinisikan menggunakan CDI

 import javax.inject.Named; import javax.enterprise.context.SessionScoped; @Named @ViewScoped public class JavaBean implements Serializable { private String content = ìWelcome to JSF!î // getters/setters } 

JSF 2.3 dengan PrimeFaces

Di bagian selanjutnya saya akan menggunakan PrimeFaces untuk menunjukkan kepada Anda bagaimana JSF mengimplementasikan pola MVC, pesan yang digerakkan oleh peristiwa, dan komponen yang dapat digunakan kembali. Untuk memulai, buka PrimeFaces Showcase, klik tautan Data di kolom sisi kiri, dan pilih DataList . Ini akan menarik kode demo DataList untuk PrimeFaces.

Gambar 1 menunjukkan Anda di mana menemukan sampel ini.

Matthew Tyson

Gambar 2 menunjukkan output dari tabel data sederhana, yang diambil dari demo PrimeFaces DataList.

Matthew Tyson

PrimeFaces DataList: Mengakses model data

Listing 3 presents the markup for this dataList display. If you scroll to the bottom of the PrimeFaces showcase, you can see the markup in the dataList.xhtml tab.

Listing 3. Facelet for PrimeFaces DataList

   Basic  #{car.brand}, #{car.year}  

In Listing 3, notice the value property of the dataList component. You can see that this references a dataListView object, and accesses the .cars1 property on it. The component is going to use the model object returned by that field. JSF tokens use conventional accessors to reference object properties, so .cars1 will refer to the getCars() getter on the object.

Next, notice the var="car" property. This tells the dataList component what variable to use when it iterates over the list of cars returned by the value field. These properties are specific to the dataList component, but the value property is very common. The var attribute is also conventional for components that iterate over lists.

In the body of the component in Listing 3, you can see the car variable is accessed via JSF expressions like #{car.brand}. Each iteration of the dataListView.cars1 instance will output the car.brand field.

Notice that the tag demonstrates the ability to customize components for how they will display. In this case, the header is defined as Basic.

You can see how the Facelets XML will drive this output by combining the data with the markup. Now let's look at the Java code behind it.

DataList's server-side components

Listing 4 shows DataListView, the Java class that is used by the markup in Listing 3. You'll see shortly how the dataListView instance is associated with the DataListView class.

Listing 4. DataListView class

 package org.primefaces.showcase.view.data; import java.io.Serializable; import java.util.List; import javax.annotation.PostConstruct; import javax.inject.Named; // Pre JSF 2.3, this was: // import javax.faces.bean.ManagedBean; import javax.inject.Inject; import javax.faces.bean.ViewScoped; import org.primefaces.showcase.domain.Car; import org.primefaces.showcase.service.CarService; @Named @ViewScoped public class DataListView implements Serializable { private List cars1; private Car selectedCar; @Inject("#{carService}") private CarService service; @PostConstruct public void init() { cars1 = service.createCars(10); } public List getCars1() { return cars1; } public void setService(CarService service) { this.service = service; } } 

Listing 4 has a few other important elements, which we'll consider piece by piece.

Dependency injection and annotations

First, notice that the DataListView class is annotated with @Named, which you can see from the import import javax.inject.Named; is part of JSF. The @Named annotation tells JSF this bean is part of the app. The @ViewScoped annotation informs JSF that the bean will live for just the life of the view.

Selanjutnya, amati bahwa CarServiceproperti tersebut memiliki @Injectanotasi (disebut @ManagedPropertysebelum JSF 2.3). Ini adalah fitur JSF lain yang memungkinkan kacang untuk "dihubungkan bersama", teknik yang dipopulerkan oleh kerangka kerja Spring dan alat injeksi ketergantungan lainnya. Intinya, JSF akan menemukan carServiceobjek dalam cakupan dan mengaitkannya secara otomatis ke servicebidang pada DataListViewobjek.