JSF - Componentes Compostos

O JSF fornece aos desenvolvedores um recurso poderoso para definir seus próprios componentes personalizados, que podem ser usados para renderizar conteúdos personalizados.

Definir componente personalizado

Definir um componente personalizado no JSF é um processo de duas etapas.

Degrau	Descrição
1a	Crie uma pasta de recursos. Crie um arquivo xhtml na pasta de recursos com um namespace composto.
1b	Use as tags compostas composto: interface, composto: atributo e composto: implementação, para definir o conteúdo do componente composto. Use cc.attrs em composite: deployment para obter a variável definida usando composite: attribute em composite: interface .

Etapa 1a: Crie um componente personalizado: loginComponent.xhtml

Crie uma pasta tutorialspoint na pasta de recursos e crie um arquivo loginComponent.xhtml nela.

Use namespace composto no cabeçalho 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>

Etapa 1b: Use Tags compostas: loginComponent.xhtml

A tabela a seguir descreve o uso de tags compostas.

S.Não	Tag e descrição
1	composite:interface Declara valores configuráveis a serem usados em composto: implementação.
2	composite:attribute Os valores de configuração são declarados usando esta tag.
3	composite:implementation Declara o componente JSF. Pode acessar os valores configuráveis definidos em composite: interface usando a expressão # {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>

Usar componente personalizado

Usar um componente personalizado no JSF é um processo simples.

Degrau	Descrição
2a	Crie um arquivo xhtml e use o namespace do componente personalizado. O namespace será o http://java.sun.com/jsf/ <folder-name> onde folder-name é a pasta no diretório de recursos que contém o componente personalizado
2b	Use o componente personalizado como tags JSF normais

Etapa 2a: use o namespace personalizado: 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">

Etapa 2b: usar tag personalizada: home.xhtml e passar valores

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

Aplicação de exemplo

Vamos criar um aplicativo JSF de teste para testar o componente personalizado no JSF.

Degrau	Descrição
1	Crie um projeto com o nome helloworld sob um pacote com.tutorialspoint.test conforme explicado no capítulo JSF - Primeira Aplicação .
2	Crie a pasta de recursos em src → pasta principal .
3	Crie a pasta tutorialspoint em src → principal → pasta de recursos .
4	Crie o arquivo loginComponent.xhtml na pasta src → principal → recursos → tutorialspoint .
5	Modifique o arquivo UserData.java conforme explicado abaixo.
6	Modifique home.xhtml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
7	Compile e execute o aplicativo para garantir que a lógica de negócios esteja funcionando de acordo com os requisitos.
8	Por fim, construa o aplicativo na forma de um arquivo war e implante-o no Apache Tomcat Webserver.
9	Inicie seu aplicativo da web usando o URL apropriado, conforme explicado a seguir na última etapa.

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>

Assim que você estiver pronto com todas as mudanças feitas, vamos compilar e rodar a aplicação como fizemos no capítulo JSF - Primeira Aplicação. Se tudo estiver bem com sua aplicação, isso produzirá o seguinte resultado.