VERWENDUNG DER DATENTABELLE IN JSF.

Beispiel vordefinierte Tabelle.
In diesem Lab sehen wir ein einfaches Beispiel, das zeigt, wie die DataTable-Komponente verwendet wird. Mit diesem Element können wir eine Datentabelle wie folgt mit unserer Seite verknüpfen:

Für dieses erste Beispiel wird nur die vorbelegte Komponente von unserer Bean-Klasse verlinkt, später wird gezeigt, wie man ihre Informationen dynamisch manipuliert.

Lassen Sie uns zunächst ein JSF-Projekt mit der folgenden Struktur erstellen:

Wie wir sehen können, werden 2 Java-Klassen erstellt, eine entspricht der Personenklasse, die es uns ermöglicht, die Personen zu verarbeiten, die wir in unserer Tabelle anzeigen werden, und die andere der Bean, die es uns ermöglicht, unsere Tabelle mit den jeweiligen zu verwalten Spalten und Aufzeichnungen.
Die Klasse Person.java liefert uns die grundlegenden Daten der Person, die wir in der Tabelle zeigen werden, hier fügen wir die entsprechenden Set- und Get-Methoden hinzu, sowie einen Konstruktor mit Parametern, um Personen direkt zu füllen.

Die Klasse TablaBean.java bezieht sich auf die Tabelle und die Verwaltung von Personen darin, die angezeigten Datensätze werden im Personentyp ArrayList gespeichert, der für den Zweck dieser Anleitung im Konstruktor gefüllt wird.

In index.xhtml erstellen wir die DataTable-Komponente, der wir die Liste der Personen direkt im Wert und in den jeweiligen Spalten die Attribute der Bean zuordnen, auf die in var="data" verwiesen wird, wobei data das Element ist, das die Daten von darstellt das Person-Objekt in jeder Zeile der Tabelle.

Wenn wir es ausführen, werden wir so etwas haben

Wie wir sehen können, werden die Informationen im Tabellenmodus dargestellt, da wir die CSS-Stile noch nicht verknüpft haben, schätzen wir nur die Struktur in Zeilen und Spalten ohne jegliches Design, jedoch können wir der Tabelle eine „Rahmen“-Eigenschaft hinzufügen und eine Marge mit ungefähr so:

Endlich wissen wir, was wir nutzen können um die Informationen strukturierter darzustellen.

Beispiel für die Datenverwaltung in DataTable.
In diesem Abschnitt fahren wir mit dem vorherigen Beispiel fort, in dem wir sehen, wie Tabellendaten bearbeitet werden, um allgemeine Prozesse wie das Registrieren, Ändern oder Löschen von Informationen auszuführen.

Leute hinzufügen.
Um Personen zu registrieren, ändern wir unsere index.xhtml-Seite, auf die wir das Personenregistrierungsformular verlinken. Dazu verknüpfen wir die Eingabe- und Auswahlkomponenten in einem Grid-Panel, das dem Objekt „myPerson“ zugeordnet ist, an das die verschiedenen Daten gesendet werden, eine neue Person wird in unserem System registriert.

Wie wir sehen, werden diese neuen Elemente hinzugefügt, bevor die DataTable ein Ergebnis wie dieses erhält:

Nachdem wir den Index geändert haben, nehmen wir die notwendigen Änderungen in der Klasse TableBean.java vor, da wir in diesem Beispiel weiterhin die Standardbereichsebene verwenden werden, also lassen Sie uns die Liste der Personen statisch machen, damit sie problemlos bearbeitet werden kann, werden wir zusätzlich tun das Auffüllen der Liste eliminieren, da die Idee darin besteht, Personen über ein Registrierungsformular registrieren zu können.

Wie wir beim Definieren der Liste als statisch sehen können, erstellen wir ihre Instanz auf Klassenebene, wir tun dies nicht im Konstruktor, da dies bei verschiedenen Gelegenheiten von unserem jsf aufgerufen wird, was eine neue Instanz der Liste verursachen würde uns, die darin enthaltenen Informationen zu verlieren.

Zusätzlich haben wir ein Objekt vom Typ Person hinzugefügt, um die Registrierungsdaten verwalten zu können, und die Methode „aggregarPersona()“ hinzugefügt, die das Hinzufügen eines neuen Elements zur Liste ermöglicht und über die jsf-Schaltfläche aufgerufen wird, später generieren wir eine neue Instanz von das „minhaPersona“-Objekt, das die Reinigung des Registrierungsformulars ermöglicht.


