Play!1 …mas o menos completo (4)


Qué es lo siguiente?
Repasamos conceptos básicos como:
– Vistas (Groovy)
– Templates
– Custom Tags

Vistas (El motor de Groovy)

Bueno, creo que Groovy desaparece en Play2 pero lo voy a ver igual, si te preocupas de ver siempre lo último terminar por no programar nada. Además, después de todo, podemos seguir usando esto mediante el módulo fastergt que encontramos en la web de play.Las vistas es otro de los tres componentes de la arquitectura MVC.
Todas las vistas se encuentran en app/views. Podrás ver las subcarpetas por controlador, así que empezamos con la vista de la primer aplicación creada en app/views/Application/index.html.

Propósito

La capa de la Vista es para mostrar al usuario el estado actual de la aplicación, incluído el contenido de la capa demodelo, una vez que el controlador permita que el modelo haga las actualizaciones. Se va a ver más adelante, pero primero necesitamos entender cómo crear la vista.
La vista puede renderizar en cualquier formato de texto que querramos. Podemos sacar HTML, JSON, XML, RSS, etc, y ellas son toas manejadas exactamente por play de la misma forma. Play viene con Groovy como languaje expression para ayudar a desarrollar la vista, el cual incluye un pequeño sistema de templates.

Sintaxis

Una vista es una mezcla de contenido estático y dinámico. El contenido estático es cosas como tags HTML, o XML. El contenido dinámico se calcula en tiempo de ejecución por el motor de Groovy y puede ser como acceso a los parámetros pasados por el controlador al método render, o tags, comentarios, etc.

Expressions – ${….}

Una Expression es una de las formas más usadas para agregar contenido dinámico a la vista. Una expression simplemente pone los resultados de la expresión a la vista. Un ejemplo de esto es sacar los items pasados a la vista desde el controlador via el método render.

Por ejemplo


<h1>Hello ${myName ?: ‘guest’}!</h1>

El ejemplo tiene contenido estático y dinámico. El código ${myName ?: ‘guest’} es la parte dinámica, el resto es la parte estática.
La expresión consiste en el signo dolar con las llaves ${….}

NOTA: Si una variable contiene cualquier elemento HTML, Play automiáticamente los sacará para prevenir cross-site-scripting. Puedes prevenir este comportamiendo llamando al método de la variable.


${myName.raw()}

 

Tags – #{….}

Como los tags en JSP, el motor de templates de Play tiene un set de tags que pueden usarse para el desarrollo rápido. Básicamente los tags con fragmentos reusables de la Vista. Un tag es representado en una vista usando la almohadilla entre las llaves #{….}
Los tags toman cualquier número de paránetros, pero si el tag solamente tiene un solo parámetro, la convención es que el nombre del parámetro sea arg y el nombre del parámetro puede comitirse cuando agregamos el tag a la vista.
Por ejemplo, el siguiente ejemplo agrega funciones extra disponibles para el usuario, si es administrador usando el tag IF. El tag A es usado para creear hyperlinks. Por supuesto, puedes continuar usando el método estándar <a href />, pero Play agrega esos tags por conveniencia.


<div>
 <ul>
 <li>#{a @Application.index()}Home#{/a}</li>
 <li>#{a @Application.index()}Home#{/a}</li>
 #{if user.admin}
 <li>#{a @Application.index()}Home#{/a}</li>
 #{/if}
 <li>#{a @Application.index()}Home#{/a}</li>
 </ul>
 </div>

Este tag tiene cuerpo debe ser abiero y cerrado, pero el código no ttenga cuerpo puede hacerse así:


#{script ‘jquery.js’/}

Actions – @{….}

Los Actions son una via para que Play renderize lo mas apropiadamente URL cuando cree links para acciones de Controlador, basado en el archivo de rutas (routes files).
Suponga que en tu aplicación tienes que poner una acción llamada logout() en el controlador Application.java, y las rutas quecrearenel archivo crearon un URL para enviar las solicitudes Get a /logout. Sin embargo una segunda opción es usar reverse routing con @{…}


