JSF - Reglas de Navegacion

JSF - Reglas de Navegación
Las reglas de navegación consiste en el componente de JSF para moverse de una página a otra en el sitio o Aplicación WEB.

Se pueden escribir de diferentes maneras, en al View o Facelets; colocando el nombre de la vista o un nombre del resultado que puede dirigir a otra página, también se puede colocar como resultado de una llamada a un método acción, o especificar en un XML faces-config.xml las reglas de navegación.
a
En el archivo faces-config se pueden definir, si la regla afecta a una vista determinada o a todas las vistas; se puede determinar a cuáles métodos de acción afectan, con qué tipo de resultado y puede tener una condición para tomar esa navegación.

Redirigiendo la VISTA

La navegabilidad puede tener 2 caminos:

1) Forward

 Consiste en pasar la vista en el servidor, se mantiene el Objeto de Request.

2) Redirect

Consiste en enviar al Browser una instrucción para redirigir la vista.

Utilizando el Faces-Config.xml

Controlador o ManagedBean

package com.roshka.tutorial.jsf;

import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name = "pageController1")
@RequestScoped
public class PageController1 {
 private static org.apache.log4j.Logger logger = org.apache.log4j.Logger
   .getLogger(PageController1.class);
 private String name;

 public String save() {
  logger.info("PageController1.save: ");
  if (name.isEmpty()) {
   return "warning";
  }
  name = "saved";
  return "success";
 }

 public String remove() {
  logger.info("PageController1.remove: ");
  if (name.isEmpty()) {
   return "warning";
  }
  name = "removed";
  return "success";
 }

 List items = new ArrayList();

 public List getItems() {
  return items;
 }

 public void setItems(List items) {
  this.items = items;
 }

 public String add() {
  if (!name.isEmpty()) {
   items.add(name);
  }
  return "success";
 }

 public String cancel() {
  logger.info("PageController1.cancel: ");
  if (name.isEmpty()) {
   return "cancelled?faces-redirect=true";
  }
  name = "cancelled";
  return "/cancelled.xhtml?faces-redirect=true";
 }

 public String page2() {
  return "/page2.xhtml";
 }

 public String redirectPage2() {
  return "/page2.xhtml?faces-redirect=true";
 }

 public String getName() {
  return name;
 }

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

}

Para Cualquier Vista

<navigation-rule>
  
  <navigation-case>
   <from-action>#{pageController1.add}</from-action>
   <to-view-id>/more-items.xhtml</to-view-id>
  </navigation-case>
 </navigation-rule>

Desde una determinada Vista

<navigation-rule>
  <from-view-id>/page1.xhtml</from-view-id>

  <navigation-case>
   <from-action>#{pageController1.save}</from-action>
   <to-view-id>/page1.xhtml</to-view-id>
  </navigation-case>
  
 </navigation-rule>

Con una condición

<navigation-case>
   <from-action>#{pageController1.add}</from-action>
   <if>#{empty pageController1.items}</if>
   <to-view-id>/first-item.xhtml</to-view-id>
  </navigation-case>

Redirigiendo

<navigation-rule>
  <from-view-id>/page1.xhtml</from-view-id>

  <navigation-case>
   <from-action>#{pageController1.remove}</from-action>
   <from-outcome>success</from-outcome>
   <to-view-id>/page2.xhtml</to-view-id>
   <redirect></redirect>
  </navigation-case>
  
 </navigation-rule>

Agregar parámetro URL de Redirección

<navigation-rule>
  <from-view-id>/page1.xhtml</from-view-id>

  <navigation-case>
   <from-action>#{pageController1.save}</from-action>
   <to-view-id>/page1.xhtml</to-view-id>
  </navigation-case>
  <navigation-case>
   <from-action>#{pageController1.save}</from-action>
   <from-outcome>success</from-outcome>
   <to-view-id>/page2.xhtml</to-view-id>
   <redirect>
    <view-param>
     <name>opt</name>
     <value>save</value>
    </view-param>
    <view-param>
     <name>name</name>
     <value>#{pageController1.name}</value>
    </view-param>
   </redirect>
  </navigation-case>
  
 </navigation-rule>

Desde la Vista

Con un resultado y definición

<navigation-rule>
  <navigation-case>
   <from-outcome>cancelled</from-outcome>
   <to-view-id>/cancelled-page.xhtml</to-view-id>
  </navigation-case>
 </navigation-rule>

