ΧΡΗΣΗ ΤΟΥ ΠΙΝΑΚΑ ΔΕΔΟΜΕΝΩΝ ΣΤΟ JSF.

Παράδειγμα προκαθορισμένου πίνακα.
Σε αυτό το εργαστήριο θα δούμε ένα απλό παράδειγμα που δείχνει πώς να χρησιμοποιήσετε το στοιχείο DataTable, αυτό το στοιχείο μας επιτρέπει να συνδέσουμε έναν πίνακα δεδομένων στη σελίδα μας ως εξής:

Για αυτό το πρώτο παράδειγμα, μόνο το προσυμπληρωμένο στοιχείο θα συνδεθεί από την κλάση bean μας, αργότερα θα δείξει πώς να χειριστείτε τις πληροφορίες του δυναμικά.

Αρχικά, ας δημιουργήσουμε ένα έργο JSF με την ακόλουθη δομή:

Όπως μπορούμε να δούμε, δημιουργούνται 2 κατηγορίες java, η μία αντιστοιχεί στην κλάση ατόμων που μας επιτρέπει να επεξεργαστούμε τα άτομα που θα δείξουμε στον πίνακά μας και η άλλη στο bean που θα μας επιτρέψει να διαχειριστούμε τον πίνακα μας με τα αντίστοιχα στήλες και εγγραφές.
Η κλάση Person.java μας παρέχει τα βασικά δεδομένα του ατόμου που πρόκειται να δείξουμε στον πίνακα, εδώ προσθέτουμε το αντίστοιχο σύνολο και παίρνουμε μεθόδους, καθώς και έναν κατασκευαστή με παραμέτρους για να συμπληρώσουμε άτομα απευθείας.

Η κλάση TablaBean.java αναφέρεται στον πίνακα και τη διαχείριση των ατόμων σε αυτόν, οι εγγραφές που εμφανίζονται αποθηκεύονται στον τύπο προσώπου ArrayList που, για τους σκοπούς αυτού του οδηγού, συμπληρώνεται στον κατασκευαστή.

Στο index.xhtml δημιουργούμε το στοιχείο DataTable στο οποίο συσχετίζουμε τη λίστα ατόμων απευθείας στην τιμή και στις αντίστοιχες στήλες τα χαρακτηριστικά του φασολιού που αναφέρεται στο var="data", όντας δεδομένα το στοιχείο που αντιπροσωπεύει τα δεδομένα του το αντικείμενο Person σε κάθε γραμμή από τον πίνακα.

Όταν το τρέχουμε θα έχουμε κάτι τέτοιο

Όπως μπορούμε να δούμε, οι πληροφορίες παρουσιάζονται σε λειτουργία πίνακα, καθώς δεν έχουμε συνδέσει ακόμα τα στυλ CSS, εκτιμούμε μόνο τη δομή σε γραμμές και στήλες χωρίς κανένα είδος σχεδίασης, ωστόσο μπορούμε να προσθέσουμε μια ιδιότητα "border" στον πίνακα και ένα περιθώριο που έχει κάτι σαν αυτό:

Τέλος ξέρουμε ότι μπορούμε να το αξιοποιήσουμε να παρουσιάσει τις πληροφορίες με πιο δομημένο τρόπο.

Παράδειγμα διαχείρισης δεδομένων στο DataTable.
Σε αυτήν την ενότητα θα συνεχίσουμε με το προηγούμενο παράδειγμα όπου θα δούμε πώς να χειριστούμε τα δεδομένα του πίνακα για να πραγματοποιήσουμε κοινές διαδικασίες όπως η εγγραφή, η τροποποίηση ή η διαγραφή πληροφοριών.

Προσθέτω ανθρώπους.
Για την εγγραφή ατόμων, θα τροποποιήσουμε τη σελίδα μας index.xhtml στην οποία θα συνδέσουμε τη φόρμα εγγραφής ατόμου. Αυτό το κάνουμε συνδέοντας τα στοιχεία εισόδου και επιλογής σε έναν πίνακα πλέγματος που συσχετίζεται δεόντως με το αντικείμενο "myPerson" στο οποίο αποστέλλονται τα διαφορετικά δεδομένα. Ένα νέο άτομο έχει εγγραφεί στο σύστημά μας.

Όπως βλέπουμε αυτά τα νέα στοιχεία προστίθενται προτού ο πίνακας δεδομένων λάβει ένα αποτέλεσμα όπως αυτό:

