Download Clase Práctica #7 Navegación dinámica en aplicaciones web

1
Clase Práctica #7 Navegación dinámica en aplicaciones web basadas en JavaServer
Faces.
Objetivos:
•
•
Implementar la navegación dinámica utilizando el fichero de configuración de una
aplicación JSF.
Ejercitar desarrollo de aplicaciones JSF
Bibliografía:
1. Geary, David; Horstmann, Cay. “Core JavaServerTM Faces, Second Edition”,
Prentice Hall, 2007. Chapter 2.
Introducción (Para el profesor)
1. Recordatorio de Navegación estática.
2. Recordatorio de Navegación dinámica.
3. Hacer énfasis en las diferencias de los dos modelos.
En una aplicación web sencilla, la navegación es generalmente estática. Esto
significa que al dar click por ejemplo en un botón o en un link, siempre se
selecciona una página fija para mostrar la respuesta. En la clase práctica anterior el
botón enviaba los datos de la respuesta del puzle al servidor tenía un
direccionamiento estático. O sea que cualquiera que fuera la respuesta, correcta o
incorrecta siempre se mostraría la misma página.
<!-- Ejemplo de página xhtml -->
<h:commandButton value="#{msgs.next}" action="next"/>
<!-- Ejemplo de faces-config.xml -->
<navigation-rule>
<from-view-id>/index.xhtml</from-view-id>
<navigation-case>
<from-outcome>next</from-outcome>
<to-view-id>/index.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
En la mayoría de las aplicaciones web, la navegación no es estática. El flujo de las páginas
no depende solamente del botón que se están accionando, sino además de las entradas de
datos.
En el caso de un formulario de autenticación de un usuario los escenarios típicos pueden
ser.
1. Las credenciales (username y password) son correctas, se permite el acceso.
2. Las credenciales (username y password) son incorrectas, se deniega el acceso.
<!-- Ejemplo de página xhtml -->
<h:commandButton label="Login" action="#{loginController.verifyUser}"/>
String verifyUser() { //ejemplo del método de acción
if (...)
return "success";
else
return "failure";
}
2
<!-- Ejemplo de faces-config.xml -->
<navigation-rule>
<from-view-id>/index.jsp</from-view-id>
<navigation-case>
`<from-outcome>success</from-outcome>
<to-view-id>/success.xhtml</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>failure</from-outcome>
<to-view-id>/failure.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
La principal diferencia entre los dos modelos es el uso de métodos de acción desde las
páginas, cuyo resultado concuerda con un resultado en los casos de navegación en el
faces-config.xml.
Nota: En caso de que el resultado del método de acción sea null o de que el resultado no
esté definido en las reglas de navegación, se mostrara la misma página que hace el pedido.
3
Desarrollo
La aplicación de la Figura 1 presenta una serie de preguntas de acertijo. Cuando el usuario
da click sobre el botón “Check Answer” la aplicación verifica que la respuesta sea correcta,
si la respuesta es incorrecta el usuario tendrá un turno adicional de responder la misma
pregunta como se muestra en la Figura 2.
Figura 1. Juego de preguntas. Pantalla inicial
Figura 2. Juego de preguntas. Segunda oportunidad
Finalmente si se equivoca una vez más se presenta la pantalla de la Figura 3.
4
Figura 3. Juego de preguntas. Segunda respuesta errónea
En cualquier caso de ser correcta la respuesta se aumenta la puntuación y se muestra la
pantalla de la Figura 4.
Figura 4. Juego de preguntas. Respuesta correcta
La aplicación tiene presenta dos clases. La clase Problem que describe un problema
sencillo con una pregunta y una respuesta, y un método para revisar la respuesta dada por
el usuario. La clase QuizBean describe un Juego de preguntas que consiste en una lista de
problemas. Esta clase mantiene además la traza del problema actual y de la puntuación del
usuario.
Hay que notar que las funcionalidades principales de este juego son “Check Answer” y
“Start Over”. Por lo cual la clase tiene dos métodos para estas funciones answerAction y
startOverAction respectivamente. El método answerAction puede tener varios resultados en
dependencia de si la respuesta es correcta o no o si la cantidad de intentos es suficiente,
etc. Los resultados serían:
• success (/success.xhtml). En caso de ser correcta.
• again (/again.xhtml). En caso de tener otra oportunidad de responder correctamente.
• failure (failure.xhtml). En caso de no tener más oportunidades y ser incorrecta la
respuesta.
El método startOverAction solo devuelve el resultado “startOver” que muestra nuevamente
la página de índice.(/index.xhtml)
5
<?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_1_2.xsd"
version="1.2">
<managed-bean>
<managed-bean-name>quiz</managed-bean-name>
<managed-bean-class>com.corejsf.QuizBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<application>
<resource-bundle>
<base-name>com.corejsf.messages</base-name>
<var>msgs</var>
</resource-bundle>
</application>
</faces-config>
Figura 5. Fragmento del fichero faces-config.xml
La aplicación comprende la utilización de ficheros de recursos para externalizar las
etiquetas que aparecen en la misma de forma que pueda internacionalizarse.
1.
2.
3.
4.
5.
6.
7.
8.
9.
title=A Java Trivia Quiz
answerButton=Check Answer
startOverButton=Start over
correct=Congratulations, that is correct.
notCorrect=Sorry, that was not correct. Please try again!
stillNotCorrect=Sorry, that was still not correct.
correctAnswer=The correct answer was: {0}.
score=Your score is {0}.
thankYou=Thank you for taking the quiz.
Figura 6. Fichero messages.properties
Figura 7. Estructura del sitio
6
1. Proponga el código para las páginas index.xhtml y success.xhtml conociendo que la
clase QuizBean está definida en el fichero faces-config.xml como quiz, tiene una
propiedad question que representa la pregunta actual, una response, que representa
la respuesta que da el usuario y una propiedad score que brinda la puntuación actual.
2. Defina los casos de navegación pertinentes a la transición por las que pasa el flujo del
juego desde que inicia hasta que termina.
Solución
1. index.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f=http://java.sun.com/jsf/core
xmlns: h="http://java.sun.com/jsf/html">
<head>
<title><h:outputText value="#{msgs.title}"/></title>
</head>
<body>
<h:form>
<p>
<h:outputText value="#{quiz.question}"/>
</p>
<p>
<h:inputText value="#{quiz.response}"/>
</p>
<p>
<h:commandButton value="#{msgs.answerButton}"
action="#{quiz.answerAction}"/>
</p>
</h:form>
</body>
</html>
success.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f=http://java.sun.com/jsf/core
xmlns: h="http://java.sun.com/jsf/html">
<head>
<title><h:outputText value="#{msgs.title}"/></title>
</head>
<body>
<h:form>
<p>
<h:outputText value="#{msgs.thankYou}"/>
<h:outputFormat value="#{msgs.score}">
<f:param value="#{quiz.score}"/>
</h:outputFormat>
</p>
<p>
<h:commandButton value="#{msgs.startOverButton}"
action="#{quiz.startOverAction}"/>
</p>
</h:form>
</body>
</html>
7
2.
<?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_1_2.xsd"
version="1.2">
<navigation-rule>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/success.xhtml</to-view-id>
<redirect/>
</navigation-case>
<navigation-case>
<from-outcome>again</from-outcome>
<to-view-id>/again.xhtml</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>failure</from-outcome>
<to-view-id>/failure.xhtml</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>startOver</from-outcome>
<to-view-id>/index.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
<managed-bean>
<managed-bean-name>quiz</managed-bean-name>
<managed-bean-class>com.corejsf.QuizBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<application>
<resource-bundle>
<base-name>com.corejsf.messages</base-name>
<var>msgs</var>
</resource-bundle>
</application>
</faces-config>
Estudio individual:
• Estudiar capítulo 2, 3 y 4 del libro.
Motivación para la próxima clase
En la próxima clase se continuará el estudio de JSF haciendo énfasis en los tags html de la
tecnología.