<h:commandLink value="Cancelar desde View" action="cancelled"
   styleClass="btn btn-sm btn-primary">
  </h:commandLink>

Directamente a la vista

<h:commandLink value="page1" action="/page1.xhtml"
   styleClass="btn btn-sm btn-primary">
  </h:commandLink>

Redirigiendo

  <h:commandButton value="Página 1"
   action="/page1.xhtml?faces-redirect=true"
   styleClass="btn btn-sm btn-primary">
  </h:commandButton>

Desde el Managed Bean

Con un resultado

public String save() {
  logger.info("PageController1.save: ");
  if (name.isEmpty()) {
   return "warning";
  }
  name = "saved";
  return "success";
 }

Directamente a la vista

public String page2() {
  return "/page2.xhtml";
}

Redirigiendo

 public String redirectPage2() {
  return "/page2.xhtml?faces-redirect=true";
 }

Descargar Ejemplos

JSF - Converters & Validators

Descargar ejemplos desde Aquí

Save State & Managed Beans - Scopes

Managed Beans - Scopes

Existen diferentes niveles o alcances de ManagedBeans,

Request Scope

Se instancia y se pobla el Bean en cada request, con información de Request.

package com.roshka.tutorial.jsf;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name = "requestBean")
@RequestScoped
public class RequestManagedBean {
 private static org.apache.log4j.Logger logger = org.apache.log4j.Logger
   .getLogger(RequestManagedBean.class);

 Form form;

 public RequestManagedBean() {
  logger.info("RequestManagedBean.RequestManagedBean: constructor");
 }

 @PostConstruct
 public void postConstruct() {
  logger.info("RequestManagedBean.postConstruct: ");
  form = new Form();
  form.setName("Name...");
 }

 public String save() {
  logger.info("RequestManagedBean.save: ");
  logger.info("RequestManagedBean.save: " + form.getName());
  return null;
 }

 public String save(Form form) {
  logger.info("RequestManagedBean.save: ");
  this.form = form;
  return null;
 }

 public Form getForm() {
  return form;
 }

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

}

View Scope (Desde JSF 2)

En el primer GET al VIEW se instancia el BEAN, se guarda la instancia en la Sesión del usuario pero solo puede ser accedida desde el mismo VIEW.

package com.roshka.tutorial.jsf;

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

@ManagedBean(name = "viewBean")
@ViewScoped
public class ViewManagedBean {
 private static org.apache.log4j.Logger logger = org.apache.log4j.Logger
   .getLogger(ViewManagedBean.class);
 Form form;

 public ViewManagedBean() {
  logger.info("ViewManagedBean.ViewManagedBean: constructor");
 }

 @PostConstruct
 public void postConstruct() {
  logger.info("ViewManagedBean.postConstruct: ");
  form = new Form();
  form.setName("Name...");
 }

 public String save() {
  logger.info("ViewManagedBean.save: ");
  logger.info("ViewManagedBean.save: " + form.getName());
  return null;
 }
 public String save(Form form) {
  logger.info("ViewManagedBean.save: ");
  this.form = form;
  return null;
 }

 public Form getForm() {
  return form;
 }

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

Session Scope

Se crea una instancia por Sesión y para todas las Views se comparte la misma instancia

package com.roshka.tutorial.jsf;

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

@ManagedBean(name = "sessionBean")
@SessionScoped
public class SessionManagedBean {
 private static org.apache.log4j.Logger logger = org.apache.log4j.Logger
   .getLogger(SessionManagedBean.class);

 Form form;

 public SessionManagedBean() {
  logger.info("SessionManagedBean.SessionManagedBean: constructor ");
 }

 @PostConstruct
 public void postConstruct() {
  logger.info("SessionManagedBean.SessionManagedBean: ");
  form = new Form();
  form.setName("Name...");
 }

 public String save() {
  logger.info("SessionManagedBean.save: ");
  logger.info("SessionManagedBean.save: " + form.getName());
  return null;
 }
 public String save(Form form) {
  logger.info("SessionManagedBean.save: ");
  this.form = form;
  return null;
 }
 public Form getForm() {
  return form;
 }

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

ApplicationScope

Se crea una instancia para la aplicación, Se comparte entre todos los Views de Todas las Sesiones. Ojo! No utilizar para guardar información sensible de un usuario.

package com.roshka.tutorial.jsf;

import javax.annotation.PostConstruct;
import javax.faces.bean.ApplicationScoped;
import javax.faces.bean.ManagedBean;

@ManagedBean(name = "applicationBean")
@ApplicationScoped
public class ApplicationManagedBean {
 private static org.apache.log4j.Logger logger = org.apache.log4j.Logger
   .getLogger(ApplicationManagedBean.class);
 Form form;

 public ApplicationManagedBean() {
  logger.info("ApplicationManagedBean.ApplicationManagedBean: constructor");
 }

 @PostConstruct
 public void postConstruct() {
  logger.info("ApplicationManagedBean.postConstruct: ");
  form = new Form();
  form.setName("Name...");
 }

 public String save() {
  logger.info("ApplicationManagedBean.save: ");
  logger.info("ApplicationManagedBean.save: " + form.getName());
  return null;
 }
 public String save(Form form) {
  logger.info("ApplicationManagedBean.save: ");
  this.form = form;
  return null;
 }

 

 public Form getForm() {
  return form;
 }

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

Se puede ver utilizando los ejemplos

request-scope/example.xhtml
view-scope/example.xhtml
session-scope/example.xhtml
application-scope/example.xhtml
all-scopes/example.xhtml

 Save Views State

Para guardar la información del Estado de del View (ViewSate) se pueden seleccionar entre guardar en el Servidor o Guardar en el Servidor; Guardar en el Servidor implica consumo de memoria y Guardar en el Cliente implica mayor tráfico de Red.

Server Side

<context-param>
  <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
  <param-value>server</param-value>
 </context-param>

Client Side

<context-param><param-name>javax.faces.STATE_SAVING_METHOD</param-name>
  <param-value>client</param-value>
 </context-param>

Enlace Interesante

Para conocer más acerca de Save State, se puede leer la siguiente discusión stackoverflow.com
Descargar ejemplos desde Aquí

Guía de Trabajo - Datatable - ABM de Producto

Hoy estaremos realizando lo siguiente,

Aprovecharemos los conceptos de Ciclo de Vida de JSF, Managed Bean(ViewScope) y haremos lo siguiente

Descargar el Siguiente Proyecto Java

example-jdbc-derby.zip

Hacer una Página JSF que liste todos los Productos, (utilizar API de Proyecto descargado), Crear Nuevo Producto, Modificar Productos Existentes, Eliminar Productos, etc.

Para Mostrar una lista de Productos, utilizar el componente Datatable que se muestra en el siguiente ejemplo:

<h:dataTable value="#{productoManagedBean.list}" var="item">
      <h:column>
       <f:facet name="header">
        <h:outputText value="Nombre"></h:outputText>
       </f:facet>
       <h:outputText value="#{item.nombre}"></h:outputText>
      </h:column>
      <!-- Completar columnas que faltan -->
      <h:column>
       <f:facet name="header">
        <h:outputText value="Modificar"></h:outputText>
       </f:facet>
       <h:commandButton value="Modificar" action="#{productoManagedBean.modificar(item)}"></h:commandButton>
      </h:column>
      <h:column>
       <f:facet name="header">
        <h:outputText value="Eliminar"></h:outputText>
       </f:facet>
       <h:commandButton value="Modificar" action="#{productoManagedBean.eliminar(item)}"></h:commandButton>
      </h:column>
     </h:dataTable>

Utilizar el Siguiente ManagedBean como Plantilla Base

package com.roshka.tutorial.jsf;

import java.util.List;

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

import com.roshka.examples.jdbc.Producto;

@ManagedBean(name = "productoManagedBean")
@ViewScoped
public class ProductoABM {
 private Producto oldValue;
 private Producto newValue;
 
 public boolean editMode = false;
 public List list = null;

 public ProductoABM() {

 }

 @PostConstruct
 // método que se llama después de construir e inyectar todas las propiedades
 public void postConstruct() {
  // llenar la lista de productos

 }

 public String guardarCambios() {
  // TODO
  return null;
 }

 public String crearNuevoProducto() {
  // TODO
  return null;

 }

 public String cancelar() {
  // TODO
  return null;
 }

 public String modificar(Producto producto) {
  // TODO
  return null;
 }

 public Producto getOldValue() {
  return oldValue;
 }

 public void setOldValue(Producto oldValue) {
  this.oldValue = oldValue;
 }

 public Producto getNewValue() {
  return newValue;
 }

 public void setNewValue(Producto newValue) {
  this.newValue = newValue;
 }