Αφού τροποποιήσουμε το ευρετήριο, ας κάνουμε τις απαραίτητες αλλαγές στην κλάση TableBean.java, γιατί σε αυτό το παράδειγμα θα συνεχίσουμε να χρησιμοποιούμε το προεπιλεγμένο επίπεδο εμβέλειας, οπότε ας κάνουμε τη λίστα των ατόμων στατική ώστε να μπορεί να χειριστεί χωρίς προβλήματα. εξαλείψτε το συμπλήρωμα λίστας, καθώς η ιδέα είναι να μπορείτε να εγγράφετε άτομα μέσω μιας φόρμας εγγραφής.

Όπως μπορούμε να δούμε, όταν ορίζουμε τη λίστα ως στατική, δημιουργούμε το στιγμιότυπο της σε επίπεδο κλάσης, δεν το κάνουμε αυτό στον κατασκευαστή καθώς αυτό θα κληθεί σε διαφορετικές περιπτώσεις από το jsf μας, το οποίο θα προκαλούσε μια νέα παρουσία της λίστας που θα προκαλούσε να χάσουμε τις πληροφορίες που θα μπορούσε να περιέχει.

Επιπλέον, προσθέσαμε ένα αντικείμενο τύπου Person για να μπορούμε να διαχειριστούμε τα δεδομένα εγγραφής και προσθέσαμε τη μέθοδο "aggregarPersona()" που επιτρέπει την προσθήκη ενός νέου στοιχείου στη λίστα και καλείται από το κουμπί jsf, αργότερα δημιουργούμε μια νέα παρουσία του το αντικείμενο «minhaPersona» που θα επιτρέψει τον καθαρισμό της φόρμας εγγραφής.


Κατά την εκτέλεση του συστήματος θα δούμε την ακόλουθη συμπεριφορά:

Αρχικά η φόρμα είναι κενή και εμφανίζεται και η κεφαλίδα του πίνακα μας αλλά χωρίς περιεχόμενο (θυμηθείτε ότι καταργήσαμε τη συμπλήρωση στη λίστα), έτσι ώστε η κεφαλίδα να μην εμφανίζεται όταν δεν υπάρχουν ακόμη εγγεγραμμένα άτομα, οπότε χρησιμοποιούμε το « rendered” ιδιότητα όπου επικυρώνουμε ότι το μήκος της λίστας είναι μεγαλύτερο από μηδέν, διαφορετικά δεν θα πρέπει να εμφανίζει τις κεφαλίδες. (Η λειτουργία αυτού του ακινήτου θα συζητηθεί λεπτομερώς αργότερα)

Καθώς προσθέτουμε άτομα, αποθηκεύονται στη λίστα και παρουσιάζονται στον πίνακα δεδομένων

Εξαιρέστε τους ανθρώπους.
Αφού εγγράψουμε επιτυχώς άτομα στη λίστα μας, μπορούμε να τα αφαιρέσουμε από αυτήν, γι' αυτό θα προσθέσουμε μια νέα στήλη ενεργειών στο dataTable μας που θα περιέχει έναν σύνδεσμο προς τη μέθοδο "eliminarPerson()" που θα δημιουργήσουμε στο bean μας

Για αυτό τροποποιούμε το index.xhtml όπου μετά τη στήλη «Φύλο» θα προσθέσουμε τη στήλη «Ενέργειες»

Όπως μπορούμε να δούμε, χρησιμοποιούμε ένα στοιχείο και στην ενέργεια ονομάζουμε τη μέθοδο “eliminarPersona()” στην οποία θα στείλουμε την τιμή “data” ως παράμετρο, θυμόμαστε ότι τα δεδομένα είναι ισοδύναμα με το αντικείμενο της λίστας που εμφανίζεται σε μια συγκεκριμένη γραμμή.

Αργότερα, στην κλάση TablaBean.java, προσθέτουμε τη μέθοδο "eliminarPersona()" που λαμβάνει ως παράμετρο το αντικείμενο πρόσωπο που θέλουμε να διαγράψουμε, αυτό αντιστοιχεί στα "δεδομένα" που στέλνουμε από το jsf και ισοδυναμεί με το άτομο στη γραμμή που θέλουμε να διαγράψουμε, οπότε αφαιρέστε το από τη λίστα.

Κατά την εκτέλεση του συστήματος θα έχουμε τα εξής:

