JSF - Componentes compuestos

JSF proporciona a los desarrolladores una poderosa capacidad para definir sus propios componentes personalizados, que pueden usarse para renderizar contenidos personalizados.

Definir componente personalizado

La definición de un componente personalizado en JSF es un proceso de dos pasos.

Paso	Descripción
1a	Crea una carpeta de recursos. Cree un archivo xhtml en la carpeta de recursos con un espacio de nombres compuesto.
1b	Utilice etiquetas compuestas compuesto: interfaz, compuesto: atributo y compuesto: implementación, para definir el contenido del componente compuesto. Utilice cc.attrs en compuesto: aplicación para obtener la variable definida usando compuesto: atributo de compuesto: interfaz .

Paso 1a: Cree un componente personalizado: loginComponent.xhtml

Cree una carpeta tutorialspoint en la carpeta de recursos y cree un archivo loginComponent.xhtml en ella.

Utilice un espacio de nombres compuesto en el encabezado 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>

Paso 1b: use etiquetas compuestas: loginComponent.xhtml

La siguiente tabla describe el uso de etiquetas compuestas.

S. No	Etiqueta y descripción
1	composite:interface Declara valores configurables que se utilizarán en la implementación compuesta.
2	composite:attribute Los valores de configuración se declaran mediante esta etiqueta.
3	composite:implementation Declara el componente JSF. Puede acceder a los valores configurables definidos en la interfaz compuesta: usando la expresión # {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 un componente personalizado en JSF es un proceso simple.

Paso	Descripción
2a	Cree un archivo xhtml y use el espacio de nombres del componente personalizado. El espacio de nombres será http://java.sun.com/jsf/ <folder-name> donde folder-name es la carpeta en el directorio de recursos que contiene el componente personalizado
2b	Utilice el componente personalizado como etiquetas JSF normales

Paso 2a: use el espacio de nombres 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">

Paso 2b: use la etiqueta personalizada: home.xhtml y pase los valores

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

Aplicación de ejemplo

Creemos una aplicación JSF de prueba para probar el componente personalizado en JSF.

Paso	Descripción
1	Cree un proyecto con un nombre helloworld en un paquete com.tutorialspoint.test como se explica en el capítulo JSF - Primera aplicación .
2	Cree la carpeta de recursos en src → carpeta principal .
3	Cree la carpeta tutorialspoint en src → main → carpeta de recursos .
4	Cree el archivo loginComponent.xhtml en src → main → resources → carpeta tutorialspoint .
5	Modifique el archivo UserData.java como se explica a continuación.
6	Modifique home.xhtml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
7	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.
8	Finalmente, compile la aplicación en forma de archivo war e impleméntela en Apache Tomcat Webserver.
9	Inicie su aplicación web utilizando la URL adecuada como se explica a continuación en el último paso.

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>

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación como lo hicimos en JSF - Capítulo Primera aplicación. Si todo está bien con su aplicación, esto producirá el siguiente resultado.

↰ Previous page Next page ↱