lunes, 8 de agosto de 2016

Generacion de Vistas en Play Framework

Vistas en Play Framework


El motor de plantillas


El motor de plantillas esta basado en Scala.
Play viene con Twirl, un poderoso motor de plantillas basado en Scala, el cual fue elaborado en base a  Razor de  ASP.



Twirl


Compacto, expresivo y fluido: minimiza el numero de caracteres y tecleado requeridas en un archivo y habilita todo de modo rapido y fluido para el flujo de trabajo.
En la mayoria de sintaxis de plantillas, no se necesita interrumpir tu codificacion para denotar explicitamente los bloques de codigo servidor en el HTML.
El parser es suficientemente habil para inferir esto del codigo. De modo que se habilita una sintaxis compacta y expresiva la cual es limpia, rapido y divertido de tipear.

Facil de Aprender: te permite llegar a ser rapidamente productivo, con un minimo de conceptos. Se usa los constructores de Scala de modo simple, y todas las habilidades sobre HTML.

No un nuevo lenguaje: se creo concienzudamente para generar un nuevo lenguaje.
En vez de querer para habilitar Scala para los desarrolladores para usar sus habilidades existentes de Scala, y entregar un nuevo lenguaje de sintaxis de marcado que habilita un flujo de trabajo de contruccion de HTML.

Editable en cualquier editor: no se requiere una herramienta especifica que ayude a ser productivo se puede hacer edicion del codigo en un editor de textos antiguo.

Nota.- aun cuando el motor de plantillas usa Scala como lenguaje de expresiones, es no es un problema para el desarrollo con java. Se puede usar casi cualquier lenguaje de programacion con el sistema de plantillas.

Hay que tomar en cuenta que una plantilla no es un lugar para escribir logica compleja. No se puede escribir complicador codigos de Scala en una plantilla.
La mayoria de las veces se debe acceder a datos de un objeto u modelo de datos:

myUser.getProfile().getUsername()

Los tipos de parametros son especificados usando la sintaxis de sufijo. los tipos genericos son especificados usando los simbolos [] en ves de los usuarios <> de la sintaxis de java. 

List[String] -> List<String>

Revision


Una plantilla de scala es un simple texto que contiene pequeños bloques de codigo de scala.
Las plantillas pueden generar un formato texto, como es HTML, XML, o csv.
El sistema de plantillas ha sido diseñado para sentirse confortable con lo que usualmentese trabaja en HTML, permitiendo a los desarrolladores frontend facilmente trabajar con las plantillas.

Las plantillas son compiladas como funciones estandard de scala, siguiendo una convencion de nombres. Si se crea la plantilla views/Application/index.scala.html, se generara una clase  views.html.Application.index con un metodo render.

@(customer: Customer, orders: List[Order])

<h1>Welcome @customer.name!</h1>

<ul>
@for(order <- orders) {
  <li>@order.getTitle()</li>
}
</ul>

Luego esto se puede llamar como cualquier codigo de java normalmente  por metodo como en la clase:

Content html = views.html.Application.index.render(customer, orders);

>Sintaxis: el caracter magico  ‘@’
La plantilla de scala usa @ como un simple caracter especial, Cada vez que el caracter es encontrado, se indica el comienzo de una statement dinamica.
No se requiere cerra el codigo de bloque explicitamente:

Hello @customer.getName()!
       ^^^^^^^^^^^^^^^^^^
          Codigo dinamico

Por medio del motor de plantillas automaticamente se detecta el fin de un bloque de codigo por medio del analisis de codigo, la sintaxis solo soporta una sentencia simple. si se desea inserta una expresion mas compleja se debe hacer uso de parentesis:

Hello @(customer.getFirstName() + customer.getLastName())!
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                          Codigo dinamico

Tambien se puede usar llaves para escribir  expresiones complejas

Hello @{val name = customer.getFirstName() + customer.getLastName(); name}!
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                        Codigo dinamico

Tomando en cuenta que @ es un caracter especial, se necesitara escaparlo en algunos casos usando @@:

My email is bob@@example.com

Parametros de plantilla

Una plantilla es como una funcion, asi de este modo los parametros, los cuales deben ser declarados encima del archivo de la plantilla:

@(customer: models.Customer, orders: List[models.Order])

Se puede tambien usar valores por defecto en los parametros:

@(title: String = "Home")

O aun asi tambien parametros agrupados:

@(title:String)(body: Html)

Iteracion


se puede usar la palabra "for", para iterar elementos en la plantilla:

<ul>
@for(p <- products) {
  <li>@p.getName() ($@p.getPrice())</li>
}
</ul>

Nota.- hay que asegurarse que "{" es en la misma linea en la cual se indica el uso de "for" y la expresion debe continuar en la siguiente linea:

Bloque If

Los bloques if no son nada especial. Simplemente son usados en Scala como expresiones estandard:

