JSF'DEKİ VERİ TABLOSUNU KULLANMAK.

Örnek önceden tanımlanmış tablo.
Bu laboratuvarda DataTable bileşeninin nasıl kullanılacağını gösteren basit bir örnek göreceğiz; bu öğe, bir veri tablosunu sayfamıza şu şekilde bağlamamızı sağlar:

Bu ilk örnekte, fasulye sınıfımızdan yalnızca önceden doldurulmuş bileşene bağlantı verilecek, daha sonra bilgilerinin dinamik olarak nasıl değiştirileceği gösterilecektir.

Başlangıçta aşağıdaki yapıya sahip bir JSF projesi oluşturacağız:

Gördüğümüz gibi 2 adet Java sınıfı oluşturuldu, biri tablomuzda göstereceğimiz kişileri işlememizi sağlayan kişi sınıfına, diğeri ise ilgili tablolarla tablomuzu yönetmemizi sağlayacak fasulyeye karşılık geliyor. sütunlar ve kayıtlar.
Person.java sınıfı bize tabloda göstereceğimiz kişinin temel verilerini sağlar; burada ilgili seti ve get yöntemlerini ve ayrıca kişileri doğrudan dolduracak parametrelere sahip bir kurucuyu ekliyoruz.

TablaBean.java sınıfı, tabloyu ve içindeki kişilerin yönetimini ifade eder; görüntülenen kayıtlar, bu kılavuzun amaçları doğrultusunda yapıcıya doldurulan ArrayList kişi türünde saklanır.

index.xhtml'de, kişi listesini doğrudan değerde ve ilgili sütunlarda var=”data”da referans verilen fasulyenin niteliklerini ilişkilendirdiğimiz DataTable bileşenini yaratırız; veriler, verileri temsil eden öğedir. Tablonun her satırındaki Person nesnesinin.

Çalıştırdığımızda böyle bir şeye sahip olacağız

Görebildiğimiz gibi, bilgiler tablo modunda sunulmaktadır, henüz CSS stillerini bağlamadığımız için, herhangi bir tasarım türü olmadan yalnızca satır ve sütunlardaki yapıyı takdir ediyoruz, ancak tabloya bir "kenarlık" özelliği ekleyebiliriz ve şunun gibi bir şeye sahip bir kenar boşluğu:

Sonunda kullanabileceğimizi biliyoruz Bilgiyi daha yapılandırılmış bir şekilde sunmak.

DataTable'daki veri yönetimi örneği.
Bu bölümde, bilgileri kaydetme, değiştirme veya silme gibi ortak işlemleri gerçekleştirmek için tablo verilerinin nasıl değiştirileceğini göreceğimiz önceki örnekle devam edeceğiz.

İnsanları ekle.
Kişileri kaydetmek için kişi kayıt formunu bağlayacağımız index.xhtml sayfamızı değiştireceğiz. Bunu, giriş ve seçim bileşenlerini, farklı verilerin gönderildiği "myPerson" nesnesi ile usulüne uygun olarak ilişkilendirilmiş bir ızgara paneline bağlayarak yaparız. kayıt nitelikleri, ardından izin verecek bir "addPerson()" yöntemini çağıran bir düğme ilişkilendirilir. sistemimize yeni bir kişi kayıtlıdır.

Gördüğümüz gibi bu yeni öğeler DataTable'dan önce eklenerek şöyle bir sonuç elde edilir:

Index'i değiştirdikten sonra TableBean.java sınıfında gerekli değişiklikleri yapacağız, bu örnekte olduğu gibi varsayılan kapsam seviyesini kullanmaya devam edeceğiz, böylece kişi listesini statik hale getireceğiz, böylece sorunsuz bir şekilde manipüle edilebilecek, Ayrıca, amaç insanları bir kayıt formu aracılığıyla kaydedebilmek olduğundan, listenin doldurulmasını da ortadan kaldıracağız.

Görebildiğimiz gibi, listeyi statik olarak tanımlarken örneğini sınıf düzeyinde oluşturuyoruz, bunu yapıcıda yapmıyoruz çünkü bu, jsf'miz tarafından farklı durumlarda çağrılacak ve bu da listenin yeni bir örneğine neden olacaktır. içerebileceği bilgileri kaybetmemize neden olur.

