viernes, 2 de mayo de 2014

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

viernes, 25 de abril de 2014

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í

viernes, 4 de abril de 2014

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;
 }

}

viernes, 28 de marzo de 2014

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.1El 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;
 }

viernes, 21 de marzo de 2014

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 )
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.



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


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












miércoles, 12 de marzo de 2014

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 NameDescriptionSince
f:actionListenerThe ActionListener tag registers a javax.faces.event.ActionListener instance with the component.
f:ajaxJSF2 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:attributeThe Attribute tag is a name/value pair that sets the value of a named attribute on the component associated with the enclosing tag.
f:convertDateTimeThe ConvertDateTime tag is useful for converting a date into a human-readable format and supports a range of formatting options.
f:convertNumberThe ConvertNumber tag registers a NumberConverter instance on the component associated with the enclosing tag.
f:converterThe Converter tag registers a Converter instance on the component associated with the enclosing tag.
f:event[ Documentation pending ]JSF 2.0
f:facetThe Facet tag registers a named facet on the component associated with the enclosing tag.
f:loadBundleThe 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:paramThe Param tag sets a parameter for the component associated with the enclosing tag.
f:phaseListener[ Documentation pending ]JSF 2.0
f:selectItemThe SelectItem tag adds a child UISelectItem component to the component associated with the enclosing tag.
f:selectItemsThe SelectItems tag adds a child UISelectItems component to the component associated with enclosing tag.
f:setPropertyActionListener[ Documentation pending ]
f:subviewThe 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:validateDoubleRangeThe ValidateDoubleRange tag registers a DoubleRangeValidator instance on the component associated with the enclosing tag.
f:validateLengthThe ValidateLength tag registers a LengthValidator instance on the component associated with the enclosing tag.
f:validateLongRangeThe 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:validatorThe Validator tag registers a named Validator instance on the component associated with the enclosing tag.
f:valueChangeListenerThe ValueChangeListener tag registers a ValueChangeListener instance on the component associated with the enclosing tag.
f:verbatimThe Verbatim tag creates an output component as a child of the component associated with the enclosing tag.
f:viewThe 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 NameDescriptionSince
h:bodyThis tag renders an HTML body element.JSF 2.0
h:button[ Documentation pending ]JSF 2.0
h:columnThe column tag renders a single column of data within a data table component.
h:commandButtonThe commandButton tag renders an HTML submit button that can be associated with a backing bean or ActionListener class for event handling purposes.
h:commandLinkThe 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:dataTableThe 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:formThe form tag renders an HTML form element.
h:graphicImageThe graphicImage tag renders an HTML image tag.
h:headThis tag renders an HTML head element.JSF 2.0
h:inputHiddenThe inputHidden tag renders an HTML input element of the type "hidden".
h:inputSecretThe inputSecret tag renders an HTML input element of the type "password".
h:inputTextThe inputText tag renders an HTML input element of the type "text".
h:inputTextareaThe inputTextarea tag renders an HTML "textarea" element.
h:link[ Documentation pending ]JSF 2.0
h:messageThe message tag renders a message for a specific component.
h:messagesThe messages tag renders all Faces messages for the current view.
h:outputFormatThe outputFormat tag renders parameterized text and allows you to customize the appearance of this text using CSS styles.
h:outputLabelThe outputLabel tag renders an HTML "label" element.
h:outputLinkThe 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:outputTextThe outputText tag renders basic text on your JSF page.
h:panelGridThe h:panelGrid tag renders an HTML4 compliant table element.
h:panelGroupThe panelGroup tag is a container component that renders its child components.
h:selectBooleanCheckboxThe SelectBooleanCheckbox tag renders an HTML input element of the type "checkbox".
h:selectManyCheckboxThe SelectManyCheckbox tag renders a list of HTML checkboxes.
h:selectManyListboxThe SelectManyListbox tag renders an HTML "select" list of any size with the "multiple" attribute present.
h:selectManyMenuThe SelectManyMenu tag renders an HTML "select" element with the "multiple" attribute present and the "size" attribute set to 1.
h:selectOneListboxThe SelectOneListbox tag renders an HTML "select" element of any size without the "multiple" attribute.
h:selectOneMenuThe SelectOneMenu tag renders an HTML "select" element with a "size" of 1 without the "multiple" attribute.
h:selectOneRadioThe 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 NameDescriptionSince
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 ]

