JSF. 2 Crear Proyecto



Creación de un proyecto web JSF en Netbeans.
  1. New Project → Categories: Java Web, Projects: Web Application. Click Next.
  2. Escribimos el nombre del proyecto y seleccionamos su ubicación. Click Next.
  3. Seleccionamos el servidor y la versión de Java EE a utilizar. Click Next.
  4. En la pestaña Frameworks activamos el Java Server Faces, esto hace que nos aparezcan tres pestañas de configuración:
    1. Libraries: la versión de JSF a utilizar.
    2. Configuration: la ruta para acceder al servlet faces y que tipo de páginas utilizaremos en el proyecto: facelest (XHTML) o JSP.
    3. Components: componentes específicos para utilizar.
  5. No tocamos nada y Click Finish.
También puede crearse un proyecto maven:
  1. New Project → Categories: Maven, Projects: Web Application. Click Next.
  2. Escribimos el nombre del proyecto y seleccionamos su ubicación. Click Next.
  3. Seleccionamos el servidor y la versión de Java EE a utilizar. Click Finish.
  4. Botón derecho sobre el proyecto → Properties. En la pestaña Frameworks pulsamos Add y añadimos el framework Java Server Faces, esto hace que nos aparezcan tres pestañas de configuración:
    1. Libraries: la versión de JSF a utilizar.
    2. Configuration: la ruta para acceder al servlet faces y que tipo de páginas utilizaremos en el proyecto: facelest (XHTML) o JSP.
    3. Components: componentes específicos para utilizar.
  5. No tocamos nada y click OK.
Ejecutamos el proyecto y vemos que ya tiene una funcionalidad mínima.
Abrimos index.xhtml y modificamos un poco la página. Crearemos un menú para ejecutar los distintos ejemplos a crear. El primer ejemplo será crear un campo de texto y un botón que mostrará una página JSF llamada holaMundo.xhtml.

Código de la página index.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Curso JSF</title>
    </h:head>
    <h:body>
        <h3>Menú ejemplos</h3>
        <h:form>
            <h:inputText value="Hola desde Facelet" />
            <br />
            <h:commandButton value="Ir a Hola Mundo" action="holaMundo" />
        </h:form>
      
    </h:body>
</html>


Explicación del código index.html:
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
Declaración de los espacios de nombres. JSF define un conjunto de etiquetas que podemos usar. Se usa el prefijo h para hacer referencia a un conjunto de etiquetas que se utilizan básicamente para la construcción de formularios y demás elementos de interfaz de usuario, por ejemplo <h:form> crea un formulario. También podemos cargar la librería core con el prefijo f.


<h:commandButton value="Ir a Hola Mundo" action="holaMundo" />
Esta etiqueta crea un botón submit para enviar un formulario, el atributo value es el texto a ver en el botón y action es la acción a realizar,en este caso ir a la página holaMundo. Podemos ver que la página a cargar se llama holaMundo sin extensión y se encuentra en el mismo nivel que index.


Siguiendo con el ejemplo vamos a crear una página que mostrará un saludo el cual podremos cambiar. Creamos un paquete, si este no existe, llamado com.me.jsf, sobre el paquete pulsamos botón derecho:
  1. New → Other
  2. Category: JavaServer Faces, Fyle types: JSF Managed Bean. Click Next.
  3. Class Name es el nombre de la clase Managed Bean a crear. Escribimos SaludoMB, si miramos más abajo vemos el valor del campo llamado Name, su valor es saludoMB, igual que el nombre de la clase, pero la primera letra en minúscula (este valor se puede cambiar, pero es más simple dejarlo así). saludoMB es la instancia del bean que JSF creará y al que accederemos para referenciar nuestro Managed Bean. Scope: request, que será el ámbito del Managed Bean. Click Finish

Un Managed Bean es un Java Bean que puede ser accedido desde una página JSF, cada Managed Bean debe tener un nombre y un ámbito. Diferentes usuarios de la aplicación web tienen diferentes instancias del Managed Bean. En ellos se colocará la lógica de negocio y se encargan de conectar los campos de una página JSF con atributos del Managed Bean.
Abrimos el Managed Bean llamado SaludoMB, creamos un atributo String saludo con sus métodos getter/setter.

Código del Managed Bean SaludoMB.java:
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped 
public class SaludoMB {

    private String saludo;

    /**
     * Creates a new instance of SaludoMB
     */
    public SaludoMB() {
    }

    public String getSaludo() {
        if (saludo == null || saludo.equals("")) {
            return "Bienvenido";
        }
        return saludo;
    }

    public void setSaludo(String saludo) {
        this.saludo = saludo;
    }
}


Explicación del código SaludoMB.java:
Las dos anotaciones que preceden a la clase son:
@ManagedBean indica que esta clase se registrará como un Managed bean, se creará una instancia en el ciclo de vida, el nombre de la instancia es el nombre de la clase con la primera en minúscula, pero se le puede añadir el atributo name e indicar otro nombre, por ejemplo @ManagedBean(name="miBean").
@RequestScoped indica el ámbito que definimos al crear el bean que puede ser:
  1. @RequestScoped ámbito de petición, al terminar la petición se elimina la instancia del bean.
  2. @SessionScoped ámbito de sesión, mientras la sesión exista existe el bean.
  3. @ViewScoped: entre request y session, el bean existirá mientras la petición se envíe a la misma vista.
  4. @ApplicationScoped ámbito de la aplicación web, mientras la aplicación se ejecute el bean existirá.


