Tutorial de JSF para Principiantes

Tutoriales
JSF

Bienvenido al Tutorial de JSF para Principiantes. La tecnología Java Server Faces (JSF) es un marco de trabajo front-end que facilita la creación de componentes de interfaz de usuario mediante la reutilización de estos. JSF está diseñado basándose en el patrón de Modelo Vista Controlador (MVC), que segrega la presentación, el controlador y la lógica de negocio.

Tutorial de JSF para Principiantes

En el patrón Modelo Vista Controlador, el modelo contiene la lógica de negocio necesaria para llevar a cabo el escenario empresarial, la vista representa la capa de presentación como las páginas JSP o JSF, y el controlador representa el proceso de manejar el control hacia el modelo/vista según la operación solicitada. JSF proporciona los siguientes componentes para crear una interfaz de usuario:

  • Elementos de entrada básicos estándar como campos, botones, etc., que forman el conjunto de componentes base de la interfaz de usuario.
  • Capacidad de representación de JSF según las especificaciones del cliente
  • Biblioteca principal
  • Ampliación de los componentes de interfaz de usuario disponibles para agregar más componentes y utilizarlos para cumplir con los requisitos del cliente.

Tutorial de JSF para principiantes – Configuración del entorno

Aquí repasaremos todos los pasos necesarios para configurar tu computadora y crear tu primera aplicación JSF.

Instalación de JDK

Descarga el JDK desde el siguiente sitio web de Oracle https://www.oracle.com/technetwork/java/javase/downloads/index.html Establece la variable de entorno JAVA_HOME apuntando a la ruta bin del JDK instalado. Por ejemplo, “C:\Program Files\Java\jdk1.7.0_60”. Además, agrega JAVA_HOME\bin a la variable PATH para localizar los binarios de Java. Ahora verifica si Java se instaló correctamente en la máquina escribiendo javac en la ventana de comandos, lo que debería mostrar todas las opciones disponibles, o “java -version” que debería mostrar la versión de Java instalada en la máquina. Para más detalles, puedes consultar el siguiente artículo: Cómo instalar Java en Windows

Instalación del IDE

Algunos de los IDEs populares que están disponibles incluyen Eclipse, NetBeans e IntelliJ IDEA. Descarga Eclipse desde el siguiente enlace https://www.eclipse.org/downloads/ y ejecuta el archivo binario descargado e instala Eclipse en tu máquina. Para NetBeans, descarga NetBeans IDE desde https://netbeans.org/downloads/ y completa la instalación.

Instalación de Apache Tomcat

Descarga Tomcat desde el siguiente enlace https://tomcat.apache.org/. Ejecuta el archivo binario descargado y establece la variable CATALINA_HOME para que apunte a la ruta de instalación. Ahora inicia el servidor y ve a https://localhost:8080 en tu navegador favorito, lo que mostrará la página predeterminada de Tomcat si la instalación se realizó correctamente. Nuestra configuración base está lista, pasemos a crear nuestra primera aplicación JSF.

Tutorial de JSF para principiantes – Aplicación Hola Mundo