{a @Application.logout()}Logout#{/a}

Cuando la vista es ejecutada, la dirección para la acción logout en el controlador de Application se busca desde el archivo de rutas y la URL apropiada es generada. Esto permite que el URL especificado en el archivo de rutas sea desacoplada desde la vista.
El @{…} generará una URL relativa cuando es ejecutada, si necesitas una URL absoluta (por feed RSS y emails etc), ahí puedes usar la notación @@{….}

Messages – &{….}

Si quieres internacional tu aplicación, puedes usar el archivo de mensajes que viene incluido con play. Los archivos pueden localizarse en el directorio conf/ y el archivo se llama messages.
El archivo contiene una lista de nombre, valores pares (‘nombre de la propiedad’=’valor’), y usando la anotación &{…} poner los mensajes del archivo en la vista.
Veamos un ejemplo


hello=Hola %s!

El %s es una marca para entrada dinámica de datos, y cualquier numero de entradas %s puden usarse en un archivo de mensajes (esto utiliza la misma sintaxis como el formato del método de una clase String, muy usado desde los printf de C).
Para obtener el mensaje y mostrar en la vista, necesitamos usar la notacion ampersand &{…}. Permite tomar el mensaje original Hello World y cambiarlo por el del archivo.

Antes


<h1>Hello ${myName ?: ‘guest’}!</h1>

Después


<h1>&{‘hello’, myName ?: ‘guest’}</h1>

La salida en ambos ejemplos va a ser idéntica. La unica diferencia es que uno está leyendo el mensaje desde el archivo y el otro lee como contenido estático. Observe como la variable myName dentro del tag o mensaje no necesita evaluarse como una expresión (usando el signo dolar).
El archivo (conf/messages) es por defecto para todos los idiomas. Si quieres hacer un sitio multilenguaje necesitas especificar en application.conf que soporte idiomas usando la propiedad application.lang.

Entonces para cada nuevo lenguaje soportado necesitas crear messages.en, messages.es, mensajes.pr, etc etc.

Comments – *{….}*

Como con casi todos los lenguajes, puedes agregar comentarios usando *{….}*

Los comentarios no se evalúan en ejecución, así que los comentarios no van a enviarse al browser (a menos que sean comentarios HTML).
Ejemplo:


*{
 Comentario Increible
 }*
 #{list items:users, as:’user’}
 <li>${user}</li>
 #{/list}

Scripts – %{….}%

Es similar a los scriplets en JSP. Por lo general usar scripts en tu vista es una mala práctica. Si tu código necesita más lógica es mucho mejor hacerlo en el controlador o en un tag para reducir la complejidad de la vista.
Un script permite hacer explresiones mas complejas que las expresiones con las funciones básicas, como declarar variables. Las variables definidas dentro de un script están disponibles para usar dentro de expresiones además de scripts (exactamente igual a scriplets JSP).


*{ crear el fullname de un usuario }*
 %{ fullname = user.firstname + ” ” + user.lastname; }%
 <h1> Bienvenido ${fullname}!</h1>

El script también tiene acceso a objetos implícitos, que permite hacer directamente ciertas cosas como hacer una respuesta escribiendo un objeto.

Templates

Uno de los conceptos claves de Play es reducir la cantidad de trabajo para desarrollar tu aplicación. Una opción común en las aplicaciones web, y que también trae incluida Play, son los templates.
Una vista puede estar hecha por una o varias vistas. Ya usamos template cuando generamos la aplicación por defecto con  new play application.
Un template se usa con el tag extends.


#{extends ‘main.html’ /}
 #{set title:’Home’ /}
 <h1>Hello World!</h1>
 What is your name?
 <form action=”@{Application.sayHello()}” method=”POST”>
 <input type=”text” name=”myName” />
 <input type=”submit” name=”hello” value=”Say hello!” />
 </form>