Ayrıca kayıt verilerini yönetebilmek için Person türünde bir nesne ekledik ve listeye yeni bir öğe eklemeye olanak tanıyan ve jsf butonundan çağrılan “aggregarPersona()” yöntemini ekledik, daha sonra yeni bir örnek oluşturuyoruz. Kayıt formunun temizlenmesini sağlayacak “minhaPessoa” nesnesi.


Sistemi çalıştırırken aşağıdaki davranışı göreceğiz:

Başlangıçta form boştur ve tablomuzun başlığı da görüntülenir ancak herhangi bir içerik olmadan (listenin doldurulmasını ortadan kaldırdığımızı unutmayın), bu nedenle henüz kayıtlı kişi olmadığında başlığı göstermez, bu nedenle Liste boyutunun sıfırdan büyük olduğunu doğruladığımız "rendered" özelliği, aksi takdirde başlıkları göstermemelidir. (Bu mülkün işleyişi daha sonra ayrıntılı olarak ele alınacaktır)

Kişileri ekledikçe listede saklanır ve DataTable'da sunulur.

Kişileri Sil.
Kişileri listemize başarıyla kaydettikten sonra onları listeden kaldırabiliriz, bunun için dataTable'ımıza fasulyemizde oluşturacağımız “eliminatePerson()” yöntemine bir bağlantı içeren yeni bir eylemler sütunu ekleyeceğiz.

Bunu yapmak için index.xhtml dosyasını değiştiriyoruz; burada "Cinsiyet" sütununun ardından "İşlemler" sütununu ekleyeceğiz.

Gördüğümüz gibi bir bileşen kullanıyoruz ve eylemde, verinin belirli bir satırda görüntülenen liste nesnesine eşdeğer olduğunu hatırlayarak parametre olarak "data" değerini göndereceğimiz "eliminarPersona()" yöntemini çağırıyoruz.

Daha sonra TablaBean.java sınıfına silmek istediğimiz kişi nesnesini parametre olarak alan "eliminarPersona()" metodunu ekledik, bu jsf'den gönderdiğimiz "data"ya karşılık geliyor ve içindeki kişiye denk geliyor. Silmek istediğimiz satırı listeden kaldırmak için.

Sistemi çalıştırdığımızda aşağıdakilere sahip olacağız:

Ve ilgili bağlantı aracılığıyla bir kaydı her sildiğimizde tablo güncellenecektir.

Kişileri Düzenle.
Kişileri başarılı bir şekilde listemize kaydettikten ve sildikten sonra, onları değiştirebiliriz, bunun için tablomuzu değiştirerek bazı verileri güncellemek istediğimizde tabloyu düzenlenebilir hale getireceğiz, bunun için tekrar "rendered" özelliğini kullanacağız. veya kullanıcının kararına bağlı olarak düzenlenebilir seçenekleri gizleyin.

Her sütunda görebileceğimiz gibi bir bileşen ekleniyor eşlik eden bileşeni göstermek veya gizlemek için doğru veya yanlış verileri saklamanıza olanak tanıyan "rendered" özelliği sayesinde varsayılan olarak gizlenecektir.

Bizim durumumuzda “data.edit”, Person sınıfına eklediğimiz bir boole değişkenine (edit) çağrı yapar, eğer özellik doğruysa, o zaman şunu gösterecektir: düzenlemeye izin vermek için, ancak özellik true false (true değil) ise, o zaman

Aynı şey sırasıyla meslek, maaş ve cinsiyet sütunları için de yapılmalıdır; ikincisine, bir formda aşağıdaki yolun seçim birleşimini kullandığımız için:

Benzer şekilde, rendered özelliği de duruma bağlı olarak komboyu veya etiketi gösterecek şekilde bağlanır.

Daha sonra, daha önce yalnızca "Sil" bağlantısına sahip olduğumuz "İşlemler" sütunu değiştirildi, şimdi biri "düzenlemek" için, diğeri bilgileri düzenledikten sonra "kaydetmek" için olmak üzere 2 bağlantı daha ekleyeceğiz.

Görebildiğimiz gibi, artık sırasıyla düzenleme, kaydetme ve silme yöntemleri için 3 bağlantı var, ancak düzenleme ve kaydetme, aynı anda 3 bağlantıdan yalnızca 2'sini görünür kılan rendered özelliğine sahip (işlenmiş olanın, bağlı olarak doğru veya yanlış içerdiğini unutmayın). koşuluyla) bu nedenle varsayılan olarak silme bağlantısı, rendered özelliğine sahip olmadığı için her zaman görünür, düzenleme ve kaydetme ise hiçbir zaman birlikte görülmez. (bağlantılar arasına boşluk eklemenizi sağlar)