Beim Ausführen des Systems sehen wir das folgende Verhalten:

Anfangs ist das Formular leer und die Kopfzeile unserer Tabelle wird ebenfalls angezeigt, aber ohne Inhalt (denken Sie daran, dass wir das Ausfüllen der Liste eliminiert haben), sodass die Kopfzeile nicht angezeigt wird, wenn noch keine Personen registriert sind, also verwenden wir das „ rendered“-Eigenschaft, in der wir validieren, dass die Länge der Liste größer als Null ist, andernfalls sollten die Header nicht angezeigt werden. (Der Betrieb dieser Eigenschaft wird später im Detail besprochen)

Wenn wir Personen hinzufügen, werden sie in der Liste gespeichert und in der DataTable angezeigt

Personen ausschließen.
Nachdem wir Personen erfolgreich in unserer Liste registriert haben, können wir sie daraus entfernen. Dazu fügen wir unserer dataTable eine neue Spalte mit Aktionen hinzu, die einen Link zur Methode „eliminarPerson()“ enthält, die wir in unserer Bean erstellen werden

Dazu ändern wir die index.xhtml, wo wir nach der Spalte „Sex“ die Spalte „Actions“ hinzufügen.

Wie wir sehen können, verwenden wir eine Komponente und in der Aktion rufen wir die Methode „eliminarPersona()“ auf, an die wir den Wert „data“ als Parameter senden, wobei wir uns daran erinnern, dass data dem Objekt der Liste entspricht, das in einer bestimmten Zeile angezeigt wird.

Später fügen wir in der Klasse TablaBean.java die Methode „eliminarPersona()“ hinzu, die als Parameter das Personenobjekt empfängt, das wir löschen möchten, dies entspricht den „Daten“, die wir von der jsf senden, und ist äquivalent zu die Person in der Zeile, die wir löschen möchten, also entfernen Sie sie aus der Liste.

Beim Ausführen des Systems haben wir Folgendes:

Und jedes Mal, wenn wir einen Datensatz über den entsprechenden Link löschen, wird die Tabelle aktualisiert

Personen bearbeiten.
Nachdem wir Personen erfolgreich registriert und aus unserer Liste gelöscht haben, können wir sie ändern. Dazu ändern wir unsere Tabelle, sodass sie bearbeitet werden kann, wenn wir einige der Daten aktualisieren möchten. Dazu verwenden wir erneut die Eigenschaft „gerendert“, die angezeigt wird oder verbergen Sie die bearbeitbaren Optionen, je nachdem, was der Benutzer entscheidet.

Wie wir in jeder der Spalten sehen können, wird eine Komponente hinzugefügt die standardmäßig ausgeblendet wird, dank der Eigenschaft „gerendert“, die es ermöglicht, wahre oder falsche Daten zu speichern, um die zugehörige Komponente anzuzeigen oder auszublenden.

In unserem Fall ruft „data.edit“ eine boolesche Variable (edit) auf, die wir in der Person-Klasse hinzugefügt haben. Wenn die Eigenschaft wahr ist, wird sie angezeigt um die Bearbeitung zuzulassen, aber wenn die Eigenschaft wahr, falsch (nicht wahr) ist, wird die angezeigt

Dasselbe gilt für die Spalten Beruf, Gehalt und Geschlecht, in denen statt a zu letzterem wird a hinzugefügt da wir im Formular eine Auswahlkombination des folgenden Pfades verwenden:

Ebenso muss die gerenderte Eigenschaft je nach Fall die Combo oder das Label anzeigen.

Anschließend wird die Spalte „Aktionen“ geändert, wo wir vorher nur einen Link zum „Löschen“ hatten, jetzt werden wir 2 weitere Links hinzufügen, einen zum „Bearbeiten“ und den anderen zum „Speichern“ der Informationen nach der Bearbeitung.

Wie wir sehen können, gibt es jetzt jeweils 3 Links für die Methoden edit, save und delete, jedoch haben edit und save die gerenderte Eigenschaft, die nur 2 der 3 Links gleichzeitig sichtbar macht (denken Sie daran, dass der gerenderte Link wahr oder falsch enthält abhängig von der Bedingung ), sodass standardmäßig der Löschlink immer angezeigt wird, da er nicht über die gerenderte Eigenschaft verfügt, während Bearbeiten und Speichern niemals zusammen angezeigt werden. (ermöglicht das Einfügen eines Leerzeichens zwischen Links)

