Facultad de Ingeniera de Sistemas e Informtica Escuela acadmico profesional de Ingeniera de Sistemas

UNMSM Ciclo 2013 II

Laboratorio de Ingeniera de Software

Taller de framework 01
Framework Play
Principales caractersticas: Implementa el patrn Modelo Vista Controlador Rpida iteracin: modificacin del cdigo y refresco de la pgina inmediato Soporte para lenguajes Java y Scala Abierto: documentacin, grupos de usuario y plugins open source Se crean aplicaciones ms flexibles, modularizables, configurable y personalizable

Facultad de Ingeniera de Sistemas e Informtica Escuela acadmico profesional de Ingeniera de Sistemas

UNMSM Ciclo 2013 II

Instalacin
1. Verificar tener JDK 1.7.0_25 o superior instalado: a. El directorio donde se encuentra instalado el JDK ser conocido como JAVA_HOME b. Validar que est configurado en el PATH del sistema operativo, el directorio bin del JAVA_HOME c. Validar que al ejecutar desde una ventana de comandos (command prompt) los comandos java y javac, se obtenga respuesta. 2. Descargue el archivo play-2.2.0.zip y descomprmalo dentro de una carpeta Java en el Disco C. Al final debera quedar algo como:

a. Agregar el directorio play-2.2.0 al PATH del sistema operativo. b. Seguidamente desde una ventana de command prompt digitar el comando play , como resultado se deber tener:

3. Finalmente instalar el IDE JCreator, versin LE 5.0 Nota: Si se prefiere, se puede utilizar Eclipse como IDE.

Facultad de Ingeniera de Sistemas e Informtica Escuela acadmico profesional de Ingeniera de Sistemas

UNMSM Ciclo 2013 II

Creacin y montaje de una aplicacin Play:

1. Crear un directorio de trabajo o ubicarse dentro de la carpeta Java creada anteriormente. 2. Seguidamente ejecutar el siguiente comando:
play new <nombre WebApp>

Donde <nombre WebApp> es el nombre de la aplicacin que se desea crear. Para el caso el nombre ser sorteosWeb. 3. Seguidamente confirme el nombre de la aplicacin y el lenguaje que utilizar, para el caso Java. 4. Verificar que se cree la nueva aplicacin. La estructura bsica es la siguiente:

Dnde: - app es el directorio de fuentes - conf es el directorio de archivos de configuracin 5. Nos ubicamos dentro del directorio recientemente creado, para el caso sorteosWeb. 6. A continuacin ejecutamos el comando play y esperamos hasta que se incie el prompt con el nombre de nuestra aplicacin:

Facultad de Ingeniera de Sistemas e Informtica Escuela acadmico profesional de Ingeniera de Sistemas

UNMSM Ciclo 2013 II

7. Ya dentro de play, ejecutamos el comando run y esperamos hasta que se inicie el servidor play de nuestra aplicacin:

8. Validamos que nuestra aplicacin haya iniciado correctamente desde el navegador, ingresando a la URL: http://localhost:9000/ y si todo es correcto se debe mostrar algo como:

Nota: -

Para finalizar el servidor de Play, presionar CTRL + D Y para salir de Play, escribir el comando exit

9. Ahora montamos nuestra aplicacin desde JCreator, para esto abrimos el IDE y procedemos a crear un nuevo Workspace. a. En el men File, seleccionamos Blank Workspace b. Ubicamos el directorio de nuestro aplicacin Play que acabamos de crear c. Y finalmente damos como nombre el mismo nombre de nuestra aplicacin: sorteosWeb

Facultad de Ingeniera de Sistemas e Informtica Escuela acadmico profesional de Ingeniera de Sistemas

UNMSM Ciclo 2013 II

10. A continuacin abrimos el workspace que acabamos de crear y procedemos a crear un nuevo Proyecto. Para ello damos clic derecho sobre el Workspace y elegimos Add new Project y en la ventana siguiente elegimos Empty Project:

Facultad de Ingeniera de Sistemas e Informtica Escuela acadmico profesional de Ingeniera de Sistemas

UNMSM Ciclo 2013 II

11. Seguidamente ingresamos la siguiente configuracin para el proyecto. Asegurndonos que tanto el proyecto como el Workspace estn en el mismo directorio para evitar problemas. Para el caso el directorio es sorteosWeb:

Nota: Verificar que slo exista un directorio sorteosWeb y no se vaya a crear otro nuevamente. 12. Le damos Finalizar y observaremos luego que se mont los siguientes directorios de nuestro proyecto:

Facultad de Ingeniera de Sistemas e Informtica Escuela acadmico profesional de Ingeniera de Sistemas

UNMSM Ciclo 2013 II

13. Sin embargo an nos falta poder ver los directorios conf y public de nuestra aplicacin. Para esto se debe agregar los directorios y archivos existentes al proyecto:

14. Ubicamos primero los directorios y subdirectorios, y una vez agregados estos, se procede a agregar los archivos que estn dentro de ellos. Al final debemos tener la siguiente estructura para nuestro proyecto:

15. Rpidamente podemos iniciar la edicin del cdigo. Por ejemplo cambiamos el texto de la funcin ok(index.render()); para que diga ahora:
return ok(index.render("Hola a todos primera aplicacion."));

Grabamos (No compilamos) el archivo Application.java y luego refrescamos nuestra pgina web que cargamos hace un momento:

Facultad de Ingeniera de Sistemas e Informtica Escuela acadmico profesional de Ingeniera de Sistemas

UNMSM Ciclo 2013 II

16. Ntese que sin compilar, simplemente grabando los cambios, ya podemos ver reflejado estos directamente desde el servidor Play de nuestra aplicacin.

Prctica
1. Agregaremos un botn a la pgina de inicio. a. Para ello primero comentamos la seccin que muestra la introduccin estndar de Play (resaltado). Y al final de la pgina agregamos el formulario con el botn en la parte inferior:
@*** @main("Welcome to Play") { @play20.welcome(message, style = "Java") } ***@ <form action="@{routes.Application.decirHola()}" method="GET"> <input type="submit" value="decir Hola!" /> </form>

b. Seguidamente agregamos la nueva accin decirHola en el archivo de configuracin routes:

GET /hola controllers.Application.decirHola()

Nota: siempre agregar antes de la ruta GET assets. c. A continuacin agregamos en la clase controladora Application.java el siguiente mtodo:
public static Result decirHola() { return ok(hola.render("Hola de nuevo !!!")); }

Facultad de Ingeniera de Sistemas e Informtica Escuela acadmico profesional de Ingeniera de Sistemas

UNMSM Ciclo 2013 II

d. Agregar la nueva pgina llamada hola.scala.html con el siguiente contenido:

@(message: String) <!DOCTYPE html> <html> <head> <title>Hola!!</title> <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")"> <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")"> <script src="@routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script> </head> <body> <p align="center"> @message </p> </body> </html>

e. Grabar, ejecutar y analizar lo implementado. 2. Montar la aplicacin demo llamada helloworld que se encuentra en el directorio samples\java sobre el JCreator y ejecutarla. 3. Desarrollar dentro de la aplicacin sorteosWeb un men con tres opciones como: a. Sorteos b. Inscribir participantes c. Seguridad Y que cada una lleve a una pgina web diferente. 4. Crear una base de datos MySQL llamada sorteosdb que contenga las siguientes tablas: