В предыдущей части статьи мы уже познакомились с тем, как выводить на страницу данные с помощью отдельных простых компонентов. Как мы убедились, для этих целей можно использовать, как компоненты самого Primefaces, так и компоненты фреймворка JSF, на котором он основан. В частности, h:outputText - пример компонента JSF, а Data List - компонент Primefaces. В моих примерах и в документации их легко различить, например, по префиксу, JSF компоненты имеют префикс h, а Primefaces компоненты - префикс p, что также отражено в декларации xhtml документа, редко кто использует нестандартные префиксы, но если это так, то это отражено в декларации.
На самом деле компонентов и JSF, и Primefaces очень много, и описать их все в рамках даже большой статьи практически невозможно. Поэтому приведу ссылки на туториал и документацию:
туториал по базовым тегам JSF - на этом же сайте можно найти множество туториалов по более сложным и композитным компонентам JSF.
документация по UI Primefaces - здесь вы найдете описание десятков компонентов Primefaces с showcase, примерами их использования с образцами кода управляемых бинов и xhtml страниц.
Однако, как я уже писал ранее, следует иметь ввиду, что применение Primefaces может приводить к неожиданным side эффектам и не исчерпывается сведениями из документации. Например, вам требуется вывести сложно взаимосвязанные данные в каком-либо специфическом виде, и вам не хватает возможностей типовых компонентов из документации JSF и Primefaces. И вот тут уже придется потрудиться самостоятельно, применив смекалку разработчика. Не сомневаюсь, что практически все проблемы можно решить, комбинируя простые (или не очень простые) стандартные компоненты в более сложные, составные конструкции. Фактически, вы можете сделать собственные композитные компоненты на базе стандартных.
Приведу пример такой разработки. Предположим, у нас есть три сущности - сотрудник Employee, квалификация сотрудника в каком-то стеке Skill и уровень его квалификации SkillGrade в этом стеке. Не будем чрезмерно углубляться в подробности и приведем только самые основные сведения о структуре используемых данных. Пусть связь между сущностями определена таблицей связи такого вида:
получаем из таблицы для какого-то конкретного сотрудника уровень владения определенной компетенцией, у меня это - нативный запрос, что связано с конкретной реализацией структуры данных. У вас это может быть совсем другая структура и другой запрос к репозиторию, например, на базе Spring Data JPA, конкретные детали здесь приведены лишь для ясности описания моего конкретного примера:
@Repository public interface SkillRepository extends JpaRepository<Skill, Integer> { Skill findByName(String name); @Query(value = "select skill_grade_id from employees_to_skills where ( skill_id = :skill_id and employee_id = :employee_id )", nativeQuery = true) Integer getSkillGradeIdByEmployeeIdAndSkillId(Integer skill_id, Integer employee_id); }
далее в сервисе получаем для данного конкретного сотрудника полную карту его компетенций с соответствующим каждой компетенции уровнем владения
public Map<Skill, SkillGrade> getSkillMap(Employee employee) { Map<Skill, SkillGrade> map = new HashMap<>(); Set<Skill> skills = employee.getSkills(); skills.forEach(skill -> { map.put( skill, skillGradeRepository.getReferenceById(skillRepository.getSkillGradeIdByEmployeeIdAndSkillId(skill.getId(), employee.getId())) ); }); return map; }
Давайте теперь выведем список всех компетенций сотрудника, указав рядом с каждой компетенцией уровень владения ею данным сотрудником в виде красивого рейтинга со звездочками. Для этого нам придется скомбинировать два компонента - Data List p:dataList и вложненный в него рейтинг p:rating. Для этого добавим на xhtml страницу такой код:
<div class="col-12 md:col-4"> <h3>Квалификационный профиль сотрудника</h3> <p:dataList value="#{employeeCardView.employeeSkillRatingView.skillList}" var="entry" styleClass="noBorders -ml-6" itemType="none"> <p> #{entry.key.name} </p> <p:rating value="#{entry.value.id}" readonly="false" stars="6"/> </p:dataList> <div class="col-12 md:col-6"> <p:button value="Редактировать" icon="pi pi-pencil" href="/employee/skills/edit/#{employeeCardView.id}"/> </div> </div>
И создадим класс управляемого бина компонента для вывода данной информации:
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.Skill; import org.satel.ressatel.entity.SkillGrade; import org.satel.ressatel.service.EmployeeService; import org.satel.ressatel.service.SkillService; 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("employeeSkillRatingView") @Scope(value = WebApplicationContext.SCOPE_REQUEST, proxyMode = ScopedProxyMode.TARGET_CLASS) @Getter @Setter @Log4j2 public class EmployeeSkillRatingView { private String id; private List<Map.Entry<Skill, SkillGrade>> skillList; private final EmployeeService employeeService; private final SkillService skillService; @Inject public EmployeeSkillRatingView(EmployeeService employeeService, SkillService skillService) { this.employeeService = employeeService; this.skillService = skillService; } public void onload() { Employee employee = employeeService.getByStringId(id); if (!skillService.getSkillMap(employee).isEmpty()) { skillList = new ArrayList<>(skillService.getSkillMap(employee).entrySet()); } } }
В результате получим вывод, какой нам и требовался:
Здесь вы еще видите отдельную кнопку "Редактировать". И редактирование композитных компонентов, составленных из нескольких базовых, также является интересной и не тривиальной задачей - ее мы разберем в продолжениях статьи.
Дополнительным бонусом поясню еще один тонкий момент в коде данного компонента. Обратите внимание, что класс компонента помечен аннотацией
@Scope(value = WebApplicationContext.SCOPE_REQUEST, proxyMode = ScopedProxyMode.TARGET_CLASS)
Это аннотация из Spring, и означает она, что новый экземпляр бина компонента будет создаваться каждый раз при запросе компонента из новой xhtml страницы в нашем приложении. Особенно важно это, когда у вас в приложении есть списки сущностей и карточки отдельных сущностей. Например, если бы этой аннотации не было, то происходило бы следующее: вы открываете карточку сотрудника и видите данные, полученные компонентом для этой карточки. Затем закрываете карточку и открываете карточку второго сотрудника, и вместо данных для него вы увидите в ней данные компонента, полученные для первого же сотрудника. Вы не сможете получить уникальные данные компонента для каждого сотрудника отдельно. Однако, как вы уже догадались, в Jakarta EE есть собственная аннотация @RequestScoped, которая, казалось бы, призвана выполнять ту же самую функцию. Но предупреждаю сразу - в моей конфигурации приложения (то есть при интеграции Srping + JSF + Primefaces) эта аннотация не работает, один и тот же бин все равно создается в первой же карточке сотрудника и затем подставляется в остальные карточки со всеми своими данными, что нам категорически не нужно - то есть аннотация @RequestScoped не является полным аналогом соответствующей аннотации Spring, по крайней мере, при интеграции Spring и Primefaces. Вполне возможно, что в приложении на чистой Jakarta EE эта аннотация и будет работать, но не в нашем случае.
В заключение приглашаю на бесплатный вебинар от OTUS, где рассмотрим экосистему технологий Java, спектр областей, которые обслуживает Java. Поговорим о том, какие компании активно используют Java в своих IT-продуктах. Посмотрим на географию компаний и карьерных предложений. Обоснуем верный выбор Java как профессионального стека для устойчивой карьеры.