Proyecto JSF 2 utilizando MyFaces con Eclipse y Maven


JSF 2.2 con MyFaces utilizando Maven (Lectura - Guía de Trabajo)

Maven

No existe motivos para no utilizar maven o alguna otra herramienta similar como Ivy,Gradle, etc para la construcción de un proyecto en Java, elegimos Maven por ser el más popular.
Maven Referencia(Wikipedia)
Maven es una herramienta de software para la gestión y construcción de proyectos Java creada por Jason van Zyl, de Sonatype, en 2002. Es similar en funcionalidad a Apache Ant (y en menor medida a PEAR de PHP y CPAN de Perl), pero tiene un modelo de configuración de construcción más simple, basado en un formato XML. Estuvo integrado inicialmente dentro del proyecto Jakarta pero ahora ya es un proyecto de nivel superior de la Apache Software Foundation.
Maven utiliza un Project Object Model (POM) para describir el proyecto de software a construir, sus dependencias de otros módulos y componentes externos, y el orden de construcción de los elementos. Viene con objetivos predefinidos para realizar ciertas tareas claramente definidas, como la compilación del código y su empaquetado.
Una característica clave de Maven es que está listo para usar en red. El motor incluido en su núcleo puede dinámicamente descargar plugins de un repositorio, el mismo repositorio que provee acceso a muchas versiones de diferentes proyectos Open Source en Java, de Apache y otras organizaciones y desarrolladores. Este repositorio y su sucesor reorganizado, el repositorio Maven 2, pugnan por ser el mecanismo de facto de distribución de aplicaciones en Java, pero su adopción ha sido muy lenta. Maven provee soporte no sólo para obtener archivos de su repositorio, sino también para subir artefactos al repositorio al final de la construcción de la aplicación, dejándola al acceso de todos los usuarios. Una caché local de artefactos actúa como la primera fuente para sincronizar la salida de los proyectos a un sistema local.

Convención sobre configuración

La filosofía general de Maven es la estandarización de las construcciones generadas por seguir el principio de Convención sobre Configuración, a fin de utilizar existentes modelos en la producción de software. Esta estrategia necesariamente restringe ampliamente la variabilidad, lo que se refleja en la exhortación de Maven a adherirse a su modelo de proyecto.3 Mientras que Maven es adecuado para nuevos proyectos, los proyectos complejos ya existentes pueden ser simplemente no adaptables para que utilicen Maven. La falta de restricciones de la convención de capas del proyecto fue hecha de alguna manera más configurable con el lanzamiento de Maven 2.

Reutilización

Maven está construido alrededor de la idea de reutilización, y más específicamente, a la reutilización de la lógica de construcción. Como los proyectos generalmente se construyen en patrones similares, una elección lógica podría ser reutilizar los procesos de construcción. La principal idea es no reutilizar el código o funcionalidad (como Apache Ant), sino simplemente cambiar la configuración o también código escrito. Esa es la principal diferencia entre Apache Ant y Apache Maven: el primero es una librería de utilidades y funciones buenas y útiles, mientras que la otra es un framework configurable y altamente extensible.4
Aunque Maven es configurable, históricamente el proyecto Maven ha enfatizado seriamente que los usuarios deben adherirse a su concepto de un modelo de proyecto estándar tanto como sea posible.

Ciclo de vida

Las partes del ciclo de vida principal del proyecto Maven son:
  1. compile: Genera los ficheros .class compilando los fuentes .java
  2. test: Ejecuta los test automáticos de JUnit existentes, abortando el proceso si alguno de ellos falla.
  3. package: Genera el fichero .jar con los .class compilados
  4. install: Copia el fichero .jar a un directorio de nuestro ordenador donde maven deja todos los .jar. De esta forma esos .jar pueden utilizarse en otros proyectos maven en el mismo ordenador.
  5. deploy: Copia el fichero .jar a un servidor remoto, poniéndolo disponible para cualquier proyecto maven con acceso a ese servidor remoto.
