¡La versión 2.0 de Play ya está lista! Ayúdanos a traducir la documentación de la útlima versión y sigue nuestro progreso.

Manuales, tutoriales & referencias

Consulte

Contenidos

Elija la versión

Buscar

Busque con google

Libros

Tags de plantilla incorporados

Estos son los tags incorporados que están disponibles además de los mostrados en la sintaxis del sistema de plantillas.

Existe un manual aparte de las extensiones Java.

a

El tag a inserta un enlace HTML que apunta a la acción de un controlador.

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

Cuyo resultado es:

<a href="/application/logout">Disconnect</a>

Si la acción que intenta llamar no tiene una ruta capaz de invocarla usando el método GET, Play generará automáticamente un formulario oculto que será enviado usando JavaScript al hacer clic en el enlace.

authenticityToken

Despliega un campo de entrada oculto que contiene una clave generada que puede usar en cualquier formulario, para prevenir el Cross-Site Request Forgery

#{authenticityToken /}

El resultado es:

<input type="hidden" name="authenticityToken"
       value="1c6d92fed96200347f06b7c5e1a3a28fa258ef7c">

cache

Almacena en cache el cuerpo del tag usando la API play.cache.Cache, con la clave de cache especificada en el parámetro del tag.

#{cache 'startTime'}
   ${new java.util.Date()}
#{/cache}

Por defecto, el cuerpo es almacenado en cache indefinidamente, pero puede especificar un tiempo de expiración con el parámetro for.

#{cache 'currentTime', for:'3s'}
   ${new java.util.Date()}
#{/cache}

doLayout

Usado en herencia de plantillas, este tag inserta el contenido evaluado de la subplantilla.

<!-- common header here -->
<div id="content">
    #{doLayout /}
</div>
<!-- common footer here -->

else

Por supuesto se usa junto con el tag if.

#{if user}
    Connected user is ${user}
#{/if}
#{else}
    Please log in
#{/else}

No obstante, también puede usarlo junto con el tag list y se ejecutará si la lista está vacía.

#{list items:task, as:'task'}
    <li>${task}</li>
#{/list}
 
#{else}
    Nothing to do...
#{/else}

elseif

#{if tasks.size() > 1}
    Busy tasklist
#{/if}
 
#{elseif tasks}
    One task on the list
#{/elseif}
 
#{else}
    Nothing to do
#{/else}

Al igual que else, puede usarlo con el tag list.

error

Muestra los mensajes de error de validación, si los hay, para el campo especificado en el parámetro del tag.

#{error 'user.name'/}

Puede usar el parámetro opcional field para usar el mensaje de error de un campo diferente. Esto es útil cuando desea que varios campos compartan un mensaje de error común.

#{error 'contact.street',  field:'contact.address'/}
#{error 'contact.city',    field:'contact.address'/}
#{error 'contact.country', field:'contact.address'/}

errorClass

Imprime el texto hasError si hay un error de validación en el campo cuyo nombre fue pasado como parámetro del tag. Esto es de utilidad para asignar una clase CSS a los campos de entrada con errores:

<input name="name" class="#{errorClass 'name'/}">

Lo cual es equivalente a:

<input name="name" class="${errors.forKey('name') ? 'hasError' : ''}">

errors

Itera a través de los errores de validación actuales.

<ul>
#{errors}
    <li>${error}</li>
#{/errors}
</ul>

El tag define variables implícitas en su cuerpo.

  • error, el error
  • error_index, el índice del error, comenzando en 1
  • error_isLast, vale true cuando está en el último elemento
  • error_isFirst, vale true cuando está en el primer elemento
  • error_parity, alterna su valor entre odd (impar) y even (par)
<table>
<tr><th>#</th><th>Error</th></tr>
#{errors}
    <tr class="${error_parity}"><td>${error_index}</td><td>${error}</td></tr>
#{/errors}
</table>

