05 . generacion de vista con plantillas twirl en play framework

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() ($@p.getPrice())</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() ($@product.getPrice())
}
<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: xhrist14n@gmail.com
 Blog: http://javascriptx.wordpress.com
 Java: http://xhrist14n.blogspot.com
 Site: http://www.christianportilla.com
 Video:
https://www.youtube.com/watch?v=f1VUF
a-lbLs

05 . generacion de vista con plantillas twirl en play framework

Recomendados

Recomendados

Más contenido relacionado

Similar a 05 . generacion de vista con plantillas twirl en play framework

Similar a 05 . generacion de vista con plantillas twirl en play framework (20)

Más de christian enrique portilla pauca

Más de christian enrique portilla pauca (14)

Último

Último (14)

05 . generacion de vista con plantillas twirl en play framework