 public boolean isEditMode() {
  return editMode;
 }

 public void setEditMode(boolean editMode) {
  this.editMode = editMode;
 }

}

JSF - Lenguaje de Expresión y Objetos Implicitos

JSF Lenguaje de Expresión y Objetos Implicitos

Lenguajes de Expresión (wikipedia)

El lenguaje de expresiones comenzó como una parte de la JavaServer Pages Standard Tag Library (JSTL) y fue llamado originalmente SPEL (Simplest Possible Expression Language), y después simplemente Expression Language (EL). Era un lenguaje de script que permitía el acceso a los componentes de
Java(JavaBeans) a través de JSP. Desde JSP 2.0, se ha utilizado dentro de las etiquetas JSP para separar el código Java de JSP, y para permitir un acceso más fácil a los componentes de Java (que en código Java).Con los años, el lenguaje de expresiones ha evolucionado para incluir una funcionalidad más avanzada y fue incluido en la especificación JSP 2.0. El scripting se hizo más fácil para los diseñadores de contenido web que tienen poco o prácticamente ningún conocimiento del núcleo del lenguaje Java. Este lenguaje de script convirtió verdaderamente a JSP en un lenguaje de script. Antes de EL, JSP consistía en algunas etiquetas especiales como scriptlets, expresiones, etc. dentro de las cuales el código Java era escrito de forma explícita. Con EL el diseñador de contenido web sólo necesita saber cómo hacer las llamadas apropiadas a los métodos básicos de Java.EL era, tanto sintáctica como semánticamente, similar a las expresiones de JavaScript no hay conversión de tipos explícita

• las conversiones de tipos se hacen generalmente de forma implícita

• las comillas dobles y simples son equivalentes

• objeto.propiedad tiene el mismo significado que objeto['propiedad']

EL también liberó al programador de tener que conocer las particularidades de cómo se accede en realidad a los valores: objeto.propiedad puede significar (dependiendo de qué objeto se trata) o bien object.get("propiedad") o object.getProperty("propiedad") o object.getPropiedad(), etc.
Durante el desarrollo de JSP 2.0, la tecnología JavaServer Faces fue publicada, la cual también necesitaba un lenguaje de expresiones, pero el lenguaje de expresiones definido en la especificación JSP 2.0 no satisfacía todas las necesidades para el desarrollo con la tecnología JSF. La limitación más obvia es que sus expresiones son evaluadas de inmediato. Y también, los componentes de JSF necesitan una manera de invocar métodos de objetos del lado del servidor. Un lenguaje más poderoso fue creado con las siguientes nuevas características:

• Expresiones diferidas, que no se evalúan de inmediato

• Expresiones que pueden establecer (set), así como recuperar datos (get)

• Expresiones de métodos, que pueden invocar métodos

El nuevo lenguaje de expresiones funcionó bien para los fines de JSF. Pero los desarrolladores tenían problemas en la integración de JSP EL con JSF EL debido a conflictos. Debido a estas incompatibilidades, la iniciativa "lenguaje de expresión unificado" comenzó para unificar estos lenguajes de expresiones. A partir de JSP 2.1, los lenguajes de expresión de JSP 2.0 y JSF 1.1 se han fusionado en un solo lenguaje de expresiones unificado (EL 2.1).
La versión 3.0 del lenguaje de expresiones (la palabra "unificado" ya no se consideró necesaria) se desarrolló en un JSR independiente de las especificaciones de JSP y JSF, en el JSR-341. Se agregaron algunas nuevas características, las más notables fueron los equivalentes en EL a los streams y expresiones lambda de Java 7.¹El nuevo EL unificado es una unión de los lenguajes de expresiones de JSP y JSF. Además de las características ya disponibles en el EL de JSP, el EL unificado tiene las siguientes características:

• Evaluación diferida

• Soporte para expresiones que pueden establecer valores y expresiones que pueden invocar métodos

• Una API enchufable para resolver expresiones

Lista de Operadores de EL

Lista de Orden de Precedencia

Objetos Implicitos

Son nombres de variables que hacen referencia a Objetos de uso común como el HttpServletRequest en un request, los Parámetros de Request etc.

Aquí está una lista de Objetos Implitos de JSF

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