@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>

Nota que se puede declarar bloques de codigo reusable puros:

@title(text: String) = @{
  text.split(' ').map(_.capitalize).mkString(" ")
}

<h1>@title("hello world")</h1>

Nota.- cuando se declara un bloque de codigo puro de esta forma la plantilla puede ser util pero guardando en mente que la plantilla no es el mejor lugar para escribir logica compleja. esto es a menudo mejor que externalizar esa clase de codigo en una clase java (que puede estar almacenando bajo las vistas un paquete que sea util).
Por convencion un bloque reusable define con un nombre el comienzo de un modo implicito:

@implicitFieldConstructor = @{ MyFieldConstructor() }
Declaring reusable values
You can define scoped values using the defining helper:

@defining(user.getFirstName() + " " + user.getLastName()) { fullName =>
  <div>Hello @fullName</div>
}

Importar expresiones

Se puede importar cualquier cosa que se desee en el comienzo de tu plantilla (o sub-plantilla):

@(customer: models.Customer, orders: List[models.Order])

@import utils._

...

Para hacer una resolucion absoluta, se usa el prefijo raiz en la expresion de import.

@import _root_.company.product.core._
Si se tiene importa comunes, los cuales sean necesarios para todas las plantillas, se puede declarar en build.sbt

TwirlKeys.templateImports += "org.abc.backend._"

Comentarios


se puede escribir un bloque de comentario en las plantillas usando  @* *@:

@*********************
 * This is a comment *
 *********************@

Se puede poner un comentario en la primera linea para documentar tu plantilla en la documentacion de scala:

@*************************************
 * Home page.                        *
 *                                   *
 * @param msg The message to display *
 *************************************@
@(msg: String)

<h1>@msg</h1>

Escape de caracteres

Por defecto, los contenidos dinamicos con escapados en funcion al tipo de plantilla (HTML o XML). Si se desea una salida en contenido raw, se puede poner una tipo de content type explicito.

<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>

Como se puede ver, esta plantilla puede tomar dos parametros: un titulo y un bloque de html. Ahorase puede usar esto desde otra vista plantilla views/Application/index.scala.html template:

@main(title = "Home") {

  <h1>Home page</h1>

}
Nota.- Se debe usar ambos parametros ( como parametros posicionados @main(title = "Home") o @main("Home"). Hay que escoger cualquier forma en que se vea mas claro el contexto que se desea usar.

En algunos casos se necesita un segundo bloque de contenidos para otro tipo de contenidos y eso se puede obtener de la siguiente forma:

@(title: String)(sidebar: Html)(content: Html)
<!DOCTYPE html>
<html>
  <head>
    <title>@title</title>
  </head>
  <body>
    <section class="content">@content</section>
    <section class="sidebar">@sidebar</section>
  </body>
</html>

Usando esto desde tu plantilla "index", se puede obtener lo siguiente:

@main("Home") {
  <h1>Sidebar</h1>

} {
  <h1>Home page</h1>

}

Alternativamente se puede declarar el sidebar en un bloque separado:

@sidebar = {
  <h1>Sidebar</h1>
}

@main("Home")(sidebar) {
  <h1>Home page</h1>

}

Tags

Se puede escribir un tag simple views/tags/notice.scala.html que muestre una nota en HTML

@(level: String = "error")(body: (String) => Html)

@level match {

  case "success" => {
    <p class="success">
      @body("green")
    </p>
  }

  case "warning" => {
    <p class="warning">
      @body("orange")
    </p>
  }

  case "error" => {
    <p class="error">
      @body("red")
    </p>
  }

}

Y ahora se puede usar desde otra plantilla:

@import tags._

@notice("error") { color =>
  Oops, something is <span style="color:@color">wrong</span>
}


Includes

De nuevo no hay nada especial en esto.
Se puede solo llamar a alguna otra plantilla que se desee ( o de hecho a cualquier otra funcion, donde sea que este definida):

<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)

<!DOCTYPE html>

<html>
    <head>
        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
        <script src="@routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
        @scripts
    </head>
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" href="#">Movies</a>
                </div>
            </div>
        </div>
        <div class="container">
            @content
        </div>
    </body>
</html>

Y se puede extender la plantilla tal como se necesita en un script extra:

@scripts = {
    <script type="text/javascript">alert("hello !");</script>
}

@main("Title",scripts){

   Html content here ...

}

Y se extiende una plantilla cuando no se necesita un script extra, justo asi:

@main("Title"){
   Html content here ...
}




Escrito por Christian Portilla Pauca
Site: christianportilla.comwww.christianportilla.com

https://www.facebook.com/permalink.php?story_fbid=1624516427858719&id=1592887711021591


Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

0 comentarios:

© 2013 JAVA Programming. All rights resevered. Powered By Blogger