Pengantar Primefaces

1. Perkenalan

Primefaces adalah rangkaian komponen UI open source untuk aplikasi Java Server Faces (JSF).

Dalam tutorial ini, kami akan memberikan pengantar tentang Primefaces, dan mendemonstrasikan cara mengkonfigurasinya dan menggunakan beberapa fitur utamanya.

2. Ikhtisar

2.1. Wajah Server Java

Java Server Faces adalah kerangka kerja berorientasi komponen untuk membangun antarmuka pengguna untuk aplikasi web Java . Spesifikasi JSF diformalkan melalui Proses Komunitas Java dan merupakan teknologi tampilan standar.

Lebih lanjut tentang JSF di lingkungan Spring dapat ditemukan di sini.

2.2. Primefaces

Dibangun di atas JSF, Primefaces mendukung pengembangan aplikasi yang cepat dengan menyediakan komponen UI yang dibuat sebelumnya yang dapat ditambahkan ke proyek apa pun.

Selain Primefaces, ada juga proyek Primefaces Extensions. Proyek sumber terbuka berbasis komunitas ini menyediakan komponen tambahan selain yang standar.

3. Pengaturan Aplikasi

Untuk tujuan mendemonstrasikan beberapa komponen Primefaces, mari kita buat aplikasi web sederhana menggunakan Maven.

3.1. Konfigurasi Maven

Primefaces memiliki konfigurasi yang ringan dengan hanya satu botol jadi untuk memulai, mari tambahkan ketergantungan ke pom.xml kami :

 org.primefaces primefaces 6.2 

Versi terbaru dapat ditemukan di sini.

3.2. Pengontrol - Bean Terkelola

Selanjutnya, mari buat kelas kacang untuk komponen kita:

@ManagedBean(name = "helloPFBean") public class HelloPFBean { }

Kita perlu menyediakan anotasi @ManagedBean untuk mengikat pengontrol kita ke komponen tampilan.

3.3. Melihat

Terakhir, mari kita deklarasikan namespace Primefaces di. file xhtml :

4. Contoh Komponen

Untuk merender halaman, mulai server dan arahkan ke:

//localhost:8080/jsf/pf_intro.xhtml

4.1. PanelGrid

Mari gunakan PanelGrid sebagai ekstensi untuk panelGrid JSF standar :

Di sini, kita telah mendefinisikan panelGrid dengan dua kolom dan mengatur outputText dari facelet JSF untuk menampilkan data dari kacang yang dikelola.

Nilai yang dideklarasikan di setiap outputText sesuai dengan properti firstName dan lastName yang dideklarasikan di @ManagedBean kami :

private String firstName; private String lastName; 

Mari kita lihat komponen pertama kita yang sederhana:

4.2. SelectOneRadio

Kita dapat menggunakan komponen selectOneRadio untuk menyediakan fungsionalitas tombol radio :

Kita perlu mendeklarasikan variabel nilai di kacang pendukung untuk menahan nilai tombol radio:

private String componentSuite; 

Pengaturan ini akan menghasilkan tombol radio 2 pilihan yang terikat ke properti String yang mendasari componentSuite :

4.3. Tabel data

Selanjutnya, mari gunakan komponen dataTable untuk menampilkan data dalam tata letak tabel :

Demikian pula, kita perlu menyediakan properti Bean untuk menyimpan data tabel kita:

private List technologies; 

Di sini, kami memiliki daftar berbagai teknologi dan nomor versinya:

4.4. Ajax Dengan InputText

Kami juga dapat menggunakan p: ajax untuk menyediakan fitur Ajax ke komponen kami .

Misalnya, mari gunakan komponen ini untuk menerapkan acara blur:

Karenanya, kami perlu menyediakan properti di dalam kacang:

private String inputText; private String outputText; 

Selain itu, kami juga perlu menyediakan metode pendengar di kacang kami untuk acara blur AJAX kami:

public void onBlurEvent() { outputText = inputText.toUpperCase(); }

Di sini, kami hanya mengubah teks menjadi huruf besar untuk mendemonstrasikan mekanismenya:

4.5. Tombol

Selain itu, kita juga dapat menggunakan p: commandButton sebagai ekstensi dari komponen h: commandButton standar .

Sebagai contoh:

As a result, with this configuration, we have the button which we'll use to open dialog (using onclick attribute):

4.6. Dialog

Furthermore, to provide the functionality of the dialog, we can use p:dialog component.

Let's also use the button from the last example to open dialog on click:

In this case, we have a dialog with the basic configuration which can be triggered using the commandButton described in the previous section:

5. Primefaces Mobile

Primefaces Mobile (PFM) provides a UI kit to create Primefaces applications for mobile devices.

For this reason, PFM supports responsive design adjusted for mobile devices.

5.1. Configuration

To begin with, we need to enable mobile navigation support inside our faces-config.xml:

 org.primefaces.mobile.application.MobileNavigationHandler 

5.2. Namespace

Then, to use PFM components, we need to include the PFM namespace in our .xhtml file:

xmlns:pm="//primefaces.org/mobile"

Besides the standard Primefaces jar, there is no need for any additional library in our configuration.

5.3. RenderKit

Last, we need to provide RenderKit, which is used to render the components in the mobile environment.

In case of a single PFM page within an application, we can define a RenderKit inside our page:

With a full PFM application, we can define our RenderKit at the application scope inside faces-config.xml:

PRIMEFACES_MOBILE 

5.4. Example Page

Now, let's make example PFM page:

As can be seen, we used page, header and content component from PFM to build a simple form with a header:

Furthermore, we used our backing bean for user input check and navigation:

public String go() { if(this.magicWord != null && this.magicWord.toUpperCase().equals("BAELDUNG")) { return "pm:success"; } return "pm:failure"; }

In case of a correct word, we navigate to next page:

This configuration results in this layout:

In case of an incorrect word, we navigate to next page:

This configuration will result in this layout:

Note that PFM is deprecated in version 6.2 and will be removed in version 6.3 in favor of a responsive standard kit.

6. Conclusion

In this tutorial, we've explained the benefits of using the Primefaces JSF component suite and demonstrated how to configure and use Primefaces in a Maven-based project.

In addition, we introduced Primefaces Mobile, UI kit specialized for mobile devices.

Seperti biasa, contoh kode dari tutorial ini disediakan di GitHub.