Bueno, esta es la tercera y última parte de la saga "El camino a la web en Java con Play!"...Después de esto tengo planeado hacer algo más interesante (una aplicación de blogging o alguna sugerencia que hagan), que intentaré de subir a GitHub o algún medio de distribución de código, para que hagan mejoras y sugerencias con el fin de aprender cada vez más.

En esta ocasión les hablaré de la tercer parte más importante del framework y de cierta manera la más interesante; éstas son las vistas y configuraciones.

A lo que te truje chencha

Cómo ya hemos explicado antes, Play! maneja el patrón MVC, si no lo sabes con Play! aprenderlo es ridículamente simple (de hecho, gracias a Rails fue que yo lo aprendí; y cómo Play! sigue una filosofía similar, creo que es posible que lo aprendas desde Play!).
Ahora una vista al directorio de nuestro proyecto:
 
La estructura de las vistas es simple, tenemos un archivo "main.html", en el cual vamos a dejar nuestro layout principal, a este imporatermos los estilos css globales de nuestra aplicación. Tenemos también un directorio llamado "error" con dos archivos "500.html" y "404.html", los cuales son útiles para mostrar una vista cool cuando haya un error, ya sea por un recurso no encontrado (que es para estos casos que sirve el 404.html) o para errores internos del servidor (que es para estos casos que sirve el 500.html).

Ahora, tenemos también el directorio "Application", del cual cuelga un archivo llamado "index.html", lo que significa que para la acción index en el controlador Application se hará un render en las vistas dentro de "/views/Application/index.html". Sin embargo nosotros tenemos un controlador antes definido en la segunda entrega de ésta saga, llamado People; por lo que es necesario que creemos otro directorio que cuelgue de views llamado People y dentro de este directorio crearemos un archivo llamado "list.html", quedando la estructura cómo:
 
Ahora veamos el archivo "main.html":
 
Ahora, editemos el archivo "list.html" en el directorio "/app/views/People/list.html":
 
Ahora veamos, fuera de los comentarios (que explican lo que hace tal o cual etiqueta) dentro de Play! (en las vistas) tenemos tags especiales que nos ayudan a extender la funcionalidad por ejemplo "#{list items:[colección], as:[nombre_del_objeto_iterado]}", nos permite iterar cada elemento ([nombre_del_objeto_iterado]) dentro de una colección ([colección]) cómo una lista. Es cómo un ciclo "foreach". Todas las etiquetas de Play! siguen el principio HTML (por cada etiqueta de apertura debe haber una de cierre o cerrarse a sí misma). Tenemos la etiqueta "#{if}" que funciona similar a la sentencia "if" en Groovy y en Ruby (¬¬, ¡ay @wishmaster77, siempre metiendo a Ruby en donde puedes!), en este caso lo usamos cómo un (en java): , sin embargo, al igual que en Groovy y que en Ruby, podemos utilizar métodos del objeto/variable que estamos comparando con la etiqueta "#{if}" por ejemplo:
 
Bien, pongamos un poco intersante esto y utilicemos algo de Ajax para crear, editar y eliminar, para esto haremos uso de la herramienta que en mi poca experiencia es la mejor librería de JavaScript. Ahora dentro del directorio de nuestra aplicación encontramos un directorio llamado "/public/javascripts", dentro de este directorio crearemos un archivo de JavaScript llamado "personas.js" con el siguiente contenido:
 
Expliquemos brevemente este chorísimo de código (tal parece una aplicación de escritorio), tenemos primero el  . Para aquellos que saben JavaScript a pelo, pues deducirán que es una manera de elegir al documento actual y en cuanto esté listo para trabajar se ejecutará la función que se le pasa cómo parámetro (la cuál es una closure, muy famosas últimamente por estos lares). Y pues no es nada más que eso.
Seguido tenemos algunos bloques:

• $('.edit').click(function(){});
• $('.delete').click(function(){});
• $('#executer').click(function(){});
• $('#create').click(function(){});

Explicación rápida de selectores en jQuery:
$() => Indica que vamos a seleccionar algún elemento (en jQuery TODO es un elemento).
$('.clase') => Seleccionamos a todos los elementos dentro del documento actual con la clase (en este caso) .clase
$('#elementoId') => Seleccionamos a el elemento que tenga cómo id (en este caso) #elementoId.
Son cómo las selecciones en CSS.
Ahora, dentro de cada bloque vemos algo cómo  , eso nos indica que por medio del método post, pasaremos los parámetros del objeto tipo JSON a la url especificada y al terminar de ejecutar dicha acción, haremos lo que decimos en la función anónima (closure). En algunos casos modificamos el dom, ingresamos datos a los controladores, etc. Sin embargo debemos restringir que sólo nos hagan paso de parámetros por POST y definir las url. Para eso vámonos a nuestro archivo, routes dentro de nuestro directorio conf y lo editaremos de la siguiente manera:
 
Y ya con eso (al parecer), podemos utilizar nuestra nueva aplicación. Claro hay que aplicarle los estilos CSS para que lo muestre cómo una tablita y demás; lo haría pero creo que ya he mostrado lo importante. Y vean lo sencillo que es hacer una aplicación con un poco de AJAX, Java y Play! framework. Espero con la siguiente sorprenderles y hacer algo con Scala + Play! (la aplicación que les había dicho).

Espero que les haya gustado y pues cualquier duda aquí estamos.