    <h:selectOneMenu value="#{formBean.form.formaPago}"
      converter="#{formBean.converter}" label="forma Pago">
      <f:selectItem value="#{null}"
      itemLabel="-- Seleccione Forma de Pago --"></f:selectItem>
      <f:selectItems var="item" value="#{formBean.formaPagos}"
      itemLabel="#{item.label}" id="select_items"></f:selectItems>
      </h:selectOneMenu>

<h:outputText value="El Cliente es Premium"
      rendered="#{formBean.form.premium and !formBean.edit}"
      style="border:1px solid red;background:red;color:white"></h:outputText>

<h:outputText value="#{formBean.form.id mod 2 == 0?'Par':'Impar'}"
       rendered="#{!formBean.edit}"></h:outputText>
      
      <h:outputText value="El Pago Fue contado"
       rendered="#{!formBean.edit and formBean.form.formaPago.id==1}"></h:outputText>
      
      <h:outputText value="El Pago No fué Contado"
       rendered="#{!formBean.edit and formBean.form.formaPago.id ge 1}"></h:outputText>

<f:metadata>
 <f:viewParam name="id" value="#{formBean.id}"></f:viewParam>
</f:metadata>

 static String findNameById(Integer id) {
  if (id == null)
   return "completar el nombre";
  if (id == 1) {
   return "Nery Patán";
  } else if (id == 2) {
   return "Roberto Martínez'";
  } else if (id == 3) {
   return "Michael Asturias";
  } else if (id == 4) {
   return "Erick Ponce";
  } else if (id == 5) {
   return "Javier Ralda";
  } else {
   return "Federico Arriola";
  }
 }

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