Dahili olarak, grafiksel düzeyde dataTable şöyle görünecektir:

Grafiksel olarak tüm bileşenleri bir arada görebilseniz de, render özelliğinin yalnızca o andaki doğru veya yanlış değerine bağlı olarak bileşenleri göstereceğinin çok açık olması önemlidir.

index.xhtml dosyasını değiştirdikten sonra sıra yukarıda bahsettiğimiz rendererın kullandığı “edit” özelliğinin eklendiği Person.java sınıfını değiştirmeye geldi.

Görebildiğimiz gibi, yeni bir boole özelliği ilgili set ve get'e bağlanmıştır. Ek olarak, alıştırmanın yapısını ayarlamak için, özelliği parametreli kurucuya ekledik, ancak alıştırmanın bu noktasında artık kullanılmamaktadır.

Bu şekilde, index.xhtml'de rendered=”#{data.edit}” işlemi her yapıldığında, duruma bağlı olarak bileşenlerin gösterilmesine veya gizlenmesine olanak tanıyan bu değişken çağrılacaktır.

Son olarak ve önceki değişikliklerle birlikte, “Actions” alanından çağrılan silme ve kaydetme sırasında ilgili yöntemleri eklememiz gereken Bean sınıfını değiştirmeye başladık.

Görebildiğimiz gibi, editPersona() yöntemi bir kişi nesnesi alır (delete yönteminde yapıldığı gibi jsf çağrısından) ve bu nesnenin "edit" özelliği ona true değeri gönderilerek değiştirilir, bu da bu kaydın gizlenmesine olanak tanır the ve göster ve İstenilen değişikliği yapmak için.

Öte yandan, savePersona() yöntemi, listedeki tüm nesnelerin her bir "edit" özelliğinin false olarak değiştirilmesinden sorumlu olacak, böylece dataTable, düzenlenebilir öğelerle değil, kişilerin değerleriyle geri yüklenecektir.

Sistemi çalıştırdığımızda aşağıdakilere sahip olacağız:

Ve düzenle tuşuna bastığınızda sistem şu şekilde değişir:

Görüldüğü gibi, düzenleme bağlantısına tıklandığında düzenlenebilir bileşenler otomatik olarak gösterilirken düzenlenemeyenler gizlenir, benzer şekilde düzenleme bağlantısı kaybolur ve yukarıda açıklandığı gibi kaydetme bağlantısına yer açılır.

Ve hazır!!!

Blogumda ve kanalımda bu harika programlama dili hakkında materyaller paylaşıyorum, birçok makale ve makale bulabilirsiniz. sıfırdan videolarSize programlamaya başlamak için gerekli araçları nasıl indireceğinizi gösteriyorum, temel kavramlar üzerinden giderek daha fazla ilerliyoruz. nesne yönelimli programlama kavramlarıstandartlar, konularveri yapıları, diğerlerinin yanı sıra veritabanlarına erişim, inşaat kullanıcı arayüzlü uygulamalar.

Ayrıca bir Android'de mobil uygulama oluşturmayı öğrettiğim sıfırdan kurs sürekli güncellenen adım adım video dizisi aracılığıyla.

Ve şimdi Java Enterprise sürümünün dünyasına gireceğimiz diziyi sıfırdan başlatacağım, size geliştirme ortamını nasıl kuracağınızı ve java ile ilk web uygulamalarınızı nasıl oluşturacağınızı göstereceğim.

Bu yüzden sizi codejavu.blogspot.com'u ziyaret etmeye, ziyaret etmeye davet ediyorum. benim kanalım Cristian Henao ve yeni devam filmlerinin çok farkında olduklarını

Ayrıca ilginizi çekebilir.

Bu yazı hakkında eklemek veya yorum yapmak istediğiniz bir şey var mı? yapmaktan çekinmeyin….ve eğer beğendiyseniz sizi paylaşmaya davet ediyorum y Bunun gibi daha fazla gönderi duymak için "Bu siteye katıl" düğmesine tıklayarak abone olun 😉