Download Clase Práctica #7 Navegación dinámica en aplicaciones web
Document related concepts
no text concepts found
Transcript
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.