ИСПОЛЬЗОВАНИЕ ТАБЛИЦЫ ДАННЫХ В JSF.

Пример предопределенной таблицы.
В этой лабораторной работе мы увидим простой пример, показывающий, как использовать компонент DataTable, этот элемент позволяет нам связать таблицу данных с нашей страницей следующим образом:

В этом первом примере только предварительно заполненный компонент будет связан с нашим классом компонента, позже он покажет, как динамически манипулировать его информацией.

Для начала создадим проект JSF со следующей структурой:

Как мы видим, создаются 2 java-класса, один соответствует классу человека, который позволяет нам обрабатывать людей, которых мы собираемся показать в нашей таблице, а другой — bean-компоненту, который позволит нам управлять нашей таблицей с соответствующими столбцы и записи.
Класс Person.java предоставляет нам основные данные человека, которого мы собираемся показать в таблице, здесь мы добавляем соответствующие методы set и get, а также конструктор с параметрами для непосредственного заполнения людей.

Класс TablaBean.java относится к таблице и управлению людьми в ней, отображаемые записи хранятся в типе человека ArrayList, который для целей данного руководства заполняется в конструкторе.

В index.xhtml мы создаем компонент DataTable, с которым мы связываем список людей непосредственно в значении и в соответствующих столбцах атрибуты bean-компонента, на который ссылается var="data", будучи элементом данных, который представляет данные объект Person в каждой строке из таблицы.

При запуске у нас будет что-то вроде этого

Как мы видим, информация представлена в виде таблицы, так как мы еще не привязали стили CSS, мы оцениваем только структуру в строках и столбцах без какого-либо оформления, однако мы можем добавить свойство «граница» к таблице. и маржа, имеющая что-то вроде этого:

Наконец мы знаем, что можем использовать представить информацию в более структурированном виде.

Пример управления данными в DataTable.
В этом разделе мы продолжим предыдущий пример, где увидим, как манипулировать табличными данными для выполнения общих процессов, таких как регистрация, изменение или удаление информации.

Добавить людей.
Чтобы зарегистрировать людей, мы изменим нашу страницу index.xhtml, на которую мы свяжем форму регистрации человека. Мы делаем это, связывая компоненты ввода и выбора в панели сетки, должным образом связанной с объектом «myPerson», которому отправляются различные данные.Новый человек регистрируется в нашей системе.

Как мы видим, эти новые элементы добавляются до того, как DataTable получает такой результат:

После модификации индекса внесем необходимые изменения в класс TableBean.java, так как в этом примере мы продолжим использовать уровень области видимости по умолчанию, поэтому сделаем список людей статическим, чтобы с ним можно было без проблем манипулировать, дополнительно устраните заполнение списка, поскольку идея состоит в том, чтобы иметь возможность регистрировать людей через регистрационную форму.

Как мы видим, при определении списка как статического мы создаем его экземпляр на уровне класса, мы не делаем этого в конструкторе, так как это будет вызываться в разных случаях нашим jsf, что вызовет новый экземпляр списка, который вызовет нам потерять информацию, которую он может содержать.

Дополнительно мы добавили объект типа Person для управления регистрационными данными и добавили метод «aggregarPersona()», который позволяет добавить новый элемент в список и вызывается из кнопки jsf, позже мы генерируем новый экземпляр объект «minhaPersona», который позволит очистить регистрационную форму.


При запуске системы мы увидим следующее поведение:

Изначально форма пуста и шапка нашей таблицы тоже отображается, но без какого-либо содержания (помните, что мы убрали заполнение в списке), чтобы шапка не отображалась, когда еще нет зарегистрированных людей, поэтому используем « rendered», где мы проверяем, что длина списка больше нуля, иначе он не должен отображать заголовки. (Работа этого свойства будет подробно рассмотрена позже)

Когда мы добавляем людей, они сохраняются в списке и отображаются в DataTable.

Исключить людей.
После того, как мы успешно зарегистрировали людей в нашем списке, мы можем удалить их из него, для этого мы добавим новую колонку действий в нашу таблицу данных, которая будет содержать ссылку на метод «eliminarPerson()», который мы создадим в нашем бине

Для этого мы модифицируем index.xhtml, где после столбца «Пол» мы добавим столбец «Действия».

Как мы видим, мы используем компонент а в экшене вызываем метод «eliminarPersona()», которому будем передавать в качестве параметра значение «данные», помня, что данные эквивалентны объекту списка, отображаемому в конкретной строке.

Позже в классе TablaBean.java мы добавляем метод «eliminarPersona()», который получает в качестве параметра объект человека, которого мы хотим удалить, это соответствует «данным», которые мы отправляем из jsf, и эквивалентно человек в строке, которую мы хотим удалить, поэтому затем удалить его из списка.

При запуске системы мы будем иметь следующее:

