Учебники

JSF — Композитные компоненты

Октябрь 9, 2018

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

Определить пользовательский компонент

Определение пользовательского компонента в JSF является двухэтапным процессом.

шаг Описание
1a

Создайте папку ресурсов.

Создайте файл xhtml в папке ресурсов с составным пространством имен.

1б

Используйте составные теги композитный: интерфейс, композитный: атрибут и композитный: реализация, чтобы определить содержимое составного компонента. Используйте cc.attrs в композитный: реализация, чтобы получить переменную, определенную с использованием композитный: атрибут в композитный: интерфейс .

Создайте папку ресурсов.

Создайте файл xhtml в папке ресурсов с составным пространством имен.

Используйте составные теги композитный: интерфейс, композитный: атрибут и композитный: реализация, чтобы определить содержимое составного компонента. Используйте cc.attrs в композитный: реализация, чтобы получить переменную, определенную с использованием композитный: атрибут в композитный: интерфейс .

Шаг 1а. Создание пользовательского компонента: loginComponent.xhtml

Создайте папку tutorialspoint в папке ресурсов и создайте в ней файл loginComponent.xhtml.

Используйте составное пространство имен в HTML-заголовке. 

<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:composite = "http://java.sun.com/jsf/composite">
...
</html>

Шаг 1b: Используйте составные теги: loginComponent.xhtml

В следующей таблице описано использование составных тегов.

S.No Тег и описание
1

композитный: интерфейс

Объявляет настраиваемые значения, которые будут использоваться в составном: реализация.

2

Композиционный: атрибут

Значения конфигурации объявляются с использованием этого тега.

3

Композиционный: осуществление

Объявляет компонент JSF. Может получить доступ к конфигурируемым значениям, определенным в составном интерфейсе: используя выражение # {cc.attrs.attribute-name}.

композитный: интерфейс

Объявляет настраиваемые значения, которые будут использоваться в составном: реализация.

Композиционный: атрибут

Значения конфигурации объявляются с использованием этого тега.

Композиционный: осуществление

Объявляет компонент JSF. Может получить доступ к конфигурируемым значениям, определенным в составном интерфейсе: используя выражение # {cc.attrs.attribute-name}. 

<composite:interface>
   <composite:attribute name = "usernameLabel" />
   <composite:attribute name = "usernameValue" />
</composite:interface>

<composite:implementation>
<h:form>
   #{cc.attrs.usernameLabel} : 
   <h:inputText id = "username" value = "#{cc.attrs.usernameValue}" />
</h:form>

Использовать пользовательский компонент

Использование пользовательского компонента в JSF — это простой процесс.

шаг Описание
2а Создайте файл xhtml и используйте пространство имен пользовательского компонента. Пространство имен будет http://java.sun.com/jsf/ <имя-папки>, где имя-папки — это папка в каталоге ресурсов, содержащем пользовательский компонент
2b Используйте пользовательский компонент как обычные теги JSF

Шаг 2а. Использование пользовательского пространства имен: home.xhtml 

<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:ui = "http://java.sun.com/jsf/facelets">
   xmlns:tp = "http://java.sun.com/jsf/composite/tutorialspoint">

Шаг 2b. Используйте пользовательский тег: home.xhtml и передавайте значения 

<h:form>
   <tp:loginComponent 
      usernameLabel = "Enter User Name: " 
      usernameValue = "#{userData.name}" />
</h:form>

Пример приложения

Давайте создадим тестовое приложение JSF для тестирования пользовательского компонента в JSF.

шаг Описание
1 Создайте проект с именем helloworld в пакете com.tutorialspoint.test, как описано в главе « JSF — первое приложение» .
2 Создайте папку ресурсов в src → main folder.
3 Создайте папку tutorialspoint в папке src → main → resources .
4 Создайте файл loginComponent.xhtml в папке src → main → resources → tutorialspoint .
5 Измените файл UserData.java, как описано ниже.
6 Измените home.xhtml, как описано ниже. Оставьте остальные файлы без изменений.
7 Скомпилируйте и запустите приложение, чтобы убедиться, что бизнес-логика работает в соответствии с требованиями.
8 Наконец, соберите приложение в виде файла war и разверните его на веб-сервере Apache Tomcat.
9 Запустите ваше веб-приложение, используя соответствующий URL-адрес, как описано ниже в последнем шаге.

loginComponent.xhtml 

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:composite = "http://java.sun.com/jsf/composite">
   
   <composite:interface>
      <composite:attribute name = "usernameLabel" />
      <composite:attribute name = "usernameValue" />
      <composite:attribute name = "passwordLabel" />
      <composite:attribute name = "passwordValue" />
      <composite:attribute name = "loginButtonLabel" />
      <composite:attribute name = "loginButtonAction" 
         method-signature = "java.lang.String login()" />
   </composite:interface>
   
   <composite:implementation>
      <h:form>
         <h:message for = "loginPanel" style = "color:red;" />
         
         <h:panelGrid columns = "2" id = "loginPanel">
            #{cc.attrs.usernameLabel} : 
            <h:inputText id = "username" value = "#{cc.attrs.usernameValue}" />
            #{cc.attrs.passwordLabel} : 
            <h:inputSecret id = "password" value = "#{cc.attrs.passwordValue}" />
         </h:panelGrid>
         
         <h:commandButton action = "#{cc.attrs.loginButtonAction}" 
            value = "#{cc.attrs.loginButtonLabel}"/>
      </h:form>
   </composite:implementation>
</html>

UserData.java 

package com.tutorialspoint.test;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {
   private static final long serialVersionUID = 1L;
   private String name;
   private String password;
   
   public String getName() {
      return name;
   }
   
   public void setName(String name) {
      this.name = name;
   }
   
   public String getPassword() {
      return password;
   }
   
   public void setPassword(String password) {
      this.password = password;
   }	
   
   public String login() {
      return "result";
   }	
}

home.xhtml 

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:tp = "http://java.sun.com/jsf/composite/tutorialspoint">
   
   <h:head>
      <title>JSF tutorial</title>		     
   </h:head>
   
   <h:body> 
      <h2>Custom Component Example</h2>
      
      <h:form>
      <tp:loginComponent 
         usernameLabel = "Enter User Name: " 
         usernameValue = "#{userData.name}" 
         passwordLabel = "Enter Password: " 
         passwordValue = "#{userData.password}"
         loginButtonLabel = "Login" 
         loginButtonAction = "#{userData.login}" />
      </h:form>
   </h:body>
</html>

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

53
Share: