Приклад попередньо визначеної таблиці.
У цій лабораторній роботі ми побачимо простий приклад, який показує, як використовувати компонент DataTable, цей елемент дозволяє нам зв’язати таблицю даних із нашою сторінкою таким чином:
У цьому першому прикладі лише попередньо заповнений компонент буде зв’язано з нашого класу bean, пізніше буде показано, як динамічно маніпулювати його інформацією.
Спочатку давайте створимо проект JSF із такою структурою:
Як ми бачимо, створено 2 класи Java: один відповідає класу person, який дозволяє нам обробляти людей, яких ми збираємося показати в нашій таблиці, а інший – bean, який дозволить нам керувати нашою таблицею за допомогою відповідних стовпців і записів.
Клас Person.java надає нам основні дані про людину, яку ми збираємося показати в таблиці, сюди ми додаємо відповідні методи set і get, а також конструктор із параметрами для безпосереднього заповнення людей.
Клас TablaBean.java відноситься до таблиці та керування людьми в ній, записи, які відображаються, зберігаються в типі особи ArrayList, який, для цілей цього посібника, заповнюється в конструкторі.
У index.xhtml ми створюємо компонент DataTable, з яким пов’язуємо список людей безпосередньо у значенні, а у відповідних стовпцях – атрибути bean-компонента, на який посилається var="data", будучи data елементом, який представляє дані об’єкт «Людина» в кожному рядку таблиці.
При його запуску ми матимемо щось подібне
Як ми бачимо, інформація представлена в режимі таблиці, оскільки ми ще не пов’язали стилі CSS, ми оцінюємо лише структуру в рядках і стовпцях без будь-якого дизайну, однак ми можемо додати властивість «межа» до таблиці і поле має щось на зразок цього:
Нарешті ми знаємо, що можемо використовувати
Приклад керування даними в DataTable.
У цьому розділі ми продовжимо попередній приклад, де побачимо, як маніпулювати даними таблиці для виконання типових процесів, таких як реєстрація, зміна або видалення інформації.
Додати людей.
Щоб зареєструвати людей, ми змінимо нашу сторінку index.xhtml, на яку ми будемо посилати форму реєстрації особи. Ми робимо це шляхом зв’язування компонентів введення та вибору на панелі сітки, належним чином пов’язаної з об’єктом «myPerson», до якого надсилаються різні дані. Нова особа реєструється в нашій системі.
Як ми бачимо, ці нові елементи додаються до того, як DataTable отримує такий результат:
Після зміни індексу давайте внесемо необхідні зміни в клас TableBean.java, тому що в цьому прикладі ми продовжуватимемо використовувати рівень області за замовчуванням, тому давайте зробимо список людей статичним, щоб ним можна було без проблем керувати, ми додатково усуньте заповнення списку, оскільки ідея полягає в тому, щоб мати можливість реєструвати людей через реєстраційну форму.
Як ми бачимо, визначаючи список як статичний, ми створюємо його екземпляр на рівні класу, ми не робимо цього в конструкторі, оскільки це буде викликатись у різних випадках нашим jsf, що спричинить новий екземпляр списку, який спричинить ми втратимо інформацію, яку він може містити.
Крім того, ми додали об’єкт типу Person, щоб мати можливість керувати реєстраційними даними, і додали метод «aggregarPersona()», який дозволяє додавати новий елемент до списку та викликається за допомогою кнопки jsf, пізніше ми генеруємо новий екземпляр об’єкт «minhaPersona», який дозволить очистити реєстраційну форму.
Під час запуску системи ми побачимо таку поведінку:
Спочатку форма порожня, і заголовок нашої таблиці також відображається, але без будь-якого вмісту (пам’ятайте, що ми усунули заповнення списку), так що заголовок не відображається, коли ще немає зареєстрованих людей, тому ми використовуємо « rendered», де ми перевіряємо, що довжина списку більша за нуль, інакше він не повинен відображати заголовки. (Функція цієї властивості буде детально розглянута пізніше)
Коли ми додаємо людей, вони зберігаються в списку та представлені в DataTable
Виключити людей.
Після того, як ми успішно зареєстрували людей у нашому списку, ми можемо видалити їх з нього, для цього ми додамо новий стовпець дій у нашу таблицю даних, яка міститиме посилання на метод «eliminarPerson()», який ми створимо в нашому компоненті
Для цього ми змінюємо index.xhtml, де після стовпця «Секс» ми додамо стовпець «Дії»
Як бачимо, ми використовуємо компонент
Пізніше в клас TablaBean.java ми додаємо метод «eliminarPersona()», який отримує як параметр об’єкт person, який ми хочемо видалити. Це відповідає «даним», які ми надсилаємо з jsf, і еквівалентно особу в рядку, яку ми хочемо видалити, тож видаліть її зі списку.
При запуску системи ми матимемо наступне:
І кожного разу, коли ми видаляємо запис за відповідним посиланням, таблиця буде оновлюватися
Редагувати людей.
Після успішної реєстрації та видалення людей із нашого списку ми можемо змінити їх, для цього ми змінимо нашу таблицю, зробивши її доступною для редагування, коли ми хочемо оновити деякі дані, для цього ми знову використаємо властивість «rendered», яка відображатиме або приховати параметри, які можна редагувати, залежно від того, що вирішить користувач.
Як ми бачимо, у кожному зі стовпців додається компонент
У нашому випадку «data.edit» здійснює виклик логічної змінної (edit), яку ми додали в клас Person. Якщо властивість має значення true, вона покаже
Те саме потрібно зробити для стовпців професії, зарплати та статі відповідно, де замість додавання a
Подібним чином відображена властивість зобов’язана показувати комбо або показувати мітку залежно від випадку.
Згодом буде змінено стовпець «Дії», де раніше було лише посилання «Видалити», тепер ми додамо ще 2 посилання: одне для «редагування», а інше для «збереження» інформації після її редагування.
Як ми бачимо, зараз є 3 посилання для методів редагування, збереження та видалення відповідно, однак редагування та збереження мають властивість відображення, яка робить лише 2 із 3 посилань видимими одночасно (пам’ятайте, що відтворене містить значення true або false залежно від умови), тому за замовчуванням посилання на видалення завжди з’являтиметься, оскільки воно не має властивості відображення, тоді як редагування та збереження ніколи не відображатимуться разом. (дозволяє додавати пробіл між посиланнями)
Внутрішньо на графічному рівні dataTable виглядатиме так:
Хоча графічно ви можете бачити всі компоненти разом, важливо чітко пояснити, що відображена властивість відображатиме компоненти лише залежно від значення true чи false на даний момент.
Після модифікації index.xhtml настав час змінити клас Person.java, до якого додано властивість «edit», що використовується для рендерингу, згаданого вище.
Як ми бачимо, новий логічний атрибут пов’язаний із відповідним набором і get. Крім того, щоб відповідати структурі вправи, ми додали властивість до параметризованого конструктора, хоча на цьому етапі вправи вона більше не використовується.
Таким чином, кожного разу, коли rendered=”#{data.edit}” виконується в index.xhtml, ця змінна буде викликатися, що дозволить показувати або приховувати компоненти залежно від випадку.
Нарешті, вже з попередніми змінами, ми переходимо до модифікації класу Bean, де ми повинні додати відповідні методи для видалення та збереження, які викликаються з поля «Дії».
Як ми бачимо, метод editPersona() отримує об’єкт person (від виклику jsf, так само, як це робиться в методі delete), а його властивість «edit» змінюється, надсилаючи йому значення true, що дозволяє цей запис щоб приховати
З іншого боку, метод savePersona() відповідатиме за зміну кожної властивості «edit» усіх об’єктів у списку на false, щоб dataTable відновлювався зі значеннями людей, а не з елементами, які можна редагувати.
При запуску системи ми матимемо наступне:
А при натисканні редагувати система змінюється на:
Як видно, коли клацнути посилання для редагування, компоненти, які можна редагувати, автоматично відображаються, тоді як компоненти, які не можна редагувати, приховуються, так само посилання для редагування зникає, щоб звільнити місце для посилання для збереження, як пояснено вище.
І готово!!!
У своєму блозі та на своєму каналі я ділюся матеріалами про цю чудову мову програмування, ви можете знайти багато статей і відео з нуляЯ покажу вам, як завантажити необхідні інструменти, щоб розпочати програмування, ми все більше і більше переходимо до базових понять, проходимо через концепції об'єктно-орієнтованого програмуваннястандарти, темиструктури даних, доступ до баз даних серед іншого, до побудови програми з інтерфейсом користувача.
Також ви можете знайти a курс з нуля, де я навчаю створювати мобільні програми на android через покроковий відеоряд, який постійно оновлюється.
А тепер я також розпочну послідовність з нуля, де ми потрапимо у світ Java Enterprise Edition, покажемо вам, як налаштувати середовище розробки та як створити ваші перші веб-програми за допомогою Java.
Ось чому я запрошую вас відвідати codejavu.blogspot.com, відвідати мій канал Крістіан Енао і що вони дуже знають про нові продовження
Це також може вас зацікавити.
Ви хочете щось додати або прокоментувати до цього запису? не соромтеся робити....і якщо вам це сподобалося, я запрошую вас поділитися ним Ю Підпишіться, натиснувши кнопку «Приєднатися до цього сайту», щоб почути більше подібних дописів 😉