KORZYSTANIE Z TABELI DANYCH W JSF.

Przykładowa predefiniowana tabela.
W tym laboratorium zobaczymy prosty przykład pokazujący, jak używać komponentu DataTable, ten element pozwala nam połączyć tabelę danych z naszą stroną w następujący sposób:

W tym pierwszym przykładzie tylko wstępnie wypełniony komponent zostanie połączony z naszą klasą fasoli, później pokaże, jak dynamicznie manipulować jego informacjami.

Na początek utwórzmy projekt JSF o następującej strukturze:

Jak widzimy, tworzone są 2 klasy Java, jedna odpowiada klasie osoby, która pozwala nam przetwarzać osoby, które zamierzamy pokazać w naszej tabeli, a druga fasoli, która pozwoli nam zarządzać naszą tabelą z odpowiednimi kolumny i rekordy.
Klasa Person.java dostarcza nam podstawowych danych osoby, którą będziemy pokazywać w tabeli, tutaj dodajemy odpowiednie metody set i get oraz konstruktor z parametrami do bezpośredniego zapełniania osób.

Klasa TablaBean.java odnosi się do tabeli i zarządzania w niej ludźmi, wyświetlane rekordy są przechowywane w typie osoby ArrayList, który na potrzeby tego przewodnika jest wypełniony w konstruktorze.

W index.xhtml tworzymy komponent DataTable, do którego przypisujemy listę osób bezpośrednio w wartości iw odpowiednich kolumnach atrybuty komponentu bean, do którego odwołuje się var="data", czyli data element reprezentujący dane obiekt Person w każdym wierszu tabeli.

Podczas uruchamiania będziemy mieli coś takiego

Jak widać informacje są prezentowane w trybie tabelarycznym, ponieważ nie łączyliśmy jeszcze stylów CSS, doceniamy tylko strukturę w wierszach i kolumnach bez jakiegokolwiek projektu, jednak możemy dodać właściwość „border” do tabeli i margines mający coś takiego:

Wreszcie wiemy, z czego możemy skorzystać przedstawienie informacji w bardziej uporządkowany sposób.

Przykład zarządzania danymi w DataTable.
W tej sekcji będziemy kontynuować poprzedni przykład, w którym zobaczymy, jak manipulować danymi tabeli w celu przeprowadzenia typowych procesów, takich jak rejestrowanie, modyfikowanie lub usuwanie informacji.

Dodaj ludzi.
Aby zarejestrować osoby, zmodyfikujemy naszą stronę index.xhtml, do której umieścimy link do formularza rejestracji osoby. Robimy to poprzez połączenie elementów wprowadzania i wyboru w panelu siatki należycie powiązanym z obiektem „myPerson”, do którego wysyłane są różne dane. W naszym systemie rejestrowana jest nowa osoba.

Jak widzimy, te nowe elementy są dodawane przed uzyskaniem przez DataTable takiego wyniku:

Po zmodyfikowaniu indeksu dokonajmy niezbędnych zmian w klasie TableBean.java, ponieważ w tym przykładzie będziemy nadal używać domyślnego poziomu zasięgu, więc zróbmy listę osób statyczną, aby można było nią bez problemów manipulować, dodatkowo wyeliminuj wypełnianie listy, ponieważ chodzi o to, aby móc rejestrować osoby za pomocą formularza rejestracyjnego.

Jak widać definiując listę jako statyczną tworzymy jej instancję na poziomie klasy, nie robimy tego w konstruktorze gdyż będzie ona wywoływana przy różnych okazjach przez nasz jsf co spowodowałoby nową instancję listy co spowodowałoby nas do utraty informacji, które może zawierać.

Dodatkowo dodaliśmy obiekt Person-type, aby móc zarządzać danymi rejestracyjnymi oraz dodaliśmy metodę „aggregarPersona()” pozwalającą na dodanie nowego elementu do listy i wywoływaną z przycisku jsf, później generujemy nową instancję obiekt „minhaPersona”, który umożliwi wyczyszczenie formularza rejestracyjnego.