Las primeras dos líneas son parte de el template. La primer línea dice que la página debe heredar main.html. Podemos encontrar este archivo en app/views.
La segunda línea dice que pondrá la variable title a el valor “Home”.
Si vemos la página main.html podemos ver como la pågina está armada.


<html>
 <head>
 <title>#{get ‘title’ /}</title>
 </head>
 <body>
 #{doLayout /}
 </body>
 </html>

Los valores se setean en la variable title y es obtenida usando el tag #{get}. El tag doLayout en la página main.html es el lugar para sacar  el contenido de la página que ha llamado al template, en este caso el index.html desde la application Hello World.

En síntesis, los conceptos clave son:

  • El tag extends indica qué archivo vamos a incluir en nuestro template
  • El tag set puede usarse para pasar variables entre templates
  • El tag get puede usarse para recuperar variables que usaron el tag set
  • El tag doLayout puede usarse para insertar el contenido de la solicitud de la vista en el template.

Custom Tags

Es posible crear nuestro propio tag.
La ventaja de usar esto es que nos permite abstraer y quitar complejidad de código de la vista en un tag específico.
Un tag simplemente es un archivo template, como todas las otras vistas.

Creando Tags

Para crerar un tag simplemente hacemos un archivo en app/views/tag. El nombre del archivo necesita ser el nombre del tag seguido por el tipo de vista. Por ejemplo, un tag llamado blogPost necesita llamarse blogPost.html.
El código dentro de blogPost es el código producido cuando se llama al tag. Esto puede incluir pasar datos desde el controlador como parte de renderizar argumentos o métodos. Un ejemplo de un post de un blog puede ser como lo siguiente:


<div>
 <h1>${post.title}</h1>
 <p>${post.content}</p>
 </div>

Para llamar el tag, podemos usar la misma notación de tag que usamos para los tags de Play.


#{blogPost /}

Cada vez que blogPost es llamado, esto devolverá el contenido del tag, el cual renderiza los datos desde el objeto post. Esto sin embargo no es particularmente útil respecto a como simplificará la salida del mismo post sobre el objeto post. Lo que nosotros necesitamos para hacer esto es pasar en el post en particular lo que nosotros queremos renderizar.

Parámetros

Para pasar datos en el tag necesitamos agregar parámetros al tag. Otra vez, esto es idéntico a la forma de pasar parámetros en los tags incluídos. El formato para pasar datos es


#{tag paramName: paramValue, paramName2: paramValu2 /}

También, si tiene un solo parámetro, y el nombre del parámetro no es especificado, es automáticamente asignado al parámetro con nombre tag.
Una vez que los parámetros fueron pasados a el tag, podemos tener acceso al contenido. En el código del Tag, los parámetros son accesibles desde adentro del tag como variables con formato de guión bajo ‘_’, siguiendo por el nombre del parámetro. Asi, arg puede convertirse en _arg y post a _post.
Si nosotros por lo tanto el tag del ejemplo previo del blog, nosotros podríamos pasar el post en el tag de la siguiente manera.


#{list items:posts, as:’post’}
 #{blogPost post /}
 #{/list}

Esto muestra una lista de post iterados en un tag de lista, y item individual del post es renderizado usando nuestro blogPost. Sin embargo podríamos tener que cambiar nuestro tag ligeramente, como nosotros no especificamos un nombre para nuestro parámetro; necesitamos leer la variable desde el parámetro arg por defecto. Nuestro tag quedará


<div>
 <h1>${_arg.title}</h1>
 <p>${_arg.content}</p>
 </div>

Tag Body

Para algunos tags no es suficiente pasar datos usando parámetros. Un buen ejemplo es el tag list que usamos para iterar sobre la lista de post de nuestro blog. Necesitamos especificar contenido para mostrar entre la apertura y el cierre del tag (llamado tag body).


