Componentes JSF

Componentes JSF

Componentes JSF

En Publicaciones anteriorer hablamos del ciclo de vida del JSF,  como crear un proyecto JSF y como hacer un ejemplo "Hola Mundo" con JSF.

Ahora "complicaremos un poco" más esto. enriqueciendo y haciendo interfaces gráficas Web más completas.

La Interfaz JSF típicamente se realiza programando o armando un Archivo llamado facelets, (puede ser un xhtml o un jsp), Es un documento XML estructurado donde por medio de etiquetas se va armando el formulario. JSF nos ofrece un conjunto de etiquetas de UI agrupadas en Bibliotecas. Donde cada etiqueta tiene alguna de característica que podemos dividir en estos grupos:

• Inputs (Campos de Entrada)
• Outputs (Salida)
• Commands (Botones, UI de ejecución de Comandos)
• Get Requests (Botones, Enlaces de Petición)
• Selections (Campos de Chequeo, Listbox, menu, radio)
• Html Pages (Head, Body, Form, CSS, Script)
• Layouts (Paneles)
• Datatable (Tabla de Datos)
• Error and Messages

En el XML de acuerdo a la interfaz que se quiere realizar a partir del elemento raíz, se van agregando elementos. se puede representar como un Árbol

Core JSF - Geary

Cada uno de estas etiquetas están asociadas por una Clase Java que a su vez extiende de otra Clase Java, un componente UI de JSF extiende de la Clase UIComponent.html

El Elemento Nodo Raíz tambien es UIComponent tiene Clase UIViewRoot.html

A excepción del Nodo raiz(Árbol de UI), todos los otros elementos tiene un UIComponent Padre, y pueden tener muchos nodos hijos de clase UIComponent.

Como vemos en la imágen podemos tener un nodo Formulario, necesario para hacer un formulario y este va ser representado por uno de Clase UIForm y a este nodo le enriquecemos con componentes de clase UICommand e UIInput o UIOutput

Los UICommand e UIInput o UIOutput son Componentes de UI muy genéricos y podemos utilizar otros más específicos como (podemos ver que UIInput extiende de UIOutput )

• HtmlCommandButton que extiende de UICommand
• HtmlCommandLink que también extiende de UICommand
• OutputText que extiende de UIOutput
• HtmlSelectBooleanCheckbox que extiende UIInput

De acuerdo a nuestras necesidades vamos a ir viendo todos los componentes que podemos ir utilizando, hay mucho material en la Web, y Tablas de Referencia.

• Html TagReference

Más Adelante iremos viendo que es y como escribir Expresiones EL de JSF, por el momento nos enfocaremos en entender el Árbol de JSF.

No todas las etiquetas son componentes de UI existen etiquetas que se utiliza como auxiliar para un componente de UI

Referencia de Biblioteca de Etiquetas que no son UI Components

• Core TagLib

En el ciclo de Vida de JSF, la primera fase es la de Restore View. En esta fase se obtiene el HttpServletRequest y se lee toda las información de Petición, URI, Método, Parámetros, Información de Cabecera y  a partir de eso se recupera una instancia de un Objeto UIViewRoot. Si es la primera vez crea una instancia a partir del procesamiento del Facelets con su/s respectivos ManagedBean. Ese procesamiento genera un Arbol que tiene como raíz el UIViewRoot. Se procesa cada etiqueta y se genera un UIComponent con las etiquetas de UI y se completa la información necesaria a partir de las etiquetas de la Biblioteca Core u otras Etiquetas que no son de UI.

Cuando se utiliza un componente es importante ir conociendo las propiedades que uno puede utilizar, las más comunes que uno utiliza serían:

Para los componentes que implementan ValueHolder (UIOutput y todas las clases que extienden de ésta) es importante la propiedad "value" donde uno asocia por medio de un expresión JSF el valor que se va ligar value="#{bean.proX.subPropiedad}", que significa este componente tendrá como valor el valor de la propiedad "subPropiedad" del Bean que es propiedad "propX" del Managed Bean de nombre "Bean", Tambien tienen como propiedad converter, que es la Clase Converter que se encargará de mapear de Objeto a String, y String a Objeto a esa Propiedad.