Podczas uruchamiania systemu zobaczymy następujące zachowanie:

Początkowo formularz jest pusty, a nagłówek naszej tabeli również jest wyświetlany, ale bez zawartości (pamiętaj, że wyeliminowaliśmy uzupełnianie listy), aby nagłówek nie wyświetlał się, gdy nie ma jeszcze zarejestrowanych osób, więc używamy „ rendered”, w której sprawdzamy, czy długość listy jest większa od zera, w przeciwnym razie nie powinna pokazywać nagłówków. (Działanie tej właściwości zostanie szczegółowo omówione później)

Gdy dodajemy osoby, są one zapisywane na liście i prezentowane w DataTable

Wyklucz osoby.
Po pomyślnym zarejestrowaniu osób na naszej liście możemy je z niej usunąć, w tym celu dodamy nową kolumnę akcji w naszej dataTable, która będzie zawierała link do metody „eliminarPerson()”, którą utworzymy w naszym beanie

W tym celu modyfikujemy plik index.xhtml, gdzie po kolumnie „Seks” dodamy kolumnę „Działania”

Jak widać, używamy komponentu aw akcji wywołujemy metodę „eliminarPersona()”, do której jako parametr prześlemy wartość „data”, pamiętając, że dane są odpowiednikiem obiektu listy, który jest wyświetlany w określonej linii.

Później w klasie TablaBean.java dodajemy metodę „eliminarPersona()”, która otrzymuje jako parametr person obiekt, który chcemy usunąć, odpowiada to „danym”, które wysyłamy z jsf i jest równoważne osoba w wierszu, którą chcemy usunąć, a następnie usuń ją z listy.

Podczas uruchamiania systemu będziemy mieli:

I za każdym razem, gdy usuniemy rekord za pomocą odpowiedniego łącza, tabela zostanie zaktualizowana

Edytuj osoby.
Po pomyślnym zarejestrowaniu i usunięciu osób z naszej listy możemy je zmodyfikować, w tym celu zmodyfikujemy naszą tabelę, czyniąc ją edytowalną, gdy chcemy zaktualizować niektóre dane, w tym celu ponownie użyjemy właściwości „renderowane”, która pokaże lub ukryć opcje edytowalne w zależności od decyzji użytkownika.

Jak widzimy w każdej z kolumn, dodawany jest składnik który będzie domyślnie ukryty dzięki właściwości „rendered”, która umożliwia przechowywanie prawdziwych lub fałszywych danych w celu pokazania lub ukrycia towarzyszącego komponentu.

W naszym przypadku „data.edit” wywołuje zmienną logiczną (edit), którą dodaliśmy w klasie Person, jeśli właściwość ma wartość true, wyświetli aby zezwolić na edycję, ale jeśli właściwość ma wartość true false (nie true), wyświetli się

To samo należy zrobić odpowiednio dla kolumn zawodu, wynagrodzenia i płci, gdzie zamiast dodawać a do tego ostatniego zostanie dodany a ponieważ w formularzu używamy kombinacji wyboru o następującej ścieżce:

Podobnie renderowana właściwość musi pokazywać kombinację lub etykietę, zależnie od przypadku.

Następnie modyfikowana jest kolumna „Akcje”, gdzie wcześniej mieliśmy tylko link „Usuń”, teraz dodamy jeszcze 2 linki, jeden do „edycji”, a drugi do „zapisywania” informacji po ich edycji.

Jak widać teraz istnieją 3 linki odpowiednio dla metod edit, save i delete, jednak edit i save mają właściwość rendered, która sprawia, że tylko 2 z 3 linków są widoczne naraz (pamiętajże renderowany zawiera true lub false w zależności od warunku ), więc domyślnie łącze usuwania będzie zawsze wyświetlane, ponieważ nie ma renderowanej właściwości, podczas gdy edycja i zapisywanie nigdy nie będą widoczne razem. (pozwala dodać spację między linkami)

