Componentes de presentación
 
PDF -icon
PDF

Ejercicios sesión 1 - Introducción a JSF

Dentro de las sesiones prácticas de JSF, vamos a realizar una pequeña aplicación de gestión de tareas. Y dentro de ésta, lo que realizaremos será:

Haz un fork del repositorio inicial java_ua/jsf-expertojava, desactivando la opción de heredar los permisos de acceso. Añade el usuario java_ua con permiso de lectura.

Clona el repositorio en tu disco duro y crea un nuevo espacio de trabajo en el repositorio recién clonado.

Creando nuestro proyecto con Maven (1 punto)

Dado que la práctica va a consistir en un único ejercicio, lo que vamos a hacer es crear un proyecto JSF + RichFaces, que ya contiene todos los elementos que vamos a necesitar a lo largo de las sesiones.

Crearemos el proyecto según las indicaciones establecidas en los apuntes de teoría

Mini-aplicación de ejemplo (1 punto)

Para probar que la importación ha sido correcta, crearemos la aplicación de ejemplo del final de los apuntes de teoría

Pantalla de login (1 punto)

Con lo que hemos visto hasta ahora, podemos crear la pantalla de login en nuestro gestor de tareas.

De momento, tendremos una estructura de dos páginas: una con el formulario de acceso, y otra de error que nos devolverá de nuevo a la página de login.

En primer lugar tendremos la plantilla general. Empezará siendo una simple plantilla (que colocaremos en la carpeta templates/template.xhtml) como la que sigue:

<!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:ui="http://java.sun.com/jsf/facelets" 
      xmlns:rich="http://richfaces.org/rich"
      xmlns:f="http://java.sun.com/jsf/core">
  <h:head>
      <title>jsfTasks - <ui:insert name="title">Application Title</ui:insert></title>
      <meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
  </h:head>

  <h:body>
    <ui:insert name="body">Default content</ui:insert>
  </h:body>
</html>

Vemos que lo único que contiene es la posibilidad de insertar el cuerpo que queramos, así como determinar parte del título de la página

El código de la pantalla de login (login.xhtml) será el siguiente:

      <!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:ui="http://java.sun.com/jsf/facelets"
    xmlns:rich="http://richfaces.org/rich">
 
<body>
  <ui:composition template="/templates/template.xhtml">
 
  <ui:define name="title">Acceso</ui:define>
 
  <ui:define name="body">
    <rich:panel header="Acceso a la aplicación">
      <h:form prependId="false">    
        <h:outputLabel
          value="Usuario:"
          for="nameInput" />
          <h:inputText
            value="hola" />
          <br />
          <h:outputLabel
            value="Contraseña: " />
          <h:inputSecret
            value="mundo" />
          <br />
          <h:commandButton
            action="errorPage?faces-redirect=true"
            value="Acceder" />
          <h:commandLink
            value="¿Olvidaste tu contraseña?"
            action="errorPage" />
        </h:form>
      </rich:panel>
    </ui:define>
  </ui:composition>
</body>
</html>

Por su parte, el código de la pantalla de error (errorPage.xhtml) tendrá la siguiente forma:

      <!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:ui="http://java.sun.com/jsf/facelets">
 
<body>
  <ui:composition template="/templates/template.xhtml">
 
    <ui:define name="title">Error</ui:define>
 
    <ui:define name="body">
      <h:form prependId="false">
        Se ha producido un error. 
        <h:commandLink
          value="Volver"
          action="index?faces-redirect=true" />.
      </h:form>
     </ui:define>
   </ui:composition>
</body>
</html>

Modifica ahora el fichero web.xml para que la página de login se corresponda con la página de inicio

No te preocupes si no entiendes partes del código. Lo iremos viendo todo a lo largo de las sucesivas sesiones.