Ahora vamos a crear una sencilla aplicación web de JSF “Hola Mundo”. Descarga los siguientes archivos JAR que son esenciales para ejecutar código relacionado con JSF. Estos pueden descargarse desde el repositorio central de Maven https://search.maven.org/. Una forma más clara de gestionar las dependencias es utilizando un sistema de construcción como Maven. Para todos nuestros ejemplos, estaremos utilizando Maven. Consulta el pom.xml para ver las dependencias. jsf-api-1.2.jar jsf-impl-2.2.8-04.jar pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.journaldev.jsf</groupId>
    <artifactId>JSF_HelloWorld</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>JSF_HelloWorld</name>

    <properties>
        <endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    
    <dependencies>
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-web-api</artifactId>
            <version>7.0</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-api</artifactId>
            <version>2.1.13</version>
        </dependency>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-impl</artifactId>
            <version>2.1.13</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.1</version>
                <configuration>
                    <source>1.7</source>
                    <target>1.7</target>
                    <compilerArguments>
                        <endorseddirs>${endorsed.dir}</endorseddirs>
                    </compilerArguments>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.3</version>
                <configuration>
                    <failOnMissingWebXml>false</failOnMissingWebXml>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-dependency-plugin</artifactId>
                <version>2.6</version>
                <executions>
                    <execution>
                        <phase>validate</phase>
                        <goals>
                            <goal>copy</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${endorsed.dir}</outputDirectory>
                            <silent>true</silent>
                            <artifactItems>
                                <artifactItem>
                                    <groupId>javax</groupId>
                                    <artifactId>javaee-endorsed-api</artifactId>
                                    <version>7.0</version>
                                    <type>jar</type>
                                </artifactItem>
                            </artifactItems>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

Tutorial de JSF para principiantes – Crear un Bean Gestionado

A managed bean is a java class registered to JSF which makes interaction between the UI and the business logic possible. Create a managed bean named HelloWorld.java using @ManagedBean annotation as

package com.journaldev.jsf.helloworld;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;


@ManagedBean(name="helloWorld")
@SessionScoped
public class HelloWorld implements Serializable{
    
    private static final long serialVersionUID = -6913972022251814607L;
	
    private String s1 = "Hello World!!";

    public String getS1() {
        System.out.println(s1);
        return s1;
    }

    public void setS1(String s1) {
        this.s1 = s1;
    }
  
}

La anotación @ManagedBean indica que la clase HelloWorld es un bean administrado. El bean @SessionScoped indica que el bean está vivo hasta que la HttpSession sea válida. Aquí se declara una cadena s1 y se inicializa con “Hello World” y se definen los métodos getter y setter para recuperar el valor de la cadena s1. También podemos proporcionar el nombre del bean, por ejemplo, @ManagedBean(name="helloWorld"). Si no se proporciona ningún nombre, se deriva según los estándares de nomenclatura de Java. La mejor práctica es proporcionar siempre el nombre del bean.

Tutorial de JSF para principiantes – Página de vista

Ahora crea una página JSF llamada helloWorld.xhtml que interactúa con el bean HelloWorld y recupera el valor a través del método getter e imprime lo mismo en la página de respuesta. helloWorld.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
      xmlns:h="https://java.sun.com/jsf/html">
<h:head>
<title>Hello World JSF Example</title>
</h:head>
<h:body>
       #{helloWorld.s1}
<br /><br />

</h:body>
</html>

Aquí llamamos al nombre del bean seguido de la variable de cadena declarada en el bean como “helloWorld.s1” que obtiene el valor “Hello World”.

Configuración del Descriptor de Implementación

La parte final es configurar la clase Controladora JSF para manejar las solicitudes del cliente. El servlet controlador JSF es `FacesServlet`, la configuración final de `web.xml` se proporciona a continuación. web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="https://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
            30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/helloWorld.xhtml</welcome-file>
</welcome-file-list>
</web-app>

La estructura final del proyecto JSF Hello World ahora se verá así en Eclipse. En el `web.xml`, especificamos la entrada del archivo de configuración faces junto con el mapeo del servlet para faces, el tiempo de espera de sesión y el archivo de bienvenida que se carga al iniciar la aplicación. Una vez que hayamos terminado con estos cambios, ejecutaremos la aplicación que imprimirá la siguiente salida en el navegador. Eso es todo para el tutorial de JSF para principiantes. Exploraremos diferentes componentes de página JSF en las próximas publicaciones. Mientras tanto, puedes descargar el proyecto desde el siguiente enlace y jugar con él para aprender más.

Descargar Proyecto JSF Hello World

Source:
https://www.digitalocean.com/community/tutorials/jsf-tutorial-for-beginners