También puede usar el parámetro opcional field, o solo dejarlo como parámetro por defecto, para iterar únicamente los errores pertenecientes a un campo específico.

<ul>
#{errors 'myField'}
    There where errors with the field myField<br />
    <li>${error}</li>
#{/errors}
</ul>

extends

Hace que una plantilla herede de otra.

#{extends 'main.html' /}

field

El tag field es un helper, basado en el lema “No se repita a usted mismo”. Funciona de esta manera:

En vez de escribir esto:

<p>
  <label>&{'user.name'}</label>
  <input type="text" id="user_name" name="user.name" value="${user?.name}" class="${errors.forKey('user.name') ? 'has_error' : ''}">
  <span class="error">${errors.forKey('user.name')}</span>
</p>

Usted puede solo escribir:

#{field 'user.name'}
<p>
  <label>&{field.name}</label>
  <input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}">
  <span class="error">${field.error}</span>
</p>
#{/}

Así usted no repite user.name una y otra vez.

form

Inserta un tag form. Play determinará el método HTTP a partir de la ruta, usando POST como método por defecto. Si existen ambas rutas, POST y GET, configuradas para la URL, el tag usará por defecto la primera ruta definida en routes.

Parámetros opcionales:

  • method - puede tener el valor POST o GET.
  • id - establece un ID para el elemento form.
  • enctype - establece la codificación de los datos del formulario. Por defecto es ‘application/x-www-form-urlencoded’.

La codificación de caracteres siempre es utf-8.

#{form @Client.details(), method:'GET', id:'detailsForm'}
   ...
#{/form}

Da como resultado lo siguiente:

<form action="/client/details" id="detailsForm" method="GET"
      accept-charset="utf-8">
 ...
</form>

También puede especificar una entidad como objetivo del método de la acción:

#{form @Client.details(client.id)}
   ...
#{/form}

El nombre del parámetro HTTP se obtiene de la declaración del método de la acción.

public static void details(String clientId){
       // ...
}

Play creará una URL de acción con clientId:

<form action="/client/details?clientId=3442" method="GET"
      accept-charset="utf-8">
 ...
</form>

El tag form también incluye automáticamente una clave de autenticidad, para los métodos diferentes de GET.

#{form @Client.create(), method:'POST', id:'creationForm',
       enctype:'multipart/form-data' }
   ...
#{/form}

Da como resultado:

<form action="/client/create" id="creationForm" method="POST"
      accept-charset="utf-8" enctype="multipart/form-data">
<input type="hidden" name="authenticityToken" 
       value="1c6d92fed96200347f06b7c5e1a3a28fa258ef7c">
 ...
</form>

Si su formulario actualiza un recurso en el lado del servidor, usted debería usar el método POST. Si su formulario se usa para filtrar datos y no actualiza su dominio, usted puede usar GET. Por favor lea acerca de idempotence (idempotencia). POST no es idempotente, mientras que GET, PUT y DELETE sí lo son.

get

Recupera un valor definido con un tag set. Puede usar el mecanismo get/set para intercambiar valores entre plantillas, layouts y subplantillas.

<head>
    <title>#{get 'title' /}
</head>

También puede usar el tag get de la siguiente manera, la cual mostrará “Homepage” si 'title' no ha sido especificado.

<head>
    <title>#{get 'title'}Homepage #{/} 
</head>

i18n

Exporta mensajes localizados dentro de JavaScript. Los mensajes localizados estarán disponibles en su código JavaScript al usar la función i18n().

Defina sus traducciones en el archivo conf/messages.

hello_world=Hello, World !
hello_someone=Hello %s !

Incluya los mensajes en su plantilla (o layout):

#{i18n /}

Y obtenga las claves desde JavaScript:

alert(i18n('hello_world'));
alert(i18n('hello_someone', 'John'));

Opcionalmente, puede restringir el tag a solo algunos mensajes. Se acepta el uso del caracter comodín * al final del nombre del tag:

#{i18n keys:['title', 'menu.*'] /}

if

Evalúa la prueba dada, y si resulta verdadera, ejecuta el cuerpo del tag.

#{if user.countryCode == 'en' }
    Connected user is ${user}
#{/if}

Usando condiciones compuestas:

#{if ( request.actionMethod == 'administer'  && user.isAdmin() ) }
    You are admin, allowed to administer.
#{/if}

ifError

Interpreta el cuerpo del tag si hay un error de validación en el campo de entrada especificado en el parámetro del tag.

#{ifError 'user.name'}
  <p>
    User name is invalid: 
    #{error 'user.name' /}
  <p>
#{/ifError}

ifErrors

Interpreta el cuerpo del tag si cualquier campo tiene un error de validación.

#{ifErrors}
  <p>Error(s) found!</p>
#{/ifErrors}

ifnot

Alternativa más limpia que #{if !condition}

#{ifnot tasks}
    No tasks today
#{/ifnot}

include

Incluye otra plantilla. Todas las variables de la plantilla actual estarán disponibles de forma directa en la plantilla incluida.

<div id="tree">
    #{include 'tree.html' /}
</div>

jsAction

El tag #{jsAction /} devuelve una función JavaScript que construye una URL basada en una acción del servidor y variables libres. Este tag no realiza solicitudes AJAX; estas tienen que hacerse manualmente usando la URL devuelta.

Veamos un ejemplo:

GET     /users/{id}        Users.show

Ahora puede importar esta ruta en el lado del cliente:

<script type="text/javascript">
    var showUserAction = #{jsAction @Users.show(':id') /}
    
    var displayUserDetail = function(userId) {
        $('userDetail').load( showUserAction({id: userId}) )
    }
</script>

jsRoute

El tag #{jsRoute /} funciona de forma similar al tag #{jsAction /}, este devuelve un objeto que contiene: la función que construye la URL basada en la acción del servidor, y el correspondiente método HTTP (GET, POST, etc.).

Ejemplo:

PUT     /users/{id}        Users.update

Luego, en la plantilla:

<script type="text/javascript">
    var updateUserRoute = #{jsRoute @Users.update(':id') /}
    $.ajax({
      url: updateUserRoute.url({id: userId}),
      type: updateUserRoute.method,
      data: 'user.name=Guillaume'
    });
</script>

list

Itera a través de una colección de objetos.

<ul>
#{list items:products, as:'product'}
    <li>${product}</li>
#{/list}
</ul>

El tag define variables implícitas en su cuerpo. El nombre de las variables lleva como prefijo el nombre de la variable del ciclo.

  • name_index, el índice del elemento, comenzando en 1
  • name_isLast, vale true cuando está en el último elemento
  • name_isFirst, vale true cuando está en el primer elemento
  • name_parity, alterna entre los valores odd (impar) y even (par)
<ul>
#{list items:products, as:'product'}
    <span class="${product_parity}">${product_index}. ${product}</span>
    ${product_isLast ? '' : '-'}
#{/list}
</ul>

El parámetro items es opcional y puede ser reemplazado por el argumento por defecto arg.

Por lo que puede reescribir:

#{list items:users, as:'user'}
    <li>${user}</li>
#{/list}

así:

#{list users, as:'user'}
    <li>${user}</li>
#{/list}

Los ciclos for son fáciles de crear usando el objeto range de Groovy:

#{list items:0..10, as:'i'}
    ${i}
#{/list}
#{list items:'a'..'z', as:'letter'}
    ${letter} ${letter_isLast ? '' : '|' }
#{/list}

El parámetro as es también opcional. El tag usa _ como nombre por defecto de la variable:

#{list users}
    <li>${_}</li>
#{/list}

option

Inserta un tag option en la plantilla.

  • value - valor de la opción
#{option user.id} ${user.name} #{/option}

Mostrará lo siguiente:

<option value="42">jto</option>