Wewnętrznie na poziomie graficznym dataTable wyglądałaby tak:

Chociaż graficznie możesz zobaczyć wszystkie komponenty razem, ważne jest, aby bardzo wyraźnie zaznaczyć, że renderowana właściwość pokaże tylko komponenty w zależności od wartości true lub false w danym momencie.

Po zmodyfikowaniu pliku index.xhtml przyszedł czas na modyfikację klasy Person.java, w której dodano właściwość „edit” używaną przez wspomniane renderowanie.

Jak widzimy, nowy atrybut boolowski jest powiązany z odpowiednim zestawem i get. Ponadto, aby dopasować strukturę ćwiczenia, dodaliśmy tę właściwość do konstruktora parametrycznego, chociaż nie jest ona już używana w tym momencie ćwiczenia.

W ten sposób za każdym razem, gdy rendered=”#{data.edit}” zostanie wykonany w index.xhtml, wywołałoby to tę zmienną, co pozwoliłoby na pokazanie lub ukrycie komponentów w zależności od przypadku.

Wreszcie, już z poprzednimi zmianami, przystępujemy do modyfikacji klasy Bean, w której musimy dodać odpowiednie metody usuwania i zapisywania, które są wywoływane z pola „Akcje”.

Jak widzimy, metoda editPersona() otrzymuje obiekt osoby (z wywołania jsf, tak jak to się dzieje w metodzie delete) i jej właściwość „edit” jest modyfikowana poprzez przesłanie jej wartości true, co pozwoli na ten zapis aby ukryć i pokaż i aby dokonać pożądanej zmiany.

Z drugiej strony metoda savePersona() będzie odpowiedzialna za zmianę każdej właściwości „edit” wszystkich obiektów na liście na false, dzięki czemu dataTable zostanie przywrócona z wartościami osób, a nie z edytowalnymi elementami.

Podczas uruchamiania systemu będziemy mieli:

A po naciśnięciu edytuj system zmienia się na:

Jak widać, po kliknięciu łącza edycji edytowalne komponenty są automatycznie wyświetlane, podczas gdy te nieedytowalne są ukryte, podobnie łącze edycji znika, aby zrobić miejsce dla łącza zapisu, jak wyjaśniono powyżej.

I gotowy!!!

Na moim blogu i kanale udostępniam materiały dotyczące tego wspaniałego języka programowania, można znaleźć wiele artykułów i wideo od podstawPokażę ci, jak pobrać niezbędne narzędzia, aby rozpocząć programowanie, przechodzimy coraz bardziej przez podstawowe pojęcia, przechodząc przez koncepcje programowania obiektowegostandardy, tematystruktury danych, dostęp do baz danych m.in. do budowy aplikacje z interfejsami użytkownika.

Można również znaleźć A kurs od podstaw, na którym uczę tworzenia aplikacji mobilnych na Androida poprzez sekwencję wideo krok po kroku, która jest stale aktualizowana.

A teraz rozpocznę też sekwencję od podstaw, w której wkroczymy w świat Javy Enterprise Edition, pokażemy, jak skonfigurować środowisko programistyczne i jak stworzyć swoje pierwsze aplikacje internetowe w Javie.

Dlatego zapraszam na codejavu.blogspot.com, do odwiedzenia mój kanał Cristian Henao i że są bardzo świadomi nowych sequeli

Może Cię to również zainteresować.

Czy jest coś, co chciałbyś dodać lub skomentować na temat tego wpisu? śmiało rób….a jeśli Ci się podobało to zapraszam do udostępniania Y Zasubskrybuj, klikając przycisk „Dołącz do tej witryny”, aby usłyszeć więcej postów takich jak ten 😉