Pengenalan kepada Primefaces

1. Pengenalan

Primefaces adalah rangkaian komponen UI sumber terbuka untuk aplikasi Java Server Faces (JSF).

Dalam tutorial ini, kami akan memberikan pengenalan kepada Primefaces, dan menunjukkan cara mengkonfigurasinya dan menggunakan beberapa ciri utamanya.

2. Gambaran keseluruhan

2.1. Muka Pelayan Java

Java Server Faces adalah kerangka berorientasikan komponen untuk membangun antara muka pengguna untuk aplikasi web Java . Spesifikasi JSF diformalkan melalui Proses Komuniti Java dan merupakan teknologi paparan standard.

Maklumat lanjut mengenai persekitaran JSF di Spring boleh didapati di sini.

2.2. Pratama

Dibangun di atas JSF, Primefaces menyokong pengembangan aplikasi yang cepat dengan menyediakan komponen UI pra-binaan yang dapat ditambahkan ke mana-mana projek.

Selain Primefaces, terdapat juga projek Primefaces Extensions. Projek sumber terbuka berasaskan komuniti ini menyediakan komponen tambahan selain yang standard.

3. Persediaan Aplikasi

Untuk tujuan menunjukkan beberapa komponen Primefaces, mari buat aplikasi web mudah menggunakan Maven.

3.1. Konfigurasi Maven

Primefaces mempunyai konfigurasi ringan dengan hanya satu balang sehingga untuk memulakan, mari tambahkan kebergantungan pada pom.xml kami :

 org.primefaces primefaces 6.2 

Versi terbaru boleh didapati di sini.

3.2. Pengawal - Kacang Terurus

Seterusnya, mari buat kelas kacang untuk komponen kami:

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

Kami perlu memberikan anotasi @ManagedBean untuk mengikat pengawal kami ke komponen pandangan.

3.3. Pandangan

Akhir sekali, mari kita nyatakan ruang nama Primefaces di. fail xhtml :

4. Komponen Contoh

Untuk membuat halaman, mulakan pelayan dan arahkan ke:

//localhost:8080/jsf/pf_intro.xhtml

4.1. PanelGrid

Mari gunakan PanelGrid sebagai lanjutan kepada panelGS JSF standard :

Di sini, kami telah menentukan panelGrid dengan dua lajur dan menetapkan outputText dari facelet JSF untuk memaparkan data dari kacang yang diuruskan.

Nilai diisytiharkan dalam setiap outputText sesuai dengan firstName dan LASTNAME hartanah diisytiharkan dalam kita @ManagedBean :

private String firstName; private String lastName; 

Mari lihat komponen pertama dan sederhana kami:

4.2. PilihOneRadio

Kita boleh menggunakan komponen selectOneRadio untuk menyediakan fungsi butang radio :

Kita perlu menyatakan pemboleh ubah nilai dalam backing bean untuk menahan nilai butang radio:

private String componentSuite; 

Penyediaan ini akan menghasilkan butang radio 2 pilihan yang terikat dengan komponen harta String yang mendasariSuite :

4.3. Jadual Data

Seterusnya, mari kita gunakan komponen dataTable untuk memaparkan data dalam susunan jadual :

Begitu juga, kita perlu memberikan harta tanah Bean untuk menyimpan data untuk jadual kita:

private List technologies; 

Di sini, kami mempunyai senarai pelbagai teknologi dan nombor versi mereka:

4.4. Ajax Dengan InputText

Kami juga boleh menggunakan p: ajax untuk menyediakan ciri Ajax kepada komponen kami .

Sebagai contoh, mari kita gunakan komponen ini untuk menerapkan peristiwa kabur:

Oleh itu, kami perlu memberikan sifat dalam kacang:

private String inputText; private String outputText; 

Selain itu, kami juga perlu menyediakan kaedah pendengar dalam kacang kami untuk acara AJAX blur kami:

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

Di sini, kami hanya menukar teks ke huruf besar untuk menunjukkan mekanisme:

4.5. Butang

Selain itu, kita juga dapat menggunakan p: commandButton sebagai lanjutan kepada komponen h: commandButton standard .

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 kod dari tutorial ini disediakan di GitHub.