В первой части статьи мы разобрали создание проекта на Spring и Primefaces и генерацию пустой главной страницы. Помимо этого, есть еще несколько полезных настроек, которые помогут вам улучшить работу приложения, покажем некоторые из них. Как обычно в приложениях Spring, настройки эти помещаются в файл application.properties:
joinfaces.jsf.state-saving-method=client Настройка JSF показывает, где будут храниться состояния UI — на стороне сервера или на стороне клиента. У каждого метода есть достоинства и недостатки. При хранении на стороне клиента создается меньше нагрузки на сервер, состояние хранится в дополнительном скрытом поле input в браузере. Кроме того, состояние не теряется при ошибках связи с сервером, что вполне вероятно будет происходить по разным причинам, например, у меня на develop стенде при разработке такое происходило из-за очень малых выделенных ресурсов сервера для этой задачи. В результате компоненты на странице могут зависать, и требовалось обновить страницу, чтобы возобновить их работу. Перевод этого параметра из server в client решил для меня эту проблему.
joinfaces.mojarra.number-of-logical-views=10000000 joinfaces.mojarra.number-of-views-in-session=10000000 joinfaces.myfaces.number-of-sequential-views-in-session=10000000 joinfaces.myfaces.client-view-state-timeout=600 spring.session.timeout=360000 Эти настройки относятся к разным таймаутам хранения состояний, их я просто сделал побольше, чтобы состояние на клиенте не требовалось обновлять в течение одного рабочего дня или чуть больше
joinfaces.jsf.partial-state-saving=true Эта настройка позволяет JSF обновлять состояние не всей страницы, а только одного компонента или нескольких связанных компонентов, экономит ресурсы
joinfaces.mojarra.allow-text-children=true Настройка включает рендеринг дочерних элементов для h:inputText и h.outputText, требуется для работы некоторых компонентов в формах, как мы увидим в дальнейшем.
Перейдем теперь непосредственно к заполнению главной страницы компонентами. Рассмотрю только основные из них, мелкие компоненты, не требующие каких-либо особенных настроек вы просто увидите ниже в полном тексте страницы, полагаю, разобраться с ними у вас не составит труда
Я буду делать самый простой макет страницы, он будет включать в себя боковое меню и область с данными, которая будет обновляться при переходе по разным пунктам меню. Для реализации бокового меню разместим на странице компонент Tree ContextMenu и напишем класс компонента для него. Теперь наша главная страница будет выглядеть вот так:
<!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:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui"> <f:view contentType="text/html;charset=UTF-8" encoding="UTF-8"> <h:head> <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> <h:form> <div class="card"> <div id="top-panel"> <p:panel header="Оглавление на странице"> <f:facet name="actions"> <p:commandLink styleClass="ui-corner-all ui-state-default"> <p:graphicImage library="static" name="logo.gif" styleClass="ui-icon ui-icon-help" /> </p:commandLink> </f:facet> </p:panel> </div> <div id="middle-panel"> <p:splitter> <p:splitterPanel :size="20" styleClass="flex align-items-center justify-content-center flex-error-left-1"> <p:tree id="docs" value="#{treeContextMenuView.root}" var="doc" selectionMode="single" selection="#{treeContextMenuView.selectedNode}" dynamic="true"> <p:treeNode expandedIcon="pi pi-folder-open" collapsedIcon="pi pi-folder"> <h:outputText value="#{doc.name}"/> </p:treeNode> <p:treeNode type="ips" icon="pi pi-folder"> <h:outputText value="#{doc.name}"/> </p:treeNode> <p:treeNode id="testid" type="contragent" icon="pi pi-file"> <h:outputText value="#{doc.name}"/> </p:treeNode> <p:ajax event="select" listener="#{treeContextMenuView.setSrc()}" /> </p:tree> </p:splitterPanel> <p:splitterPanel :size="80" styleClass="flex align-items-center justify-content-center flex-error-right-1"> <h:panelGroup id="list"> <h:panelGroup rendered="true"> <ui:include src="#{treeContextMenuView.getSrc()}" /> </h:panelGroup> </h:panelGroup> </p:splitterPanel> </p:splitter> </div> </div> </h:form> </h:body> </f:view> </html> Вы видите, что в различных элементах на странице повсюду упоминается некоторая ссылка, включающая в себя строку treeContextMenuView. Это ни что иное, как ссылка на имя управляемого бина компонента, который вызывается на этой странице и используется для получения данных из компонента и рендеринга отображаемых данных на странице. Никакой однозначной связи «страница — компонент» не существует, как это могло бы показаться на первый взгляд. Никто не мешает вам на одной странице обращаться по именам к совершенно разным компонентам, связанным или не связанным между собой. Primefaces сам найдет нужные компоненты в регистре и обработает соответствующим образом. Просто на данном этапе разработки я использовал только один активный компонент, но далее их будет больше. Давайте посмотрим на класс компонета и разберем его содержание. Полный текст класса выглядит так:
import jakarta.faces.view.ViewScoped; import jakarta.inject.Inject; import org.primefaces.PrimeFaces; import org.primefaces.model.TreeNode; import javax.annotation.ManagedBean; import javax.faces.component.UIComponent; import javax.faces.component.UIViewRoot; import javax.faces.context.FacesContext; import java.io.Serializable; import java.util.List; @ManagedBean("treeContextMenuView") @ViewScoped public class PageMenuView implements Serializable { private final TreeNode<Page> root; private TreeNode<Page> selectedNode; private final String DEFAULT_LIST = "employees.xhtml"; private String listSrc; @Inject public PageMenuView(PageService service) { root = service.createPages(); listSrc = DEFAULT_LIST; } public TreeNode<Page> getRoot() { return root; } public TreeNode<Page> getSelectedNode() { return selectedNode; } public void setSelectedNode(TreeNode<Page> selectedNode) { this.selectedNode = selectedNode; } public void setSrc() { if (selectedNode.getData().getLink() != null) { listSrc = selectedNode.getData().getLink(); UIViewRoot view = FacesContext.getCurrentInstance().getViewRoot(); List<UIComponent> uiComponents = view.getChildren(); UIComponent uiComponent = uiComponents.get(2).getChildren().get(0).getChildren().get(3).getChildren().get(1) .getChildren().get(0); PrimeFaces.current().ajax().update(uiComponent.getClientId()); } } public String getSrc() { return listSrc; } } Давайте сравним класс компонента с аналогичным классом, приведенным в документации Primefaces, чтобы понять, чем же он отличается. Оригинал файла можно найти здесь.
-
в оригинале используется аннотация управляемого бина
@Named("treeContextMenuView", у меня —@ManagedBean("treeContextMenuView"). Никакой разницы при использовании этих аннотаций я не обнаружил, кроме того, как я это делаю в других компонентах позже, можно также использовать спринговую аннотацию@Component("treeContextMenuView"). Вторая аннотация@ViewScopedиз пакета jakarta.faces.view используется для того, чтобы создавался экземпляр бина, привязанный к сессии, создаваемой, когда вы открываете страницу index.xhtml. Подробности можно изучить здесь -
На этом сходство заканчивается. В оригинале сервисы инжектируются через поля, а первоначальное заполнение важного поля root, в котором хранится корень дерева узлов для меню, происходит в методе, помеченном аннотацией
@PostConstruct. И это первое, что не будет у вас по умолчанию работать при интеграции Primefaces и Spring Boot проекта. Связано это с тем, что данная аннотация не работает со scoped бинами Spring. Я не пробовал делать проект на чистой Jakarta EE, но очевидно, что документация Primefaces ориентирована именно на такое базовое использование, вероятно, там это работать будет вполне нормально. У вас есть возможность попробовать это самостоятельно, если пожелаете изучить проблему подробнее. Разумеется, существуют способы заставить@PostConstructработать так, как вам это нужно, и в scoped бинах. Например, могу привести статью, в которой достаточно подробно объясняется, почему такое поведение происходит в Spring, и как перенастроить инициализацию бина в контейнере, чтобы аннотация@PostConstructотрабатывала. Но, как утверждал герой А. П. Чехова из рассказа «Письмо ученому соседу», «зачем на солнце пятны, когда и без них можно обойтиться». У нас Spring приложение + бины компонентов, управляющие загрузкой и исполнением xtml страницы. Возможностей вполне достаточно и без@PostConstruct. Поэтому все, что нужно выполнить при инициализации бина, я вынес в конструктор, а нужные в бине сервисы инжектировал также в конструкторе. Помимо этого, существует специальный способ выполнить какой-либо метод из бина компонента, указав его в метаданных страницы xhtml как метод, выполняемый всегда при загрузке страницы. Конкретно в этом компоненте я его не использую за ненадобностью, но позже, когда буду показывать вам работу некоторых других компонентов на других страницах, я к нему вернусь. Кроме того, я покажу в последующих частях статьи, как такой onload метод можно использовать и для совсем другой цели — для обновления отдельных компонентов при возвратах на текущую страницу из других страниц приложения.
Итак, у нас появился первый компонент на главное странице — меню приложения. Выглядит это примерно вот так:
Пункты для меню выбираются через сервисы и конкретно здесь для нас интереса не представляют, они зависят от бизнес-логики приложения, берутся из слоя сервисов, и у вас могут быть совершенно другими, под ваши нужды.
Но далее у нас будет еще одна задача — заставить меню по клику на отдельных пунктах обновить содержательную часть страницы данными из трех разных источников, которые будут выводиться в трех совершенно разных списках. Эта задача сама по себе не простая, и будет описана в следующей части статьи.
В конце статьи традиционно рекомендую посмотреть бесплатный урок от моих друзей из OTUS по теме: «Spring Data Projections, Example, Specifications».
ссылка на оригинал статьи https://habr.com/ru/company/otus/blog/709726/
Добавить комментарий