Embed Size (px)
Citation preview
Play Framework – Generación Vistas con Twirl
Christian Portilla Pauca
Contenidos
Motor de Plantillas Twirl Revision Sintaxis: el caracter magico
‘@’ Parametros de plantilla Iteracion Bloque If Declarando bloques reusables
Importar expresiones Comentarios Escape de caracteres Casos de uso de plantillas Diseño Tags Includes
Motor de plantillas
El motor de plantillas esta basado en Scala. Twirl, un poderoso motor de plantillas basado en Scala
Twirl
Compacto, expresivo y fluido Facil de Aprender No un nuevo lenguaje Editable en cualquier editor La plantilla no es un lugar para escribir logica compleja
Revision
Una plantilla de scala es un simple texto en scala HTML, XML, o csv. El sistema de plantillas ha sido diseñado para sentirse confortable Las plantillas son compiladas como funciones estandard de scala
Sintaxis: el caracter magico ‘@’
La plantilla de scala usa @ como un simple caracter especial
Hello @customer.getName()!
Hello @(customer.getFirstName() + customer.getLastName())!
Parametros de plantilla
Una plantilla es como una funcion
@(title: String = "Home")
@(title:String)(body: Html)
Iteracion
se puede usar la palabra "for"
<ul>@for(p <- products) { <li>@p.getName() ([email protected]())</li>}</ul>
Bloque If
Los bloques if no son nada especial
@if(items.isEmpty()) { <h1>Nothing to display</h1>} else { <h1>@items.size() items!</h1>}
Declarando bloques reusables
Se puede crear bloques de codigo reusable:
@display(product: models.Product) = { @product.getName() ([email protected]())}
<ul>@for(product <- products) { @display(product)}</ul>
Importar expresiones
se puede importar cualquier cosa que se desee
@(customer: models.Customer, orders: List[models.Order])
Comentarios
se puede escribir un bloque de comentario en las plantillas usando @* *@:
@********************* * This is a comment * *********************@
Escape de caracteres
Por defecto, los contenidos dinamicos con escapados en funcion al tipo de plantilla (HTML o XML)
<p> @Html(article.content)</p>
Casos de uso de plantillas
Las plantillas, son simples funciones, que pueden estar compuestas en muchas formas que se desee.
Diseño
Se puede declarar un plantilla views/main.scala.html que actuara como una plantilla de diseño base:
@(title: String)(content: Html)<!DOCTYPE html><html> <head> <title>@title</title> </head> <body> <section class="content">@content</section> </body></html>
Tags
Se puede escribir un tag simple views/tags/notice.scala.html
@(level: String = "error")(body: (String) => Html)
@level match { case "success" => { <p class="success"> @body("green") </p> } case "error" => { <p class="error"> @body("red") </p> }}
Includes
Se puede solo llamar a alguna otra plantilla que se desee <h1>Home</h1>
<div id="side"> @common.sideBar()</div>
Se puede definir una variable en la plantilla principal de esta forma:@(title: String, scripts: Html = Html(""))(content: Html)
Se puede extender la plantilla tal como se necesita en un script extra: @scripts = { <script type="text/javascript">alert("hello !");</script> }
Fin
Mail: [email protected]: http://javascriptx.wordpress.com Java: http://xhrist14n.blogspot.comSite: http://www.christianportilla.comVideo:
https://www.youtube.com/watch?v=f1VUFa-lbLs