И каждый раз, когда мы удаляем запись по соответствующей ссылке, таблица будет обновляться

Редактировать людей.
После успешной регистрации и удаления людей из нашего списка мы можем изменить их, для этого мы изменим нашу таблицу, сделав ее доступной для редактирования, когда мы хотим обновить некоторые данные, для этого мы снова будем использовать свойство «рендеринг», которое покажет или скрыть редактируемые параметры в зависимости от того, что решит пользователь.

Как мы видим в каждой из колонок добавлен компонент который будет скрыт по умолчанию благодаря свойству «рендеринг», которое позволяет хранить истинные или ложные данные, чтобы показать или скрыть сопутствующий компонент.

В нашем случае «data.edit» вызывает логическую переменную (edit), которую мы добавили в класс Person, если свойство истинно, то оно покажет разрешить редактирование, но если свойство истинно ложно (не истинно), то оно будет отображать

То же самое нужно сделать для колонок профессия, зарплата и пол соответственно, где вместо добавления к последнему добавится так как в форме мы используем комбинацию выбора следующего пути:

Аналогичным образом отображаемое свойство должно отображать комбинацию или отображать метку, в зависимости от обстоятельств.

Впоследствии модифицируется столбец «Действия», где раньше у нас была только ссылка «Удалить», теперь мы добавим еще 2 ссылки, одну для «редактирования», а другую для «сохранения» информации после ее редактирования.

Как мы видим, теперь есть 3 ссылки для методов редактирования, сохранения и удаления соответственно, однако edit и save имеют свойство rendered, которое делает видимыми одновременно только 2 из 3 ссылок (помните, что отображаемая ссылка содержит true или false в зависимости от условия ), поэтому по умолчанию ссылка удаления всегда будет отображаться, поскольку у нее нет свойства рендеринга, а редактирование и сохранение никогда не будут отображаться вместе. (позволяет добавить пробел между ссылками)

Внутренне на графическом уровне dataTable будет выглядеть так:

Хотя графически вы можете видеть все компоненты вместе, важно четко указать, что отображаемое свойство будет отображать только компоненты в зависимости от истинного или ложного значения в данный момент.

После изменения index.xhtml пришло время изменить класс Person.java, в который добавлено свойство «edit», используемое упомянутым выше рендерингом.

Как мы видим, новый логический атрибут связан с соответствующим набором и получением. Кроме того, чтобы соответствовать структуре упражнения, мы добавили это свойство в параметризованный конструктор, хотя на данном этапе упражнения оно больше не используется.

Таким образом, каждый раз, когда в index.xhtml выполняется render="#{data.edit}", будет вызываться эта переменная, что позволит отображать или скрывать компоненты в зависимости от случая.

Наконец, и уже с предыдущими изменениями, переходим к модификации класса Bean, где должны добавить соответствующие методы удаления и сохранения, вызываемые из поля «Действия».

Как мы видим, метод editPersona() получает объект человека (из вызова jsf, так же, как это делается в методе удаления), и его свойство «редактировать» модифицируется, отправляя ему значение true, что разрешает эту запись. скрыть и показать и чтобы внести желаемое изменение.

С другой стороны, метод savePersona() будет отвечать за изменение каждого свойства «редактировать» всех объектов в списке на false, чтобы таблица данных восстанавливалась со значениями людей, а не с редактируемыми элементами.

При запуске системы мы будем иметь следующее:

А при нажатии редактировать система меняется на:

Как видно, при нажатии на ссылку редактирования редактируемые компоненты автоматически отображаются, а нередактируемые скрываются, а ссылка редактирования исчезает, уступая место ссылке сохранения, как описано выше.

И готовы!!!

В моем блоге и на моем канале я делюсь материалами об этом замечательном языке программирования, вы можете найти много статей и видео с нуляЯ покажу вам, как загрузить необходимые инструменты для начала программирования, мы все больше и больше поднимаемся по основным понятиям, проходя через концепции объектно-ориентированного программированиястандарты, темыструктуры данных, доступ к базам данных среди прочего, к построению приложения с пользовательскими интерфейсами.

Также вы можете найти курс с нуля, где я учу создавать мобильные приложения на андроид через пошаговый видеоряд, который постоянно обновляется.

А теперь я также начну с нуля, где мы войдем в мир java Enterprise edition, покажем вам, как настроить среду разработки и как создать свои первые веб-приложения с помощью java.

Вот почему я приглашаю вас посетить codejavu.blogspot.com, посетить мой канал Кристиан Энао и что они очень осведомлены о новых продолжениях

Это также может вас заинтересовать.

Есть ли что-нибудь, что вы хотите добавить или прокомментировать по поводу этой записи? смело делайте….и если вам понравилось, я приглашаю вас поделиться им Д Подпишитесь, нажав кнопку «Присоединиться к этому сайту», чтобы получать больше подобных сообщений. 😉