#{mytag}
 <h1>this is the body the tag</h1>
 <p>some more body</p>
 #{/mytag}
 Para obtener tu tag para renderizar el cuerpo del tag, podemos usar el tag especial doBody.
 <div>
 #{doBody /}
 </div>

Note que el cuerpo del tag puede ser mezclado, así que puedes usar ambos parámetros en el cuerpo del tag.

Objetos Implícitos

Hay numerosos objetos especiales que están disponibles dentro del template en la vista.

  •   session – dentro del template obtiene acceso a la sesión del objeto
  •   flash – obtiene acceso al flash scope. Este objeto es utilizado para controlar la duración y vida de una consulta.
  •   request – es la consulta que se envía desde el browser al servidor se play.
  •   params – es un objeto que contiene parámetros que son enviados con el reques.
  •   play – es la referencia al objeto play.Play. Ésta es la referencia clave de muchas configuraciones en una aplicación play, como los módulos, rutas, plugins, classpaths, tags, etc.
  •   lang – es el lenguaje del usuario actual.
  •   messages – una referencia al mapa de mensajes, aunque en la mayoría de los casos deberías usar &{…} para mostrarlos
  •   out – es la salida del output stream que está siendo escrito automáticamente por nuestra vista y que será enviada al cliente.

En la mayoría de los casos es raro que necesites usar estos objetos.

Java object extensions

Cuando usamos objets en la vista de la aplicación, Play automáticamente agrega métodos para las clases de Java. Estos no existen en la clase original, así que si chequeas el código fuente (o Java API) no estará allí, pero en tiempo de ejecución esos métodos serán agregados para hacer nuestras vistas fáciles de escribir.
Un ejemplo es el método format que se agrega a java.lang.Number. Esto nos permite fácilmente dar formato a los números en la vista, sin tener que hacer el formateo en el controlador, en el modelo o en scripts.
Shopping Cart: Total Price £ ${cart.total.format(‘##,###.##’)}
Aquí hay un largo número de extenciones incluidas con play framework. Son listadas, pero se recomienda chequear el API por las actualizaciones. Para encontrar la lista completa lea el JavaDocs API de la clase play.templates.JavaExtensions
Algunas extensiones son:

  •   addSlashes
  •   asdate
  •   camelCase
  •   capAll
  •   capFirst
  •   capitalizeWords – cut
  •   divisibleBy
  •   escape
  •   escapeHtml
  •   escapeJavaScript – escapeXml
  •   format
  •   formatCurrency – formatSize
  •   last
  •   noAccents
  •   pad
  •   page
  •   pluralize
  •   since
  •   slugify
  •   urlEncode
  •   yesno

Creando una Extensión Customizada

Si la lista disponible no nos permite formatear como nosotros quisiéramos, es posible crear tu propia extensión. Para hacerla tienes que crear una nueva clase de Java y extender de play.templates.JavaExtensions.

Un ejemplo de extensión que tomaría los 2 primeros caracteres de un string.


package ext;
 public class MyExtension extends play.templates.JavaExtensions {
 public static String chop(String s) {
 return s.substring(2);
 }
 }

En la vista lo llamaríamos así:


<h1>Hello ${myName.chop()}!</h1>

Una custom extension debe tener un método public static, extendiendo de la clase JavaExtension y debe retornar un String (después de todo es para generar aplicaciones web no?).
Cuando Play arranca, chequea todas las clases que extienden de JavaExtensions. Los primeros parámetros de un método identifica el tipo de objeto que la extensión puede realizar. Y podemos agregar parámetros que permitan cambiar, por ejemplo, el número de letras a devolver, etc. La signatura debería ser


public static String chop(String s, int size) {
 return s.substring(size);
 }

En la vista pasaríamos el tamaño cuando se llama al método chop


<h1>Hello ${myName.chop(2)}!</h1>

Nota. Debido que las custon extensions son detectadas cuando arranca el servidor, debemos reiniciar el server para que esté disponible en nuestra aplicación.

@wfranck

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: