Los componentes compuestos JSF 2 son un mecanismo muy potente de extensión JSF 2 sin recurrir a código. Originalmente derivado de un mecanismo similar existente en Facelets la incorporación de estos al estándar JSF 2 ha permitido la evolución de esta técnica.

JSF’s strength has always been its component model, but that strength wasn’t fully realized until now because it was difficult to implement custom components with JSF 1. You had to write Java code, specify XML configuration, and have a good grasp of JSF’s life cycle. With JSF 2, you can implement custom components:

  • With no configuration, XML or otherwise.

  • With no Java code.

  • To which developers can attach functionality.

  • That hot-deploy when modified.__

Declaración como recursos

Un componente compuesto es cualquier fichero escrito mediante Facelets y puesto bajo el directorio resources, tal como habíamos hecho con las imágenes, CSS, etc. Por ejemplo si tenemos una libreria (directorio) dentro de resources con un fichero  loginPanel.xhtml se puede utilizar este componente declarando un espacio de nombres XML (namespace):

xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"

Y utilizando la etiqueta correspondiente:

<ez:loginPanel />

Sintaxis

Cualquier fragmento de Facelet es válido, incluyendo la utilización de otros componentes o las plantillas de Facelets. El único requisito es la declaración de la interfaz y la implementación con las siguientes etiquetas:

<composite:interface>
<composite:implementation>

Otras etiquetas

  • <composite:attribute>
  • <composite:editableValueHolder>
  • <composite:actionSource>

Parametrización del componente

Podemos declarar atributos que actúen como parámetros del componente.Los declaramos en la interfaz como:

<composite:attribute name="imatge"/>

Y podemos acceder a la implementación mediante la variable ‘cc’ que se resuelve con el EL como el propio componente. ‘cc’ corresponde con composite component.

<h:graphicImage value="#{cc.attrs.imatge}"/>

Parámetros opcionales con valores por defecte

<composite:attribute name="styleClass" default="icon" required="false"/>

Ejemplo

<!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:ez="http://java.sun.com/jsf/composite/ezcomp">
  <h:head>
    <title>A simple example of EZComp</title>
  </h:head>
  <h:body>
    <h:form>
      <ez:loginPanel id="loginPanel">
        <f:actionListener for="loginEvent"
        binding="#{bean.loginEventListener}" />
      </ez:loginPanel>
    </h:form>
  </h:body>
</html>

loginPanel.xhtml

<!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:ui="http://java.sun.com/jsf/facelets"
  xmlns:composite="http://java.sun.com/jsf/composite">
  <head>
    <title>Not present in rendered output</title>
  </head>
  <body>
    <composite:interface>
      <composite:actionSource name="loginEvent" />
    </composite:interface>
    <composite:implementation>
      <p>Username: <h:inputText id="usernameInput" /></p>
      <p>Password: <h:inputSecret id="passwordInput" /></p>
      <p><h:commandButton id="loginEvent" value="login"/>
    </composite:implementation>
  </body>
</html>

Referencias