Un hola mundo con JSF y Eclipse

De ChuWiki

Introducción[editar]

Vamos a montar aquí desde casi cero un pequeño proyecto eclipse con un "Hola Mundo" de Java Server Faces (JSF)

¿Qué necesitamos?[editar]

Para este proyecto necesitamos lo siguiente:

Preparación de eclipse[editar]

Necesitamos antes de nada hacer dos cosas en eclipse, si no las tenemos hechas ya.

Elegir implementación de JSF[editar]

La primera es indicarle que implementación vamos a usar de JSF. Para ello, en "window" -> "preferences" -> "java" -> "build path" -> "user libraries", añadimos una librería nueva a la que podemos llamar "mujarra" (el nombre del proyecto de la implementación de JSF que hemos descargado), o cualquier otro nombre que nos guste. Una vez creada, y en la misma ventana, la seleccionamos y pulsamos el botón "Add jars...". Buscamos el directorio lib de donde hayamos desempaquetado nuestra implementación de JSF y añadimos los dos jar que aparecen ahí jsf-api.jar y jsf-impl.jar

Elegir servidor de aplicaciones[editar]

Lo segundo que necesitamos, es decirle a eclipse dónde tenemos la instalación de Tomcat. Para ello, en "windows" -> "preferences" -> "server" -> "runtime environments" pulsamos el botón "Add". Aparecerá una ventana en la que debemos elegir qué servidor de aplicaciones tenemos instalado y qué versión (tomcat, glassfish, etc). Una vez elegido, le damos a "next" y en la siguiente ventana le ponemos un nombre de nuestra elección que nos ayude a identificarlo y ponemos el path donde tenemos instalado ese servidor (en mi caso C:\Aplicaciones\apache-tomcat-7.0.2)

Habilitar procesamiento de anotaciones[editar]

En las propiedades del proyecto, en "java compiler" -> "Annotation processing", asegurarnos que está marcada la casilla "Enable annotation processing". Antes hay que crear el proyecto ... según el siguiente punto.

Creación del proyecto en eclipse[editar]

En eclipse hacemos "File" -> "new" -> "Dynamic Web Project" y nos saldrá una ventana como la de más abajo. En el menú que aparece desplegado en la foto de dicha ventana seleccionamos "java server faces v2.0 project".

En la parte de "target runtime" debemos elegir el servidor tomcat que tengamos instalado y que hemos configurado en el punto anterior, si no lo teníamos ya.

Vamos pulsando "next" varias veces, rellenando los campos que nos pidan (dejando por defecto lo que no queramos cambiar). Hay dos cosas que podemos tener en cuenta:

  • En una de las ventanas aparece un check para "generate web.xml deployment descriptor" que por defecto no está chequeada. Debemos marcarla si no queremos crear el fichero web.xml a mano.
  • En la última ventana nos pregunta por la librería de implementación de "jsf". Debemos elegir "User library" y seleccionar la que hemos creado en el punto "Preparación de eclipse" de este tutorial.

Listo, aceptando todo lo que queda, se generará nuestro proyecto eclipse, con huecos para meter todo.

Creación de un managed bean[editar]

Cuando arranquemos nuestra aplicación, Tomcat y JSF se encargarán de instanciar una serie de clases que estarán accesibles de alguna manera desde nuestra página html, jsp, o lo que sea. Estas clases deben ser beans de java (constructor sin parámetros y métodos set y get) y deben llevar la anotación @ManagedBean.

Nuestra aplicación es muy tonta, un "hola mundo", así que crearemos una bean de estos que sólo tenga el método getSaludo() y devuelva "hola". Dicha clase, con su nombre de paquete, debe meterse en el directorio "Java resources : src" de eclipse. O bien, simplemente con el botón derecho encima del nombre del proyecto, hacemos "new" -> "class" y ya eclipse se encargará de colocarla en el sitio adecuado. Esta clase puede ser así 

package com.chuidiang.ejemplos.jsf;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class HolaMundo {
   public String getSaludo (){
      return "hola";
   }
}


Creación de la página html[editar]

Vamos a hacer ahora la página xhtml que cogerá este saludo y lo mostrará en el navegador. Sobre el proyecto pulsamos botón derecho del ratón y elegimos "new" -> "HTML file". Por defecto se pondrá en el directorio "WebContent" del proyecto. Ponemos un nombre para la página (por ejemplo, "hola.xhtml") y pulsamos "next". En la siguiente ventana, marcamos "use HTML template" y elegimos "new facelet composition page". Pulsamos "finish" y listo.

Ahora, con eclipse, la editamos para que se parezca a esto 

<!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">

<h:head>
<title>Hola mundo</title>
</h:head>
<h:body>
   #{holaMundo.saludo}
</h:body>
</html>

Básicamente hemos quitado cosas que no usaremos y nos quedamos con :

  • xmlns:h para indicar que vamos a usar tags <h:....> propios de JSF, como <h:head> y <h:body>. Podríamos usar perfectamente los <head> y <body> tradicionales.
  • Ojo al #{holaMundo.saludo} que es donde está el truco. Salvo que lo definamos de otra manera, la instancia de nuestra clase HolaMundo se llama igual, pero con la primera letra en minúscula. A los métodos getSaludo() se accede símplemente con .saludo. Ese trozito de código, cuando lo visualicemos en el navegador, mostrará el resultado de la llamada a holaMundo.getSaludo(), es decir, "hola".

Arrancar la aplicación[editar]

Una vez salvado el fichero "hola.xhtml", con el botón derecho del ratón sobre él, "run as" -> "run on a server" y nos saldrá una ventana preguntando qué servidor de aplicaciones queremos usar. Elegimos el "tomcat" que configuramos anteriormente y listo. Eclipse arrancará el "tomcat" y nos abrirá el navegador mostrando la página hola.xhtml. En ella veremos escrito "hola".

Obtenido de «https://chuidiang.org/index.php?title=Un_hola_mundo_con_JSF_y_Eclipse&oldid=4237»