Cuando se ejecuta cualquiera de los comandos maven, por ejemplo, si ejecutamos mvn install, maven irá verificando todas las fases del ciclo de vida desde la primera hasta la del comando, ejecutando sólo aquellas que no se hayan ejecutado previamente.
También existen algunas metas que están fuera del ciclo de vida que pueden ser llamadas, pero Maven asume que estas metas no son parte del ciclo de vida por defecto (no tienen que ser siempre realizadas). Estas metas son:
  1. clean: Elimina todos los .class y .jar generados. Después de este comando se puede comenzar un compilado desde cero.
  2. assembly:assembly: Genera un fichero .zip con todo lo necesario para instalar nuestro programa java. Se debe configurar previamente en un fichero xml qué se debe incluir en ese zip.
  3. site: Genera un sitio web con la información de nuestro proyecto. Dicha información debe escribirse en el fichero pom.xml y ficheros .apt separados.
  4. site-deploy: Sube el sitio web al servidor que hayamos configurado.
  5. etc.
Pero estas metas pueden ser añadidas al ciclo de vida a través del Project Object Model (POM).
Fuente: Wikipedia

Crear Proyecto Maven con Eclipse

Utilizaremos Eclipse EE como IDE para hacer el ejemplo de nuestro proyecto JSF

File -> New -> Project





Importar dependencias de JSF

JSF no forma parte del Developer KIT o API básico de instalación, para poder ligar y relacionar las clases e interfaces de JSF necesitamos las librerias de JSF, podemos descargar y relacionar las librerías al proyecto o utilizar MAVEN y de manera descriptiva agregar la dependencia.

MyFaces - Implementación de JSF

JSF es una especificación, y existen diferentes Implementaciones que cumplen con la especificación. Utilizaremos Apache MyFaces por ser una de las más populares
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>com.roshka</groupId>
 <artifactId>tutorial.myfaces</artifactId>
 <version>1.0.0</version>
 <packaging>war</packaging>


 <dependencies>
  <dependency>
   <groupId>org.apache.myfaces.core</groupId>
   <artifactId>myfaces-api</artifactId>
   <version>2.2.0</version>
  </dependency>
  <dependency>
   <groupId>org.apache.myfaces.core</groupId>
   <artifactId>myfaces-impl</artifactId>
   <version>2.2.0</version>
  </dependency>
 </dependencies>
</project>

Importar depedencias de Servlet API
El API de Servlet tampoco forma parte del API Standard de JAVA y debemos agregar la dependencia para poder Compilar.
                <dependency>
   <groupId>org.apache.tomcat</groupId>
   <artifactId>tomcat-coyote</artifactId>
   <version>7.0.47</version>
   <!-- provided no empaqueta la libreria utilizará una provista por el contenedor -->
   <scope>provided</scope>
  </dependency>


Configurar Faces Servlet

Para agregar JSF a un proyecto JSF se agrega un Servlet que actuará como Controlador, el FacesServlet. Este Servlet se encargará de procesar el Request y preparar el Response adecuado, Invocará los métodos necesarios para ir paso a paso en cada Etapa o Fase del JSF (Como vimos en el Ciclo de Vida de JSF) y terminar siempre en la Fase 6 o Fase de Render. 
Invocará los métodos Setters y Getters de los Managed Bean necesarios y ejecutará los métodos actions que correspondan para el Request.
Una página o Interfáz JSF es expresada como XHTML o JSP y es procesada como Facelets.

El Servlet es configurado en el archivo web.xml dentro de la carpeta WEB-INF
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="http://java.sun.com/xml/ns/javaee"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
 version="3.0">
 
 <servlet>
  <servlet-name>FacesServlet</servlet-name>
  <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
 </servlet>

</web-app>


Configurar Faces Servlet Mapping

