Bekerja dengan Fragmen di Timeleaf

1. Ikhtisar

Dalam tutorial ini, kami akan menunjukkan cara menggunakan Fragmen Thymeleaf untuk menggunakan kembali beberapa bagian umum situs . Setelah menyiapkan proyek MVC Spring yang sangat sederhana, kami akan fokus pada tampilan.

Jika Anda baru mengenal Thymeleaf, Anda dapat memeriksa artikel lain di situs ini seperti pengantar ini, serta artikel ini tentang mesin versi 3.0.

2. Ketergantungan Maven

Kami memerlukan beberapa dependensi untuk mengaktifkan Thymeleaf:

 org.thymeleaf thymeleaf 3.0.11.RELEASE   org.thymeleaf thymeleaf-spring5 3.0.11.RELEASE 

Versi terbaru thymeleaf dan thymeleaf-spring5 dapat ditemukan di Maven Central.

3. Proyek Musim Semi

3.1. Konfigurasi MVC Musim Semi

Untuk mengaktifkan Thymeleaf dan menyetel akhiran template, kita perlu mengkonfigurasi MVC dengan resolver tampilan dan resolver template .

Kami juga akan mengatur direktori untuk beberapa sumber daya statis:

@Bean public ViewResolver htmlViewResolver() { ThymeleafViewResolver resolver = new ThymeleafViewResolver(); resolver.setTemplateEngine(templateEngine(htmlTemplateResolver())); resolver.setContentType("text/html"); resolver.setCharacterEncoding("UTF-8"); resolver.setViewNames(ArrayUtil.array("*.html")); return resolver; } private ITemplateResolver htmlTemplateResolver() { SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver(); resolver.setApplicationContext(applicationContext); resolver.setPrefix("/WEB-INF/views/"); resolver.setCacheable(false); resolver.setTemplateMode(TemplateMode.HTML); return resolver; } @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/resources/**", "/css/**") .addResourceLocations("/WEB-INF/resources/", "/WEB-INF/css/"); }

Perhatikan bahwa jika kami menggunakan Spring Boot, konfigurasi ini mungkin tidak diperlukan kecuali kami perlu menerapkan penyesuaian kami sendiri.

3.2. Pengendali

Dalam hal ini, pengontrol hanyalah kendaraan untuk tampilan. Setiap tampilan menunjukkan skenario penggunaan fragmen yang berbeda.

Yang terakhir memuat beberapa data yang melewati model untuk ditampilkan pada tampilan:

@Controller public class FragmentsController { @GetMapping("/fragments") public String getHome() { return "fragments.html"; } @GetMapping("/markup") public String markupPage() { return "markup.html"; } @GetMapping("/params") public String paramsPage() { return "params.html"; } @GetMapping("/other") public String otherPage(Model model) { model.addAttribute("data", StudentUtils.buildStudents()); return "other.html"; } }

Perhatikan bahwa nama tampilan harus berisi akhiran ".html" karena cara kami mengkonfigurasi resolver kami. Kami juga akan menentukan sufiks saat merujuk ke nama fragmen.

4. Tampilan

4.1. Penyertaan Fragmen Sederhana

Pertama-tama, kami akan menggunakan kembali bagian umum di halaman kami.

Kita dapat mendefinisikan bagian ini sebagai fragmen, baik dalam file yang terisolasi atau di halaman umum. Dalam proyek ini, bagian yang dapat digunakan kembali ini ditentukan dalam folder bernama fragmen .

Ada tiga cara dasar untuk memasukkan konten dari sebuah fragmen:

  • sisipkan - menyisipkan konten di dalam tag
  • replace - mengganti tag saat ini dengan tag yang mendefinisikan fragmen
  • include - ini sudah usang tetapi mungkin masih muncul di kode lama

Contoh berikutnya, fragments.html, menunjukkan penggunaan ketiga cara tersebut. Template Thymeleaf ini menambahkan fragmen di head dan body dokumen:

   Thymeleaf Fragments: home      

Go to the next page to see fragments in action

Sekarang, mari kita lihat halaman yang menyimpan beberapa fragmen. Ini disebut general.html , dan ini seperti seluruh halaman dengan beberapa bagian yang didefinisikan sebagai fragmen yang siap digunakan:

Go to the next page to see fragments in action

This is a sidebar This is another sidebar Fragments Index | Markup inclussion | Fragment params | Other

Itu bagian hanya berisi sebuah lembar gaya, tetapi kita dapat menerapkan alat lain seperti Bootstrap, jQuery, atau Foundation, baik secara langsung atau menggunakan Webjars.

Perhatikan bahwa semua tag yang dapat digunakan kembali dari template ini memiliki atribut th: fragment , tetapi selanjutnya kita akan melihat cara menyertakan bagian lain dari halaman.

Setelah rendering dan penyertaan fragmen, konten yang dikembalikan adalah:

   Thymeleaf Fragments: home 

Go to the next page to see fragments in action

Fragments Index | Markup inclussion | Fragment params | Other

4.2. Pemilih Markup untuk Fragmen

Salah satu hal hebat tentang Thymeleaf Fragments adalah kita juga dapat mengambil bagian mana pun dari template hanya dengan menggunakan pemilih sederhana , melalui kelas, id, atau hanya dengan tag.

Halaman ini, misalnya, menyertakan beberapa komponen dari file general.html : blok samping dan blok div.another :

4.3. Fragmen Parameter

Kita dapat mengirimkan parameter ke afragmen untuk mengubah beberapa bagian tertentu darinya. Untuk melakukan itu, fragmen harus didefinisikan sebagai panggilan fungsi, di mana kita harus mendeklarasikan daftar parameter.

Dalam contoh ini, kami mendefinisikan fragmen untuk bidang formulir umum:

 Field 

Dan inilah penggunaan sederhana dari fragmen itu di mana kami meneruskan parameter ke dalamnya:

Dan seperti inilah tampilan bidang yang dikembalikan:

 Name 

4.4. Ekspresi Penyertaan Fragmen

Fragmen timeleaf menawarkan opsi menarik lainnya seperti dukungan untuk ekspresi kondisional untuk menentukan apakah akan menyertakan sebuah fragmen .

Using the Elvis operator with any of the expressions provided by Thymeleaf (security, strings, and collections for example), we're able to load different fragments.

For example, we can define this fragment with some content that we’ll show depending on a given condition. This could be a file containing different kinds of blocks:

 Data received No data 

And this is how we could load them with an expression:

 0} ? ~{fragments/menus.html :: dataPresent} : ~{fragments/menus.html :: noData}">

To learn more about Thymeleaf Expressions, check our article here.

4.5. Flexible Layouts

The next example also shows two other interesting uses of fragments to render a table with data. This is the reusable table fragment, with two important parts: a table header that can be changed, and the body where data is rendered:


    
0 Name

When we want to use this table, we can pass our own table header using the fields function. The header is referenced with the class myFields. The table body is loaded by passing data as a parameter to the tableBody function:


    
Id Name

And this is how the final page will look:

 Data received 
    
Id Name
1001 John Smith
1002 Jane Williams
Fragments Index | Markup inclussion | Fragment params | Other

5. Conclusion

In this article, we've shown how to reuse view components through the use of Thymeleaf Fragments, a powerful tool that can make template management easier.

We have also presented some other interesting features that go beyond the basics. We should take these into account when choosing Thymeleaf as our view rendering engine.

If you want to learn about other Thymeleaf features, you should definitely take a look at our article about Layout Dialects.

Seperti biasa, kode implementasi lengkap dari contoh ini tersedia di GitHub.