Binding es una propiedad de los Tags de JSF que se utiliza para modificar propiedades del UIComponent asociando a una propiedad del ManagedBean.

Otra propiedad importante es "rendered" que significa que se mostrará si la expresión contenida retorna true (Verdadero), Todas los componentes (UIComponent) tienen propiedad rendered.

De acuerdo a la tabla de Referencia podemos ir por ejemplo a SelectOneRadio

Ejemplo (Form - Model)

package com.roshka.tutorial.jsf;

import java.util.Date;

public class Form {
 private String name;
 private Date birthdate;
 private Integer id;
 private FormaPago formaPago;
 private boolean premium = false;

 public String getName() {
  return name;
 }

 public void setName(String name) {
  this.name = name;
 }

 public Date getBirthdate() {
  return birthdate;
 }

 public void setBirthdate(Date birthdate) {
  this.birthdate = birthdate;
 }

 public Integer getId() {
  return id;
 }

 public void setId(Integer id) {
  this.id = id;
 }

 public FormaPago getFormaPago() {
  return formaPago;
 }

 public void setFormaPago(FormaPago formaPago) {
  this.formaPago = formaPago;
 }

 public boolean isPremium() {
  return premium;
 }

 public void setPremium(boolean premium) {
  this.premium = premium;
 }

}

Ejemplo (FormPago - Model)

package com.roshka.tutorial.jsf;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

public class FormaPago implements Serializable {
 private int id;
 private String label;

 public FormaPago() {
  // TODO Auto-generated constructor stub
 }

 public FormaPago(int id, String label) {
  super();
  this.id = id;
  this.label = label;
 }

 public int getId() {
  return id;
 }

 public void setId(int id) {
  this.id = id;
 }

 public String getLabel() {
  return label;
 }

 public void setLabel(String label) {
  this.label = label;
 }
 @Override
 public boolean equals(Object obj) {
  FormaPago formaPago = (FormaPago) obj;
  if (formaPago == null)
   return false;
  return this.getId()==formaPago.getId();
 }

 static List formasPago = null;

 static List getFormasPago() {
  if (formasPago != null)
   return formasPago;

  formasPago = new ArrayList();
  formasPago.add(new FormaPago(1, "Contado"));
  formasPago.add(new FormaPago(2, "Crédito"));
  return formasPago;
 }

}

Ejemplo (Controller - FormManagedBean)

package com.roshka.tutorial.jsf;

import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;


@ManagedBean(name = "formBean")
@ViewScoped
public class FormManagedBean {
 private String message = null;
 private boolean edit = true;
 private Form form;
 private List formaPagos = null;
 {
  formaPagos = FormaPago.getFormasPago();
  form = new Form();
 }

 public FormManagedBean() {
  // TODO Auto-generated constructor stub
 }
 //accion modificar cliente
 public String edit() {
  message = String.format("Modificar {%s} {%s} {%s} {%s}", form.getId(),
    form.getName(), form.getBirthdate(),
    (form.getFormaPago() != null ? form.getFormaPago().getLabel()
      : "- No se seleccionó Forma de Pago -"));
  edit = true;
  return null;
 }
 //accion guardar bean

 public void save() {
  message = String.format("Se guardó {%s} {%s} {%s} {%s}", form.getId(),
    form.getName(), form.getBirthdate(),
    (form.getFormaPago() != null ? form.getFormaPago().getLabel()
      : "- No se seleccionó Forma de Pago -"));
  edit = false;
 }

 public Form getForm() {
  return form;
 }

 public void setForm(Form form) {
  this.form = form;
 }

 public List getFormaPagos() {
  return formaPagos;
 }

 public void setFormaPagos(List formaPagos) {
  this.formaPagos = formaPagos;
 }

 public boolean isEdit() {
  return edit;
 }