Creamos una nueva página JSF llamada holaMundo, la extensión de las páginas será por defecto xhtml o jsp según se haya configurado.
  1. New File.
  2. Categories: JavaServer Faces, File Types: JSF Page. Click Next.
  3. File Name es el nombre de nuestra página que será holaMundo. Click Finish.
Código de la página holaMundo.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h3>Hola Mundo</h3>

        <h:form>
            <h:inputText value="#{saludoMB.saludo}" />

            <h4>
                <h:outputText value="#{saludoMB.saludo}" />
            </h4>
            <h:commandButton value="Enviar" />
        </h:form>

    </h:body>
</html>


Explicación del código holaMundo.xhtml:
Algunas de las etiquetas son etiquetas estándar de HTML. Otras tienen prefijos, como <h:head>, <h:body> o <h:inputText>, éstas son etiquetas JSF.
La etiqueta h:inputText es un campo para introducir texto, h:outputText muestra un texto y h:commandButton corresponde a un botón Submit de HTML.
Los campos de texto, botones, etc pueden ser enlazados con propiedades Java definidas en un Managed Bean. Los caracteres #"{expresion}" encierran expresiones EL (Expression Language ). En el atributo value de una etiqueta JSF puede utilizarse "#{managedBean.propiedad}" o "#{managedBean.metodo}". Por ejemplo, en el siguiente código se indica que la caja de texto se enlace con la propiedad saludo definida en la instancia del Managed Bean.
<h:inputText value="#{saludoMB.saludo}"/>

saludoMB es la instancia del bean a usar y saludo es una propiedad o atributo definida en el bean.

Para enviar el formulario usamos:
<h:commandButton value="Enviar Saludo"/>

La etiqueta h:commandButton tiene un atributo denominado action, cuyo valor (un String) es usado para activar una regla de navegación, de manera que al pulsar el botón se produce la acción, navegar a una página. Podría hacerse una llamada a un método de un Managed Bean que devolviera la cadena hacia la página donde se desea ir. Si no se especifica su atributo action la página se enviará a si misma.

Para mostrar el valor de la propiedad saludo de la instancia del Managed Bean SaludoMB como texto se usa:
<h:outputText value="#{saludoMB.saludo}" />

El funcionamiento del ejemplo es sencillo, todo lo que se escriba en la caja de texto al pulsar el botón se mostrará en el texto de salida. Cuando la página es mostrada, JSF busca el bean saludoMB e invoca el método getSaludo para obtener el valor a mostrar. Cuando la página es enviada, JSF invoca el método setSaludo para guardar el valor del campo de texto del formulario en el atributo saludo del bean.

Comentarios

Publicar un comentario

Entradas populares de este blog

Java. Texto de colores en la consola

Imagen
Para escribir un texto en color se necesita anteponer unos caracteres a la cadena. Ejemplo:  System. out .println( " \033 [30mEste texto es Negro" ); System. out .println( " \033 [31mEste texto es Rojo" ); System. out .println( " \033 [32mEste texto es Verde" ); System. out .println( " \033 [33mEste texto es Amarillo" ); System. out .println( " \033 [34mEste texto es Azul" ); System. out .println( " \033 [35mEste texto es Magenta" ); System. out .println( " \033 [36mEste texto es Cyan" ); System. out .println( " \033 [37mEste texto es Blanco" ); Para hacerlo todo más fácil creamos una clase: package com.me.cursojava.clases; /**  * Clase para obtener texto en colores para la consola.  * @author juan  */ public class MiConsole {   // public static final String BLACK="\033[30m";   // public static final String RED="\033[31m";   // public static final Strin
Leer más

javax.swing.JPasswordField

Imagen
Es un campo de texto de una linea que oculta el texto para evitar que se lea. Sus métodos más importantes son: Método Descripción getPassword() Obtener el String con el texto introducido. setText() Establecer un String con el texto a mostrar. getPassword() devuelve un array de caracteres, si se quiere convertirlo a String puede hacer: String pass = String.valueOf(password.getPassword()); Al seleccionar un passwordField la paleta Properties (abajo a la derecha) de Netbeans nos muestra todas las propiedades que podemos modificar, algunas de estas son: editable : permite introducir o no introducir texto. font : la fuente, estilo y tamaño del texto. text : texto a mostrar en el componente. horizontalAlignment : alineación del texto, de izquierda a derecha, de derecha a izquierda... toolTipText : texto a mostrar al pasar el ratón por encima. echoChar : carácter a mostrar en lugar del real.
Leer más

javax.swing.JList

Imagen
JList es un componente que contiene una lista de objetos. Es parecido a JComboBox , pero posee algunas diferencias: Se utilizan cuando se quiere ver varios elementos de la lista a la vez. Se puede seleccionar uno o varios elementos a la vez. Para trabajar con este componente es necesario establecerle un modelo ( Model ). Una clase modelo es la que contiene los datos a representar en la interfaz gráfica. Los cambios en el objeto modelo actualizan automáticamente los cambios en la interfaz gráfica. Básicamente un modelo contiene una lista de objetos a mostrar en la lista y una serie de operaciones que podemos realizar sobre los objetos, como insertar, eliminar, etc.... Existen clases ya definidas para realizar este trabajo como DefaultListModel . Las propiedades importantes en Netbeans son: model : Modelo que usa el componente para mostrar datos. selectionMode : El modo de selección, simple o múltiple. Propiedades de JList en Netbeans: Métodos más usados de DefaultL
Leer más