Una vez definido el Servlet es necesario configurar en la aplicación reglas que se utilizarán para que el Contenedor de Servlets pueda identificar si corresponde o no que el Faces Servlet procese un Request.
Para eso se configuran reglas de Mapeos típicamente los FacesServlet procesan /faces/* o *.jsf lo que implica que todos los Requests que tengan URIs que cumplan con ese patrón serán procesados por el Faces Servlet.

Además configuramos un parámetro adicional para notificar al Servlet que vamos a estar en un ambiente de Desarrollo.
<!-- procesar todos los URI que empiecen con /faces ejemplo /faces/index.xhtml -->
 <servlet-mapping>
  <servlet-name>FacesServlet</servlet-name>
  <url-pattern>/faces/*</url-pattern>
 </servlet-mapping>
 <!-- Parámetro adicional para informar que nuestro ambiente es de Desarrollo -->
 <!-- Importante quitar el parámetro cuándo se pase a Producción -->
 <context-param>
  <param-name>javax.faces.PROJECT_STAGE</param-name>
  <param-value>Development</param-value>
 </context-param>

Configurar Faces Config

Una vez configurado el Faces Servlet, éste necesita de alguna configuración adicional para poder funcionar. Esta configuración puede ser:
  • Información de Locale (Localidad)
  • Mensajes
  • Managed Beans (Se pueden utilizar con anotaciones JAVA en lugar del XML)
  • Registro de Validadores JSF
  • Registro de Convertidores JSF
  • Reglas de Navegación
  • Resolvers *
  • Manged Properties (Inyección de Propiedades de Beans)
  • Kit Renderer  *
Esta configuración puede estar ubicada en el archivo faces-config.xml dentro de la carpeta WEB-INF
<?xml version="1.0"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
      http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
 version="2.0">
 <application>
  <locale-config>
   <!-- especificamos que nuestro formateo debe ser de Paraguay, 
    ej: separador de miles, Hora etc. -->
   <default-locale>es_PY</default-locale>
  </locale-config>
 </application>
</faces-config>

Crear nuestro Primer JSF

Una Interfáz JSF se define o expresa en una Página Facelets, similar a un JSP utilizando librerías de Etiquetas de JSF (Core, HTML y adicionales)
<?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">

<h:head>
 <title>Welcome</title>
</h:head>

<h:body>
 <div class="container">
  <div class="row">
   <div class="col-md-6">
    <h:form styleClass="horizontal-form">
     <h:outputText value="#{miBean.mensaje}"></h:outputText>
     <h:commandButton value="Ejecutar" action="#{miBean.accion}"
      styleClass="btn btn-sm btn-primary" />
    </h:form>
   </div>
  </div>
 </div>
</h:body>
</html>

Crear nuestro Primer Managed Bean

Managed Bean son Componentes Java (Bean) que representan el Estado,  manejan los Eventos y tienen los métodos de Acción a ser ejecutados de una Interfaz JSF (Un Managed Bean puede manejar varias interfaces y una Interfaz puede utilizar varios Managed Beans)

Para eso necesitamos Crear una Clase Java y convertirla en Bean:

Un Bean es una Clase Java que debe tener un Constructor vacio () y sus propiedades pueden ser accedidas por métodos GET y sus propiedades pueden ser modificadas por métodos SET

En el ejemplo crearemos un Bean Simple con una propiedad y un método Acción para ser invocado
package com.roshka.tutorial.jsf;

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

@ManagedBean
@ViewScoped
public class MiBean {
 // propiedad
 private String mensaje;

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

 // método GET para acceder
 public String getMensaje() {
  return mensaje;
 }

 // método SET para escribir
 public void setMensaje(String mensaje) {
  this.mensaje = mensaje;
 }

 // método a ser ejecutado en Fase 5
 public String accion() {
  mensaje = "Mostrar mensaje en Formulario JSF";
  return null;
 }

}

Hacer Despliegue en Contenedor de Servlets Tomcat

Integrar Tomcat en Eclipse

Buscamos la Pestaña de Servidores (Window -> Show View -> Server)




Despliegue de Proyecto en Eclipse

Click derecho en Tomcat para agregar proyectos al Servidor

Ya está adherido

Click derecho en Server Tomcar y le damos Start para arrancar



Si no hay ni un Problema vemos este mensaje



Probar nuestro Ejemplo

Abrimos el Browser de nuestra preferencia

y si tenemos un Tomcat configurado por Defecto abrira un proceso que escuchará en el Puerto 8080

entonces abriremos la aplicación con
http://localhost:8080/tutorial.myfaces/faces/mi-primer-jsf.xhtml

Al dar Click en Ejecutar Debemos ver el siguiente mensaje




Conclusión:

1) Creamos un Proyecto JSF con las Librerías necesarias
2) Configuramos un Proyecto con los archivos web.xml y faces-config.xml
3) Definimos un pequeño ejemplo de Interfaz JSF con un xhtml y un Managed Bean con una propiedad y un Método Accion
4) Desplegamos y Probamos la aplicación en el TOMCAT