Intern auf grafischer Ebene würde die dataTable so aussehen:

Obwohl Sie grafisch alle Komponenten zusammen sehen können, ist es wichtig, sehr deutlich zu machen, dass die gerenderte Eigenschaft nur die Komponenten abhängig vom wahren oder falschen Wert zu diesem Zeitpunkt anzeigt.

Nach der Änderung der index.xhtml ist es nun an der Zeit, die Klasse Person.java zu ändern, in der die Eigenschaft „edit“ hinzugefügt wird, die vom oben erwähnten Rendering verwendet wird.

Wie wir sehen können, wird ein neues boolesches Attribut mit seinem jeweiligen set und get verknüpft. Außerdem haben wir die Eigenschaft zum parametrisierten Konstruktor hinzugefügt, um sie an die Struktur der Übung anzupassen, obwohl sie an diesem Punkt der Übung nicht mehr verwendet wird.

Auf diese Weise würde jedes Mal, wenn rendered="#{data.edit}" in index.xhtml ausgeführt wird, diese Variable aufgerufen werden, was das Ein- oder Ausblenden von Komponenten je nach Fall ermöglichen würde.

Abschließend und bereits mit den vorherigen Änderungen modifizieren wir die Bean-Klasse, wo wir die entsprechenden Methoden zum Löschen und Speichern hinzufügen müssen, die aus dem Feld „Aktionen“ aufgerufen werden.

Wie wir sehen können, empfängt die editPersona()-Methode ein Personenobjekt (aus dem jsf-Aufruf, genauso wie es in der delete-Methode gemacht wird) und seine „edit“-Eigenschaft wird modifiziert, indem ihr der Wert true gesendet wird, was diesen Datensatz erlaubt die zu verstecken und zeigen die und das um die gewünschte Änderung vorzunehmen.

Andererseits ist die savePersona()-Methode dafür verantwortlich, jede „edit“-Eigenschaft aller Objekte in der Liste auf „false“ zu ändern, sodass die dataTable mit den Werten der Personen und nicht mit den bearbeitbaren Elementen wiederhergestellt wird.

Beim Ausführen des Systems haben wir Folgendes:

Und wenn Sie auf Bearbeiten drücken, ändert sich das System zu:

Wie zu sehen ist, werden beim Anklicken des Bearbeitungslinks die bearbeitbaren Komponenten automatisch angezeigt, während die nicht bearbeitbaren ausgeblendet werden, ebenso verschwindet der Bearbeitungslink, um Platz für den Speicherlink zu machen, wie oben erläutert.

Und fertig!!!

Auf meinem Blog und auf meinem Kanal habe ich Material über diese großartige Programmiersprache geteilt, Sie können viele Artikel finden und Videos von Grund auf neuIch zeige Ihnen, wie Sie die notwendigen Tools herunterladen, um mit dem Programmieren zu beginnen. Wir gehen immer mehr durch die grundlegenden Konzepte und gehen durch die objektorientierte ProgrammierkonzepteNormen, ThemenDatenstrukturen, Zugriff auf Datenbanken ua bis hin zur Konstruktion Anwendungen mit Benutzeroberflächen.

Auch finden Sie eine Kurs von Grund auf neu, in dem ich lehre, wie man mobile Apps auf Android erstellt durch eine Schritt-für-Schritt-Videosequenz, die ständig aktualisiert wird.

Und jetzt beginne ich auch die Sequenz von vorne, wo wir in die Welt der Java Enterprise Edition einsteigen, Ihnen zeigen, wie Sie die Entwicklungsumgebung einrichten und wie Sie Ihre ersten Webanwendungen mit Java erstellen.

Deshalb lade ich Sie ein, codejavu.blogspot.com zu besuchen, zu besuchen mein Kanal Cristian Henao und dass sie sich der neuen Fortsetzungen sehr bewusst sind

Es könnte Sie auch interessieren.

Möchten Sie etwas zu diesem Eintrag hinzufügen oder kommentieren? gerne machen ….und wenn es dir gefallen hat, lade ich dich ein, es zu teilen j Abonnieren Sie, indem Sie auf die Schaltfläche „Dieser Website beitreten“ klicken, um weitere Beiträge wie diesen zu hören 😉