В шестой части статьи я уже приводил пример комбинирования двух компонентов на одной странице для вывода сложных данных и показал, какие трудности это может вызвать. Еще большую сложность представляет комбинирование компонентов для сохранения данных. Разберем один такой пример, чтобы показать хотя бы часть узких мест и приемов, как их можно обойти.
Итак, перед нами поставлена задача - написать форму для редактирования ролей сотрудника. По бизнес-логике у сотрудника предполагается наличие одной и только одной основной роли и нескольких дополнительных ролей в компании. Поставлено условие, чтобы все эти роли можно было выбрать или изменить на одной и той странице, назовем ее карточкой редактирования ролей. Кроме того, каждая роль, как основная, так и дополнительные имеют свой грейд, или рейтинг, для ее оценки. Выглядеть это должно вот таким образом в соответствии с выбранным для карточки дизайном:
Поскольку ситуация здесь особенно сложная, целесообразно сразу же привести полный код xhtml страницы вида и код управляемых бинов, используемых этой страницей, а уже потом разбирать детали по шагам. Таких бинов у меня будет два, так как на странице будут комбинироваться два компонента.
xhtml страница:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:p="http://primefaces.org/ui"> <f:metadata> <f:viewParam name="id" value="#{employeeRolesSelectionEditableView.id}"/> <f:viewAction action="#{employeeRolesSelectionEditableView.onload}"/> <f:viewParam name="id" value="#{employeeRolesSelectionEditableView.employeeRatingView.id}"/> <f:viewAction action="#{employeeRolesSelectionEditableView.employeeRatingView.onload}"/> </f:metadata> <f:view contentType="text/html;charset=UTF-8" encoding="UTF-8"> <h:head> <h:outputStylesheet library="webjars" name="primeflex/3.2.0/primeflex.min.css"/> <h:outputStylesheet library="css" name="styles.css"/> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <title>Сател - реестр ресурсов</title> </h:head> <h:body> <div class="card"> <h:form> <p:dataTable lazy="false" emptyMessage=""> <f:facet name="header"> <span>Редактирование ролей сотрудника</span> </f:facet> </p:dataTable> </h:form> <h:form> <p:growl id="msgs" showDetail="true" escape="false"/> <p:commandButton value="Сохранить" update="msgs" icon="pi pi-save" styleClass="mt-3" partialSubmit="true" action="#{employeeRolesSelectionEditableView.onsubmitAll(employeeRolesSelectionEditableView.selectedNodes)}"> <f:param name="employeeId" value="#{param['id']}"/> </p:commandButton> <p:button icon="pi pi-arrow-circle-left" styleClass="mt-3 ml-3" href="/employee/#{employeeRolesSelectionEditableView.id}" value="Отменить"/> <div class="grid ui-fluid"> <div class="col-12 md:col-6"> <h2>Основная роль</h2> <p:tree value="#{employeeRolesSelectionEditableView.rootMain}" var="role" selectionMode="single" cache="false" selection="#{employeeRolesSelectionEditableView.selectedNode}"> <p:treeNode expandedIcon="pi pi-folder-open" collapsedIcon="pi pi-folder"> <h:outputText role_id="#{role.id}" value="#{role.name}"/> <p:rating value="#{role.grade}" readonly="false" stars="6"> <p:ajax event="rate" listener="#{employeeRolesSelectionEditableView.onMainRate}"/> </p:rating> </p:treeNode> </p:tree> </div> <div class="col-12 md:col-6"> <h2>Дополнительные роли</h2> <p:tree value="#{employeeRolesSelectionEditableView.rootExtra}" var="role" selectionMode="checkbox" cache="false" selection="#{employeeRolesSelectionEditableView.selectedNodes}"> <p:treeNode expandedIcon="pi pi-folder-open" collapsedIcon="pi pi-folder"> <h:outputText role_id="#{role.id}" value="#{role.name}"/> <p:rating value="#{role.grade}" readonly="false" stars="6"> </p:rating> </p:treeNode> </p:tree> </div> </div> <p:commandButton value="Сохранить" update="msgs" icon="pi pi-save" styleClass="mt-3" partialSubmit="true" action="#{employeeRolesSelectionEditableView.onsubmitAll(employeeRolesSelectionEditableView.selectedNodes)}"> <f:param name="employeeId" value="#{param['id']}"/> </p:commandButton> <p:button icon="pi pi-arrow-circle-left" styleClass="mt-3 ml-3" href="/employee/#{employeeRolesSelectionEditableView.id}" value="Отменить"/> </h:form> </div> </h:body> </f:view> </html>
Компонент employeeRolesSelectionEditableView - в этом бине фактически скомбинировано две реализации Primefaces компонента Tree Selection Single и Tree Selection Checkbox:
import jakarta.inject.Inject; import lombok.Getter; import lombok.Setter; import lombok.extern.log4j.Log4j2; import org.primefaces.PrimeFaces; import org.primefaces.event.RateEvent; import org.primefaces.model.TreeNode; import org.satel.ressatel.bean.list.role.Role; import org.satel.ressatel.entity.Employee; import org.satel.ressatel.entity.Grade; import org.satel.ressatel.service.EmployeeService; import org.satel.ressatel.service.GradeService; import org.satel.ressatel.service.RoleService; import org.springframework.context.annotation.Scope; import org.springframework.context.annotation.ScopedProxyMode; import org.springframework.stereotype.Component; import org.springframework.web.context.WebApplicationContext; import javax.faces.context.ExternalContext; import javax.faces.context.FacesContext; import javax.faces.event.AjaxBehaviorEvent; import java.io.IOException; import java.util.*; import java.util.stream.Collectors; @Component("employeeRolesSelectionEditableView") @Scope(value = WebApplicationContext.SCOPE_REQUEST, proxyMode = ScopedProxyMode.TARGET_CLASS) @Getter @Setter public class EmployeeRolesSelectionEditableView { private String id; private EmployeeService employeeService; private RoleService roleService; private GradeService gradeService; private TreeNode<Role>[] selectedNodes; private TreeNode<Role> selectedNode; private TreeNode<Role> rootMain; private TreeNode<Role> rootExtra; private EmployeeRatingView employeeRatingView; @Inject public EmployeeRolesSelectionEditableView(EmployeeService employeeService, RoleService roleService, GradeService gradeService, EmployeeRatingView employeeRatingView) { this.employeeService = employeeService; this.roleService = roleService; this.gradeService = gradeService; this.employeeRatingView = employeeRatingView; init(); } private void init() { rootMain = createCheckboxRoles(); rootExtra = createCheckboxExtraRoles(); } public void onload() { Employee employee = employeeService.getByStringId(id); Set<org.satel.ressatel.entity.Role> mainRoles = employee.getRoles(); Set<Integer> idsMain = mainRoles.stream().map(org.satel.ressatel.entity.Role::getId).collect(Collectors.toSet()); Set<org.satel.ressatel.entity.Role> extraRoles = employee.getExtraRoles(); Set<Integer> idsExtra = extraRoles.stream().map(org.satel.ressatel.entity.Role::getId).collect(Collectors.toSet()); Map<String, Grade> mainRoleMap = roleService.getNameToMainRoleMap(employee); Map<String, Grade> extraRoleMap = roleService.getNameToExtraRoleMap(employee); selectAndGradeNodes(rootMain, idsMain, mainRoleMap); selectAndGradeNodes(rootExtra, idsExtra, extraRoleMap); } public void onMainRate(RateEvent<String> rateEvent) { Integer selectedRoleId = (Integer) rateEvent.getComponent().getParent().getChildren().get(0).getAttributes().get("role_id"); unselectOther(rootMain, selectedRoleId); PrimeFaces.current().ajax().update(rateEvent.getComponent().getParent().getParent()); } private void unselectOther(TreeNode<Role> rootMain, Integer selectedRoleId) { rootMain.getChildren().forEach(roleTreeNode -> { roleTreeNode.setSelectable(true); roleTreeNode.setSelected(Objects.equals(roleTreeNode.getData().getId(), selectedRoleId)); }); } private void selectAndGradeNodes(TreeNode<Role> root, Set<Integer> ids, Map<String, Grade> roleMap) { root.setSelected(ids.contains(root.getData().getId())); Grade grade = roleMap.get(root.getData().getName()); if (grade != null) { root.getData().setGrade(String.valueOf(grade.getId())); } if (root.getChildCount() != 0) { root.getChildren().forEach(roleTreeNode -> { selectAndGradeNodes(roleTreeNode, ids, roleMap); }); } } private TreeNode<Role> createCheckboxRoles() { return roleService.getTreeNodeOfRoles(); } private TreeNode<Role> createCheckboxExtraRoles() { // повтор вызова метода необходим, чтобы в дереве дополнительных ролей был отдельный объект TreeNode<Role> return roleService.getTreeNodeOfRoles(); } public void onsubmitAll(TreeNode<Role>[] nodes) { String employeeId = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("employeeId"); onsubmit(employeeId); onsubmitExtra(nodes, employeeId); ExternalContext context = FacesContext.getCurrentInstance().getExternalContext(); try { context.redirect(context.getRequestContextPath() + "/"); } catch (IOException e) { throw new RuntimeException(e); } } public void onsubmit(String employeeId) { Employee employee = employeeService.getByStringId(employeeId); if (selectedNode != null) { Set<org.satel.ressatel.entity.Role> roles = new HashSet<>(); Integer roleId = selectedNode.getData().getId(); Integer gradeId = selectedNode.getData().getGrade() == null ? 1 : Integer.parseInt(selectedNode.getData().getGrade()); org.satel.ressatel.entity.Role role = roleService.getById(roleId); if (role != null) { roles.add(role); } employee.setRoles(roles); employeeService.createOrUpdateEmployee(employee); roleService.setGradeIdForEmployeeRole(employee.getId(), roleId, gradeId); } else { employee.setRoles(null); employeeService.createOrUpdateEmployee(employee); } } public void onsubmitExtra(TreeNode<Role>[] nodes, String employeeId) { Employee employee = employeeService.getByStringId(employeeId); if (nodes != null && nodes.length > 0) { Set<org.satel.ressatel.entity.Role> roles = new HashSet<>(); Map<Integer, Integer> roleIdToGradeId = new HashMap<>(); for (TreeNode<Role> node : nodes) { Integer roleId = node.getData().getId(); org.satel.ressatel.entity.Role role = roleService.getById(roleId); Integer gradeId = node.getData().getGrade() == null ? 1 : Integer.parseInt(node.getData().getGrade()); if (role != null) { roles.add(role); roleIdToGradeId.put(roleId, gradeId); } } employee.setExtraRoles(roles); employeeService.createOrUpdateEmployee(employee); roleIdToGradeId.forEach((roleId, gradeId) -> { roleService.setGradeIdForEmployeeExtraRole(employee.getId(), roleId, gradeId); }); } else { employee.setExtraRoles(null); employeeService.createOrUpdateEmployee(employee); } } }
Компонент employeeRatingView
import jakarta.inject.Inject; import lombok.Getter; import lombok.Setter; import lombok.extern.log4j.Log4j2; import org.satel.ressatel.entity.Employee; import org.satel.ressatel.entity.Grade; import org.satel.ressatel.entity.Role; import org.satel.ressatel.service.EmployeeService; import org.satel.ressatel.service.RoleService; import org.springframework.context.annotation.Scope; import org.springframework.context.annotation.ScopedProxyMode; import org.springframework.stereotype.Component; import org.springframework.web.context.WebApplicationContext; import java.util.ArrayList; import java.util.List; import java.util.Map; @Component("employeeRatingView") @Scope(value = WebApplicationContext.SCOPE_REQUEST, proxyMode = ScopedProxyMode.TARGET_CLASS) @Getter @Setter @Log4j2 public class EmployeeRatingView { private String id; private String mainRoleName; private Integer mainGradeId; private List<Role> mainRoles; private List<Map.Entry<Role, Grade>> extraRoleEntryList; private final RoleService roleService; private final EmployeeService employeeService; private final EmployeeSkillRatingView employeeSkillRatingView; @Inject public EmployeeRatingView(RoleService roleService, EmployeeService employeeService, EmployeeSkillRatingView employeeSkillRatingView) { this.roleService = roleService; this.employeeService = employeeService; this.employeeSkillRatingView = employeeSkillRatingView; this.mainRoles = new ArrayList<>(); } public void onload() { Employee employee = employeeService.getByStringId(id); if (!roleService.getMainRoleMap(employee).isEmpty()) { roleService.getMainRoleMap(employee).forEach((role1, grade1) -> { mainRoles.add(role1); mainRoleName = role1.getName(); mainGradeId = grade1 == null ? null : grade1.getId(); }); } this.employeeSkillRatingView.setMainRoles(mainRoles); if (!roleService.getExtraRoleMap(employee).isEmpty()) { extraRoleEntryList = new ArrayList<>(roleService.getExtraRoleMap(employee).entrySet()); } } }
Использованные в коде управляемых бинов отсылки на методы других классов я намеренно не расшифровываю и не привожу здесь их описание, так как это относится к конкретной структуре данных моего приложения и не имеет значения для нашей темы, у вас это могут быть совсем другие данные, другие репозитории и сервисы. Просто пропустим их и рассмотрим самые существенные детали, важные для понимания именно того, как выполняется композиция нескольких компонентов на странице.
Прежде всего, нам необходимо получить и заполнить данными о текущем положении дел два однотипных компонента Tree Selection Single и Tree Selection Checkbox, фактически, это один и тот же компонент, но с различиями в настройке параметров. Первый из них забирает данные из поля бина private TreeNode<Role> rootMain и помещает их в визуальное древовидное представление. Именно древовидное, просто для моего случая бизнес-логики дерево имеет единичную глубину (без вложенности), но никто не мешает вам заполнить дерево данными для любого уровня вложенности - вы получите на странице раскрывающийся список селектов. Кроме того, первый компонент имеет специальный атрибут selectionMode="single", который означает, что вы можете выбрать только один элемент из дерева (в данном случае - одномерного списка), при изменении выбора селект с ранее выбранного элемента будет снят. Но это относится только к самому дереву. Если в каждый элемент списка мы будем добавлять какой-то дополнительный вложенный компонент, то могут понадобиться уже дополнительные усилия, чтобы обеспечить аналогичный функционал для вложенного компонента, как я и покажу чуть ниже.
Второй компонент забирает данные из поля бина private TreeNode<Role> rootExtra и заполняет второе дерево, но у него уже проставлен атрибут selectionMode="checkbox", в результате чего у каждого элемента появляется чекбокс и компонент позволяет выбрать несколько элементов из списка, причем здесь уже логично, что снять выделение с элемента можно уже только принудительно.
Здесь нужно особенно отметить, что хотя оба дерева/списка инициируются как будто бы из одного источника, но вызывается заполнение дублирующимся кодом намеренно - для того, чтобы в бине это были два РАЗНЫХ объекта, так как после инициации они будут заполняться разными данными и после изменения данных в форме вручную на странице сохраняться данные будут в разных местах. Они просто однотипные, что может немного запутать, и представляют собой список всех возможных ролей. Однако, сам компонент Tree Selection работает под капотом таким образом, что в этом дереве будут выбираться новые, измененные данные, и именно поэтому это должны быть два разных объекта TreeNode<Role>
private void init() { rootMain = createCheckboxRoles(); rootExtra = createCheckboxExtraRoles(); } .......... private TreeNode<Role> createCheckboxRoles() { return roleService.getTreeNodeOfRoles(); } private TreeNode<Role> createCheckboxExtraRoles() { // повтор вызова метода необходим, чтобы в дереве дополнительных ролей был отдельный объект TreeNode<Role> return roleService.getTreeNodeOfRoles(); }
После инициализации бина и вызова страницы оба дерева заполняются данными в методе onload из разных источников в БД, где хранятся текущие значения главной роли и дополнительных ролей.
Кроме основных данных, каждое дерево против каждого своего узла выводит не только роль, но и грейд роли в виде рейтинга со звездочками, здесь у меня это реализовано вложенным в каждый узел компонентом Primefaces Rating
<p:rating value="#{role.grade}" readonly="false" stars="6"> <p:ajax event="rate" listener="#{employeeRolesSelectionEditableView.onMainRate}"/> </p:rating> .............................. <p:rating value="#{role.grade}" readonly="false" stars="6"> </p:rating>
Обратите внимание, что в первом компоненте я дополнительно вызываю в рейтинге обработчик события rate, которое срабатывает при выборе рейтинга в каком-либо из узлов. Как я уже написал выше, это связано с тем, что родительский компонент Tree Selection в режиме single умеет снять альтернативное выделение с узла, когда выбирается другой узел, но вложенный в узел компонент Rating этого делать не умеет. И поэтому нужно отловить событие rate выбора рейтинга и принудительно снять выделение с рейтингов в других узлах, что и делает метод onMainRate в бине employeeRolesSelectionEditableView.
Компонент employeeRatingView вспомогательный и выводит текущий рейтинг каждого узла при загрузке страницы из БД. Однако, он спроектирован так, чтобы не зависеть от планируемого в будущем изменения (предполагается, что кол-во основных ролей будет расширено и станет больше одной), фактический выбор единственной основной роли у меня вынесен в сервис, который я не показываю. Фактически в коде этого бина также комбинируется использование двух вариантов рейтинга на странице, а не одного, то есть это тоже комлексный управляемый бин.
Наконец, все данные на странице получены и отредактированы. Теперь нужно сохранить изменения. Я делаю это вызовом из кнопки комбинированного метода управляемого бина:
<p:commandButton value="Сохранить" update="msgs" icon="pi pi-save" styleClass="mt-3" partialSubmit="true" action="#{employeeRolesSelectionEditableView.onsubmitAll(employeeRolesSelectionEditableView.selectedNodes)}"> <f:param name="employeeId" value="#{param['id']}"/> </p:commandButton>
Здесь нужно обратить внимание на следующий момент: поскольку я использую в бинах область видимости @Scope(value = WebApplicationContext.SCOPE_REQUEST, proxyMode = ScopedProxyMode.TARGET_CLASS), то фактически при клике по кнопке "Сохранить" у меня будет вызван НОВЫЙ экземпляр управляемого бина, и соответственно, этот экземпляр был вызван НЕ строкой URL с параметрами, которые передаются в бин при первоначальной загрузке страницы. То есть вот в этом коде xhtml страницы корректно сработает только вызов методов onload, а в параметры id в бины будет передан null:
<f:metadata> <f:viewParam name="id" value="#{employeeRolesSelectionEditableView.id}"/> <f:viewAction action="#{employeeRolesSelectionEditableView.onload}"/> <f:viewParam name="id" value="#{employeeRolesSelectionEditableView.employeeRatingView.id}"/> <f:viewAction action="#{employeeRolesSelectionEditableView.employeeRatingView.onload}"/> </f:metadata>
Здесь происходит обыкновенная потеря ожидаемого контекста. Поэтому, чтобы передать id в бины, я не только вызываю метод onsubmitAll, передавая в него выбранный набор отредактированных полей employeeRolesSelectionEditableView.selectedNodes, но и передаю дополнительный параметр employeeId, записанный в вид страницы при ее первичной загрузке:
<f:param name="employeeId" value="#{param['id']}"/>
И затем этот параметр используется вместо поля id в управляемом бине, чтобы получить id сотрудника, для которого было вызвано сохранение отредактированных данных формы.
Наконец, сам метод onsubmitAll внутри управляемого бина вызвает последовательно два метода onsubmit и onsubmitExtra, которые собирают и сохраняют в БД данные из двух разных деревьев по отдельности, после чего осуществляется принудительный переход в коде на главную страницу приложения:
public void onsubmitAll(TreeNode<Role>[] nodes) { String employeeId = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("employeeId"); onsubmit(employeeId); onsubmitExtra(nodes, employeeId); ExternalContext context = FacesContext.getCurrentInstance().getExternalContext(); try { context.redirect(context.getRequestContextPath() + "/"); } catch (IOException e) { throw new RuntimeException(e); } }
На этом интересном моменте цикл статей о Primefaces заканчиваю, мы насколько можно кратко изучили основные приемы работы с библиотекой Primefaces, интегрировав ее для удобства в приложение Spring. Еще раз напомню, что этот маленький квест может оказаться полезным прежде всего для тех разработчиков, которые релоцировались за пределы РФ, так как использование Jakarta EE + JSF + Primefaces достаточно широко распространены в продуктиве именно за границей. Все, что пропущено, можно найти в документации Primefaces, Jakarta EE и JSF. Удачных вам разработок!
В заключение приглашаю на бесплатный вебинар от OTUS, где рассмотрим экосистему технологий Java, спектр областей, которые обслуживает Java. Поговорим о том, какие компании активно используют Java в своих IT-продуктах. Посмотрим на географию компаний и карьерных предложений. Обоснуем верный выбор Java как профессионального стека для устойчивой карьеры.