Και κάθε φορά που διαγράφουμε μια εγγραφή μέσω του αντίστοιχου συνδέσμου, ο πίνακας θα ενημερώνεται

Επεξεργασία ατόμων.
Αφού εγγράψουμε και διαγράψουμε επιτυχώς άτομα από τη λίστα μας, μπορούμε να τα τροποποιήσουμε, γι' αυτό θα τροποποιήσουμε τον πίνακα μας κάνοντάς τον επεξεργάσιμο όταν θέλουμε να ενημερώσουμε ορισμένα από τα δεδομένα, για αυτό θα χρησιμοποιήσουμε ξανά την ιδιότητα "rendered" που θα εμφανίσει ή να αποκρύψετε τις επεξεργάσιμες επιλογές ανάλογα με το τι αποφασίζει ο χρήστης.

Όπως μπορούμε να δούμε σε κάθε μία από τις στήλες, προστίθεται ένα στοιχείο το οποίο θα κρυφτεί από προεπιλογή χάρη στην ιδιότητα "rendered" που επιτρέπει την αποθήκευση αληθών ή ψευδών δεδομένων για εμφάνιση ή απόκρυψη του συνοδευτικού στοιχείου.

Στην περίπτωσή μας το "data.edit" κάνει μια κλήση σε μια δυαδική μεταβλητή (επεξεργασία) που προσθέσαμε στην κλάση Person, εάν η ιδιότητα είναι αληθής τότε θα εμφανίσει το για να επιτρέπεται η επεξεργασία, αλλά αν η ιδιότητα είναι true false (not true) τότε θα εμφανίσει το

Το ίδιο πρέπει να γίνει και για τις στήλες επαγγέλματος, μισθού και φύλου αντίστοιχα, όπου αντί να προστεθεί α στο τελευταίο θα προστεθεί α αφού στη φόρμα χρησιμοποιούμε έναν συνδυασμό επιλογής της ακόλουθης διαδρομής:

Ομοίως, η ιδιότητα που αποδίδεται είναι υποχρεωμένη να εμφανίζει τον συνδυασμό ή να εμφανίζει την ετικέτα ανάλογα με την περίπτωση.

Στη συνέχεια, τροποποιείται η στήλη "Ενέργειες" όπου πριν είχαμε μόνο έναν σύνδεσμο προς "Διαγραφή" τώρα θα προσθέσουμε άλλους 2 συνδέσμους, έναν για "επεξεργασία" και τον άλλο για "αποθήκευση" των πληροφοριών μετά την επεξεργασία τους.

Όπως μπορούμε να δούμε, τώρα υπάρχουν 3 σύνδεσμοι για τις μεθόδους επεξεργασίας, αποθήκευσης και διαγραφής αντίστοιχα, ωστόσο η επεξεργασία και η αποθήκευση έχουν την ιδιότητα rendered που καθιστά ορατούς μόνο 2 από τους 3 συνδέσμους κάθε φορά (θυμηθείτε ότι η απόδοση περιέχει true ή false ανάλογα με την συνθήκη ) οπότε από προεπιλογή ο σύνδεσμος διαγραφής θα εμφανίζεται πάντα καθώς δεν έχει την ιδιότητα απόδοσης, ενώ η επεξεργασία και η αποθήκευση δεν θα εμφανίζονται ποτέ μαζί. (σας επιτρέπει να προσθέσετε ένα κενό μεταξύ των συνδέσμων)

Εσωτερικά σε επίπεδο γραφικών, ο πίνακας δεδομένων θα μοιάζει με αυτό:

Αν και γραφικά μπορείτε να δείτε όλα τα στοιχεία μαζί, είναι σημαντικό να καταστήσετε πολύ σαφές ότι η ιδιότητα απόδοσης θα εμφανίζει μόνο τα στοιχεία ανάλογα με την τιμή true ή false εκείνη τη στιγμή.

Μετά την τροποποίηση του index.xhtml, τώρα ήρθε η ώρα να τροποποιήσετε την κλάση Person.java, στην οποία προστίθεται η ιδιότητα "επεξεργασία" που χρησιμοποιείται από την απόδοση που αναφέρεται παραπάνω.

Όπως μπορούμε να δούμε, ένα νέο boolean χαρακτηριστικό συνδέεται με το αντίστοιχο σύνολο και get. Επίσης, για να ταιριάζει με τη δομή της άσκησης, προσθέσαμε την ιδιότητα στον παραμετροποιημένο κατασκευαστή, αν και δεν χρησιμοποιείται πλέον σε αυτό το σημείο της άσκησης.