 public Integer getId() {
  return id;
 }

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

Bibliotecas JSF - Core y HTML

Etiquetas de JSF

JSF provee en su API un conjunto estándar de Bibliotecas de Etiquetas, para enriquecer o alimentar nuestra interfaz: Podemos alimentar nuestra interfaz con Paneles, Campos de Entrada, Campos de Salida, Grilla de Datos, etc.

• Core
• Html
• Composite

JSF provee en su API, para en caso que estas librerías no alcance la necesidad, desarrollar bibliotecas adicionales con sus respectivas etiquetas.

Referencia de Bibliotecas Core, Composite y HTML de JSF

Bibliografía http://www.jsftoolbox.com/

Biblioteca Core

Es una biblioteca que contiene típicamente componentes no visuales y auxiliares, ejemplo asociar un convertidor a un Componente de UIInput

Tag Name	Description	Since
f:actionListener	The ActionListener tag registers a javax.faces.event.ActionListener instance with the component.
f:ajax	JSF2 standardizes Asynchronous Javascript and XML (Ajax) functionality across JSF component libraries and introduces the f:ajax tag to provide Ajax capabilities in a standard way.	JSF 2.0
f:attribute	The Attribute tag is a name/value pair that sets the value of a named attribute on the component associated with the enclosing tag.
f:convertDateTime	The ConvertDateTime tag is useful for converting a date into a human-readable format and supports a range of formatting options.
f:convertNumber	The ConvertNumber tag registers a NumberConverter instance on the component associated with the enclosing tag.
f:converter	The Converter tag registers a Converter instance on the component associated with the enclosing tag.
f:event	[ Documentation pending ]	JSF 2.0
f:facet	The Facet tag registers a named facet on the component associated with the enclosing tag.
f:loadBundle	The LoadBundle tag loads a resource bundle for the Locale of the current view and stores it as a Map in request scope.
f:metadata	[ Documentation pending ]	JSF 2.0
f:param	The Param tag sets a parameter for the component associated with the enclosing tag.
f:phaseListener	[ Documentation pending ]	JSF 2.0
f:selectItem	The SelectItem tag adds a child UISelectItem component to the component associated with the enclosing tag.
f:selectItems	The SelectItems tag adds a child UISelectItems component to the component associated with enclosing tag.
f:setPropertyActionListener	[ Documentation pending ]
f:subview	The Subview tag creates a naming container (a container component with a unique identifier) that contains all JavaServer Faces core and custom tags on a nested page via "jsp:include" or any tag that dynamically includes another page from the same web application, such as JSTL's "c:import". The subview tag wraps JSF components contained in an included JSP or Facelets page that allows nested views.
f:validateBean	[ Documentation pending ]	JSF 2.0
f:validateDoubleRange	The ValidateDoubleRange tag registers a DoubleRangeValidator instance on the component associated with the enclosing tag.
f:validateLength	The ValidateLength tag registers a LengthValidator instance on the component associated with the enclosing tag.
f:validateLongRange	The ValidateLongRange tag registers a LongRangeValidator instance on the component associated with the enclosing tag.
f:validateRegex	[ Documentation pending ]	JSF 2.0
f:validateRequired	[ Documentation pending ]	JSF 2.0
f:validator	The Validator tag registers a named Validator instance on the component associated with the enclosing tag.
f:valueChangeListener	The ValueChangeListener tag registers a ValueChangeListener instance on the component associated with the enclosing tag.
f:verbatim	The Verbatim tag creates an output component as a child of the component associated with the enclosing tag.
f:view	The View tag is the container for all JavaServer Faces component tags used on a page.
f:viewParam	[ Documentation pending ]

Biblioteca HTML

Son los Componentes de Presentación, son utilizados para dar forma a la interfaz JSF

JSF HTML Tag Library

This tag library contains JavaServer Faces component tags for all UIComponent + HTML RenderKit Renderer combinations defined in the JavaServer Faces Specification.

Tag Name	Description	Since
h:body	This tag renders an HTML body element.	JSF 2.0
h:button	[ Documentation pending ]	JSF 2.0
h:column	The column tag renders a single column of data within a data table component.
h:commandButton	The commandButton tag renders an HTML submit button that can be associated with a backing bean or ActionListener class for event handling purposes.
h:commandLink	The commandLink tag renders an HTML anchor tag that behaves like a form submit button and that can be associated with a backing bean or ActionListener class for event handling purposes.
h:dataTable	The dataTable tag renders an HTML4 compliant table element that can be associated with a backing bean to obtain its data as well as for event handling purposes.
h:form	The form tag renders an HTML form element.
h:graphicImage	The graphicImage tag renders an HTML image tag.
h:head	This tag renders an HTML head element.	JSF 2.0
h:inputHidden	The inputHidden tag renders an HTML input element of the type "hidden".
h:inputSecret	The inputSecret tag renders an HTML input element of the type "password".
h:inputText	The inputText tag renders an HTML input element of the type "text".
h:inputTextarea	The inputTextarea tag renders an HTML "textarea" element.
h:link	[ Documentation pending ]	JSF 2.0
h:message	The message tag renders a message for a specific component.
h:messages	The messages tag renders all Faces messages for the current view.
h:outputFormat	The outputFormat tag renders parameterized text and allows you to customize the appearance of this text using CSS styles.
h:outputLabel	The outputLabel tag renders an HTML "label" element.
h:outputLink	The outputLink tag renders an HTML anchor tag with an "href" attribute.
h:outputScript	[ Documentation pending ]	JSF 2.0
h:outputStylesheet	[ Documentation pending ]	JSF 2.0
h:outputText	The outputText tag renders basic text on your JSF page.
h:panelGrid	The h:panelGrid tag renders an HTML4 compliant table element.
h:panelGroup	The panelGroup tag is a container component that renders its child components.
h:selectBooleanCheckbox	The SelectBooleanCheckbox tag renders an HTML input element of the type "checkbox".
h:selectManyCheckbox	The SelectManyCheckbox tag renders a list of HTML checkboxes.
h:selectManyListbox	The SelectManyListbox tag renders an HTML "select" list of any size with the "multiple" attribute present.
h:selectManyMenu	The SelectManyMenu tag renders an HTML "select" element with the "multiple" attribute present and the "size" attribute set to 1.
h:selectOneListbox	The SelectOneListbox tag renders an HTML "select" element of any size without the "multiple" attribute.
h:selectOneMenu	The SelectOneMenu tag renders an HTML "select" element with a "size" of 1 without the "multiple" attribute.
h:selectOneRadio	The SelectOneRadio tag renders a table of HTML "input" elements of the type "radio".

Composite (JSF 2)

Es la nueva Biblioteca de Composición de Interfaces.

Tag Name	Description	Since
composite:actionSource	[ Documentation pending ]
composite:attribute	[ Documentation pending ]
composite:editableValueHolder	[ Documentation pending ]
composite:extension	[ Documentation pending ]
composite:facet	[ Documentation pending ]
composite:implementation	[ Documentation pending ]
composite:insertChildren	[ Documentation pending ]
composite:insertFacet	[ Documentation pending ]
composite:interface	[ Documentation pending ]
composite:renderFacet	[ Documentation pending ]
composite:valueHolder	[ Documentation pending ]