 public void setEdit(boolean edit) {
  this.edit = edit;
 }

 public String getMessage() {
  return message;
 }

 public void setMessage(String message) {
  this.message = message;
 }

}

Ejemplo (Converter - FormaPagoConverter)

package com.roshka.tutorial.jsf;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.FacesConverter;

@FacesConverter(value = "com.roshka.CountryConverter")
public class FormaPagoConverter implements Converter {

 public Object getAsObject(FacesContext facesContext,
   UIComponent uiComponent, String source) {
  if (source == null || source.length() == 0)
   return null;
  String[] str = source.split("#");
  FormaPago fp = new FormaPago();
  fp.setId(Integer.parseInt(str[0]));
  fp.setLabel(str[1]);
  return fp;
 }

 public String getAsString(FacesContext facesContext,
   UIComponent uiComponent, Object source) {
  FormaPago fp = (FormaPago) source;
  if (fp != null)
   return fp.getId()+"#"+fp.getLabel();
  return "";

 }
}

Ejemplo (View - customer.xhtml)

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

<h:head>
 <title>Pago</title>
</h:head>

<h:body>
 <div class="container">
  <div class="row">
   <div class="col-md-6">
    <h:form styleclass="horizontal-form">
     <h:outputText value="Mensaje: #{formBean.message}"></h:outputText>

     <h:outputText
      rendered="#{formBean.form.premium and !formBean.edit}"
      style="background: red; border: 1px solid red; color: white;"
      value="El Cliente es Premium"></h:outputText>
     <h:panelGrid columns="2" rendered="#{!formBean.edit}">
      <h:outputLabel value="ID de Cliente"></h:outputLabel>
      <h:outputText value="#{formBean.form.id}"></h:outputText>
      <h:outputLabel value="Nombre de Cliente"></h:outputLabel>
      <h:outputText value="#{formBean.form.name}"></h:outputText>
      <h:outputLabel value="Fecha de Nacimiento de Cliente"></h:outputLabel>
      <h:outputText value="#{formBean.form.birthdate}">
       <f:convertDateTime pattern="dd/MM/yyyy"></f:convertDateTime>
      </h:outputText>
      <h:commandLink action="#{formBean.edit}" value="Modificiar"></h:commandLink>
     </h:panelGrid>

     <h:panelGrid columns="2" rendered="#{formBean.edit}">
      <h:outputLabel value="Id de Pago"></h:outputLabel>
      <h:inputText value="#{formBean.form.id}"></h:inputText>

      <h:panelGroup>
       <h:outputLabel value="Nombre de Cliente"></h:outputLabel>
       <h:inputText value="#{formBean.form.name}"></h:inputText>
      </h:panelGroup>
      <h:panelGroup>
       <h:outputLabel value="Fecha de Nacimiento de Cliente"></h:outputLabel>
       <h:inputText value="#{formBean.form.birthdate}">
        <f:convertDateTime pattern="dd/MM/yyyy"></f:convertDateTime>
       </h:inputText>
      </h:panelGroup>
      <h:outputLabel value="Plan Premium"></h:outputLabel>
      <h:selectBooleanCheckbox value="#{formBean.form.premium}"></h:selectBooleanCheckbox>
      <h:outputLabel value="Forma de Pago"></h:outputLabel>
      
      <h:selectOneMenu value="#{formBean.form.formaPago}" converter="com.roshka.CountryConverter">
       <f:selectItem value="#{null}" itemLabel="--- Seleccione forma Pago"></f:selectItem>
       <f:selectItems value="#{formBean.formaPagos}" var="item" itemValue="#{item}" itemLabel="#{item.label}"></f:selectItems>
      
      </h:selectOneMenu>
      

      <h:commandButton action="#{formBean.save}"
       styleclass="btn btn-sm btn-primary" value="Ejecutar">

      </h:commandButton>
     </h:panelGrid>
    </h:form>
   </div>
  </div>
 </div>
</h:body>
</html>

Ejemplo