Με αυτόν τον τρόπο, κάθε φορά που το rendered=”#{data.edit}” γίνεται στο index.xhtml, θα καλούσε αυτή τη μεταβλητή, η οποία θα επέτρεπε την εμφάνιση ή την απόκρυψη στοιχείων ανάλογα με την περίπτωση.

Τέλος, και ήδη με τις προηγούμενες τροποποιήσεις, προχωράμε στην τροποποίηση της κλάσης Bean όπου πρέπει να προσθέσουμε τις αντίστοιχες μεθόδους διαγραφής και αποθήκευσης που καλούνται από το πεδίο «Ενέργειες».

Όπως μπορούμε να δούμε, η μέθοδος editPersona() λαμβάνει ένα αντικείμενο προσώπου (από την κλήση jsf, όπως ακριβώς γίνεται στη μέθοδο διαγραφής) και η ιδιότητά της "edit" τροποποιείται στέλνοντάς της την τιμή true, η οποία θα επιτρέψει αυτήν την εγγραφή να κρύψει το και δείξτε το και το για να κάνετε την επιθυμητή αλλαγή.

Από την άλλη πλευρά, η μέθοδος savePersona() θα είναι υπεύθυνη για την αλλαγή κάθε ιδιότητας "επεξεργασία" όλων των αντικειμένων της λίστας σε false, έτσι ώστε ο πίνακας δεδομένων να αποκαθίσταται με τις τιμές των ατόμων και όχι με τα επεξεργάσιμα στοιχεία.

Κατά την εκτέλεση του συστήματος θα έχουμε τα εξής:

Και όταν πατάτε επεξεργασία το σύστημα αλλάζει σε:

Όπως φαίνεται, όταν κάνετε κλικ στον σύνδεσμο επεξεργασίας, τα επεξεργάσιμα στοιχεία εμφανίζονται αυτόματα ενώ τα μη επεξεργάσιμα είναι κρυμμένα, ομοίως ο σύνδεσμος επεξεργασίας εξαφανίζεται για να ανοίξει ο τόπος για τον σύνδεσμο αποθήκευσης όπως εξηγήθηκε παραπάνω.

Και έτοιμο!!!

Στο blog μου και στο κανάλι μου μοιράζομαι υλικό για αυτήν την υπέροχη γλώσσα προγραμματισμού, μπορείτε να βρείτε πολλά άρθρα και βίντεο από την αρχήΣας δείχνω πώς να κατεβάσετε τα απαραίτητα εργαλεία για να ξεκινήσετε τον προγραμματισμό, ανεβαίνουμε όλο και περισσότερο μέσα από τις βασικές έννοιες, περνώντας από το αντικειμενοστραφής έννοιες προγραμματισμούπρότυπα, Θέματαδομές δεδομένων, πρόσβαση σε βάσεις δεδομένων μεταξύ άλλων, στην κατασκευή εφαρμογές με διεπαφές χρήστη.

Επίσης μπορείτε να βρείτε ένα μάθημα από την αρχή όπου διδάσκω πώς να δημιουργώ εφαρμογές για κινητά στο android μέσω μιας ακολουθίας βίντεο βήμα προς βήμα που ενημερώνεται συνεχώς.

Και τώρα θα ξεκινήσω επίσης τη σειρά από την αρχή, όπου θα μπούμε στον κόσμο της java Enterprise edition, θα σας δείξουμε πώς να ρυθμίσετε το περιβάλλον ανάπτυξης και πώς να δημιουργήσετε τις πρώτες σας διαδικτυακές εφαρμογές με java.

Γι' αυτό σας προσκαλώ να επισκεφτείτε το codejavu.blogspot.com, να επισκεφθείτε το κανάλι μου Cristian Henao και ότι γνωρίζουν πολύ καλά τις νέες συνέχειες

Μπορεί επίσης να σας ενδιαφέρει.

Υπάρχει κάτι που θέλετε να προσθέσετε ή να σχολιάσετε σχετικά με αυτήν την καταχώρηση; μη διστάσετε να κάνετε….και αν σας άρεσε, σας προσκαλώ να το μοιραστείτε y Εγγραφείτε κάνοντας κλικ στο κουμπί "Εγγραφή σε αυτόν τον ιστότοπο" για να ακούσετε περισσότερες αναρτήσεις όπως αυτή 😉