Contoh tabel yang telah ditentukan.
Di lab ini kita akan melihat contoh sederhana yang menunjukkan cara menggunakan komponen DataTable, elemen ini memungkinkan kita menautkan tabel data ke halaman kita seperti ini:
Untuk contoh pertama ini, hanya prepopulated component yang akan ditautkan dari kelas bean kita, nanti akan ditunjukkan bagaimana memanipulasi informasinya secara dinamis.
Awalnya, mari buat proyek JSF dengan struktur berikut:
Seperti yang bisa kita lihat, 2 kelas java dibuat, satu sesuai dengan kelas orang yang memungkinkan kita untuk memproses orang yang akan kita tampilkan di tabel kita dan yang lainnya sesuai dengan kacang yang memungkinkan kita mengelola tabel kita dengan masing-masing. kolom dan record.
Kelas Person.java memberi kita data dasar dari orang yang akan kita tampilkan dalam tabel, di sini kita menambahkan metode set dan get yang sesuai, serta konstruktor dengan parameter untuk mengisi orang secara langsung.
Kelas TablaBean.java mengacu pada tabel dan pengelolaan orang di dalamnya, catatan yang ditampilkan disimpan dalam tipe orang ArrayList yang, untuk tujuan panduan ini, diisi dalam konstruktor.
Di index.xhtml kami membuat komponen DataTable yang kami kaitkan dengan daftar orang secara langsung dalam nilai dan di masing-masing kolom atribut kacang yang direferensikan dalam var="data", menjadi data elemen yang mewakili data dari objek Orang di setiap baris dari tabel.
Saat menjalankannya kita akan memiliki sesuatu seperti ini
Seperti yang dapat kita lihat, informasi disajikan dalam mode tabel, karena kita belum menautkan gaya CSS, kita hanya menghargai struktur dalam baris dan kolom tanpa desain apa pun, namun kita dapat menambahkan properti "perbatasan" ke tabel dan margin memiliki sesuatu seperti ini:
Akhirnya kita tahu bahwa kita dapat memanfaatkan
Contoh manajemen data di DataTable.
Pada bagian ini kita akan melanjutkan dengan contoh sebelumnya dimana kita akan melihat bagaimana memanipulasi data tabel untuk melakukan proses umum seperti mendaftar, mengubah atau menghapus informasi.
Tambahkan orang.
Untuk mendaftarkan orang, kami akan memodifikasi halaman index.xhtml kami yang akan kami tautkan ke formulir pendaftaran orang. Kami melakukan ini dengan menautkan komponen input dan pemilihan di panel kisi yang terkait dengan objek "myPerson" yang dikirimi data berbeda. orang baru terdaftar di sistem kami.
Seperti yang kita lihat elemen baru ini ditambahkan sebelum DataTable mendapatkan hasil seperti ini:
Setelah memodifikasi indeks, mari buat perubahan yang diperlukan di kelas TableBean.java, karena dalam contoh ini kita akan terus menggunakan level lingkup default, jadi mari kita buat daftar orang statis agar dapat dimanipulasi tanpa masalah, sebagai tambahan kita akan hilangkan list padding karena idenya adalah untuk dapat mendaftarkan orang melalui formulir pendaftaran.
Seperti yang dapat kita lihat ketika mendefinisikan daftar sebagai statis, kami membuat turunannya di tingkat kelas, kami tidak melakukan ini di konstruktor karena ini akan dipanggil pada kesempatan yang berbeda oleh jsf kami yang akan menyebabkan turunan baru dari daftar yang akan menyebabkan kita kehilangan informasi yang bisa dikandungnya.
Selain itu, kami menambahkan objek tipe Orang agar dapat mengelola data pendaftaran dan menambahkan metode "aggregarPersona()" yang memungkinkan penambahan elemen baru ke daftar dan dipanggil dari tombol jsf, kemudian kami membuat instance baru dari objek “minhaPersona” yang memungkinkan pembersihan formulir pendaftaran.
Saat menjalankan sistem kita akan melihat perilaku berikut:
Awalnya formulir kosong dan tajuk tabel kami juga ditampilkan tetapi tanpa konten apa pun (ingat bahwa kami menghilangkan pengisian daftar), sehingga tajuk tidak muncul ketika belum ada orang yang mendaftar, jadi kami menggunakan " rendered” tempat kami memvalidasi bahwa panjang daftar lebih besar dari nol, jika tidak maka tidak akan menampilkan header. (Pengoperasian properti ini akan dibahas secara rinci nanti)
Saat kami menambahkan orang, mereka disimpan dalam daftar dan disajikan dalam Tabel Data
Kecualikan Orang.
Setelah kami berhasil mendaftarkan orang dalam daftar kami, kami dapat menghapusnya dari daftar itu, untuk ini kami akan menambahkan kolom tindakan baru di dataTable kami yang akan berisi tautan ke metode "eliminarPerson()" yang akan kami buat di bean kami
Untuk ini kami memodifikasi index.xhtml dimana setelah kolom "Sex" kami akan menambahkan kolom "Actions"
Seperti yang bisa kita lihat, kita menggunakan komponen
Kemudian, di kelas TablaBean.java, kami menambahkan metode "eliminarPersona()" yang menerima objek orang yang ingin kami hapus sebagai parameter, ini sesuai dengan "data" yang kami kirim dari jsf, dan setara dengan orang di baris yang ingin kita hapus, lalu hapus dari daftar.
Saat menjalankan sistem, kami akan memiliki yang berikut:
Dan setiap kali kami menghapus catatan melalui tautan yang sesuai, tabel akan diperbarui
Sunting Orang.
Setelah berhasil mendaftarkan dan menghapus orang dari daftar kami, kami dapat memodifikasinya, untuk itu kami akan memodifikasi tabel kami sehingga dapat diedit ketika kami ingin memperbarui beberapa data, untuk itu kami akan menggunakan properti "rendered" lagi yang akan ditampilkan atau sembunyikan opsi yang dapat diedit tergantung pada keputusan pengguna.
Seperti yang bisa kita lihat di setiap kolom, sebuah komponen ditambahkan
Dalam kasus kami "data.edit" membuat panggilan ke variabel boolean (edit) yang kami tambahkan di kelas Person, jika propertinya benar maka itu akan menampilkan
Hal yang sama harus dilakukan untuk masing-masing kolom profesi, gaji dan jenis kelamin, di mana alih-alih menambahkan a
Demikian juga, properti yang dirender terikat untuk menunjukkan kombo atau menunjukkan label sesuai kasusnya.
Selanjutnya, kolom "Tindakan" diubah di mana sebelumnya kami hanya memiliki tautan ke "Hapus" sekarang kami akan menambahkan 2 tautan lagi, satu untuk "mengedit" dan yang lainnya untuk "menyimpan" informasi setelah mengeditnya.
Seperti yang dapat kita lihat, sekarang ada 3 tautan untuk metode edit, simpan, dan hapus masing-masing, namun edit dan simpan memiliki properti yang dirender yang membuat hanya 2 dari 3 tautan yang terlihat pada satu waktu (ingat bahwa yang dirender berisi benar atau salah tergantung pada kondisi ) jadi secara default tautan hapus akan selalu muncul karena tidak memiliki properti yang dirender, sedangkan edit dan simpan tidak akan pernah terlihat bersamaan. (memungkinkan Anda menambahkan spasi di antara tautan)
Secara internal pada level grafik, tabel data akan terlihat seperti ini:
Meskipun secara grafis Anda dapat melihat semua komponen secara bersamaan, penting untuk memperjelas bahwa properti yang dirender hanya akan menampilkan komponen tergantung pada nilai true atau false pada saat itu.
Setelah memodifikasi index.xhtml, sekarang saatnya memodifikasi kelas Person.java, di mana properti “edit” yang digunakan oleh rendering yang disebutkan di atas ditambahkan.
Seperti yang bisa kita lihat, atribut boolean baru ditautkan ke set dan get masing-masing. Selain itu, agar sesuai dengan struktur latihan, kami menambahkan properti ke konstruktor berparameter, meskipun tidak lagi digunakan pada saat ini dalam latihan.
Dengan cara ini, setiap kali rendered=”#{data.edit}” dilakukan di index.xhtml, itu akan memanggil variabel ini, yang memungkinkan menampilkan atau menyembunyikan komponen tergantung pada kasusnya.
Terakhir, dan dengan perubahan sebelumnya, kami melanjutkan untuk memodifikasi kelas Bean di mana kami harus menambahkan metode yang sesuai untuk menghapus dan menyimpan yang dipanggil dari bidang "Tindakan".
Seperti yang bisa kita lihat, metode editPersona() menerima objek person (dari panggilan jsf, seperti yang dilakukan dalam metode hapus) dan properti "edit" diubah dengan mengirimkannya nilai true, yang akan memungkinkan record ini untuk menyembunyikan
Di sisi lain, metode savePersona() akan bertanggung jawab untuk mengubah setiap properti "edit" dari semua objek dalam daftar menjadi false sehingga tabel data dipulihkan dengan nilai orang dan bukan dengan elemen yang dapat diedit.
Saat menjalankan sistem, kami akan memiliki yang berikut:
Dan ketika menekan edit sistem berubah menjadi:
Seperti yang dapat dilihat, ketika tautan edit diklik, komponen yang dapat diedit ditampilkan secara otomatis sedangkan komponen yang tidak dapat diedit disembunyikan, demikian pula tautan edit menghilang untuk memberi jalan bagi tautan penyimpanan seperti yang dijelaskan di atas.
Dan siap!!!
Di blog saya dan di saluran saya, saya telah membagikan materi tentang bahasa pemrograman yang hebat ini, Anda dapat menemukan banyak artikel dan video dari awalSaya menunjukkan kepada Anda cara mengunduh alat yang diperlukan untuk memulai pemrograman, kami semakin naik melalui konsep dasar, melalui konsep pemrograman berorientasi objekstandar, topikstruktur data, akses ke database antara lain, hingga konstruksi aplikasi dengan antarmuka pengguna.
Anda juga dapat menemukan a kursus dari awal tempat saya mengajarkan cara membuat aplikasi seluler di android melalui urutan video langkah demi langkah yang terus diperbarui.
Dan sekarang saya juga akan memulai urutan dari awal di mana kita akan memasuki dunia edisi java Enterprise, menunjukkan cara menyiapkan lingkungan pengembangan dan cara membuat aplikasi web pertama Anda dengan java.
Itu sebabnya saya mengundang Anda untuk mengunjungi codejavu.blogspot.com, untuk mengunjungi saluran saya Cristian Henao dan bahwa mereka sangat menyadari sekuel baru
Mungkin juga menarik bagi Anda.
Apakah ada yang ingin Anda tambahkan atau komentari tentang entri ini? merasa bebas untuk melakukan….dan jika Anda menyukainya, saya mengundang Anda untuk membagikannya y Berlanggananlah dengan mengeklik tombol "Bergabunglah dengan situs ini" untuk mendengar lebih banyak postingan seperti ini 😉