script

Inserta un tag script en la plantilla. Por convención, el tag hace referencia a un script en el directorio /public/javascripts

  • src (obligatorio) - nombre del archivo que contiene el script, sin incluir el /public/javascripts en el nombre
  • id (opcional) - un valor para el atributo id del tag script generado
  • charset (opcional) - establece la codificación de caracteres del código fuente – por defecto es UTF-8

El parámetro src puede ser reemplazado por el argumento por defecto arg.

#{script 'jquery-1.4.2.min.js' /}
#{script id:'datepicker' , src:'ui/ui.datepicker.js', charset:'utf-8' /}

render

Reproduce la plantilla especificada por la ubicación pasada como parámetro del tag. La ubicación puede ser absoluta, o relativa a /app/views

#{render 'Application/other.html'/}

select

Inserta un tag select en la plantilla.

  • name (obligatorio) - establece el nombre del elemento select.

Cualquier atributo desconocido será considerado un atributo HTML, e interpretado “tal como viene”.

#{select 'booking.beds', value:2, id:'select1'}
	#{option 1}One king-size bed#{/option}
	#{option 2}Two double beds#{/option}
	#{option 3}Three beds#{/option}
#{/select}

Dará como resultado:

<select name="booking.beds" size="1" id="select1" >
  <option value="1">One king-size bed</option>
  <option value="2" selected="selected">Two double beds</option>
  <option value="3">Three beds</option>
</select>

Este tag puede generar opciones usando el atributo items.

  • items (opcional) - lista de objetos, usado para crear elementos option
  • value (opcional) - elemento de items seleccionado (note que la selección múltiple no está soportada)
  • labelProperty (opcional) - para cada item, propiedad a usar como etiqueta del option
  • valueProperty (opcional) - para cada item, propiedad a usar como valor del option. Se usa por defecto la propiedad id

Los atributos labelProperty and valueProperty no deberían ser valores primitivos. Así que, por ejemplo, use una variable Integer o Long en vez de una int o long.

Por ejemplo, dada una lista de objetos User, cada uno con una propiedad name:

#{select 'users', items:users, valueProperty:'id', labelProperty:'name', value:5, class:'test', id:'select2' /}

Dará como resultado:

<select name="users" size="1" class="test" id="select2" >
  <option value="0" >User-0</option>
  <option value="1" >User-1</option>            
  <option value="2" >User-2</option>            
  <option value="3" >User-3</option>
  <option value="4" >User-4</option>
  <option value="5" selected="selected">User-5</option>
</select>

set

Define un valor que puede ser recuperado en la misma plantilla o en cualquier layout con el tag get.

#{set title:'Admin' /}
#{set style:'2columns' /}

También puede hacer uso de variables:

#{set title:'Profile of ' + user.login /}

Puede definir el valor de las variables en el cuerpo:

#{set 'title'}
    Profile of ${user.login}
#{/set}

stylesheet

Inserta un tag link en la plantilla. Por convención, el tag hace referencia a un archivo CSS en el directorio /public/stylesheets

  • src (obligatorio) - nombre del archivo, sin incluir el camino inicial /public/stylesheets en la ubicación
  • id (opcional) - un valor para el atributo id del tag link generado
  • media (opcional) - un valor para el atributo media: screen, print, aural, projection
  • title (opcional) - el valor del atributo title (o descripción)

El parámetro src puede ser reemplazado por el argumento por defecto arg.

#{stylesheet 'default.css' /}
#{stylesheet id:'main', media:'print', src:'print.css', title:'Print stylesheet' /}

verbatim

Deshabilita el uso de escapes en las salidas HTML de la plantilla, tal como la extensión Java raw(), pero en todo el cuerpo del tag.

${'&amp;'}
#{verbatim}${'&amp;'}#{/verbatim}

En este ejemplo, la primera línea muestra &amp; en la página mientras que la segunda línea muestra el caracter ampersand.