JavaTemplateUseCases - opensas/Play20Es GitHub Wiki
Esta página todavía no ha sido traducida al castellano. Puedes ayudarnos con la tarea simplemente presionando el botón
Edit Page. Para más información puedes leer esta guía para el traductor. Aquí puedes ver cuánto nos falta para terminar la traducción.
Templates, being simple functions, can be composed in any way you want. Below are a few examples of some common scenarios.
Let’s declare a views/main.scala.html template that will act as a main layout template:
@(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>@title</title>
</head>
<body>
<section class="content">@content</section>
</body>
</html>As you can see, this template takes two parameters: a title and an HTML content block. Now we can use it from another views/Application/index.scala.html template:
@main(title = "Home") {
<h1>Home page</h1>
}Note: You can use both named parameters (like
@main(title = "Home")and positional parameters, like@main("Home"). Choose whichever is clearer in a specific context.
Sometimes you need a second page-specific content block for a sidebar or breadcrumb trail, for example. You can do this with an additional parameter:
@(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>Using this from our ‘index’ template, we have:
@main("Home") {
<h1>Sidebar</h1>
} {
<h1>Home page</h1>
}Alternatively, we can declare the sidebar block separately:
@sidebar = {
<h1>Sidebar</h1>
}
@main("Home")(sidebar) {
<h1>Home page</h1>
}Let’s write a simple views/tags/notice.scala.html tag that displays an HTML notice:
@(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>
}
}And now let’s use it from another template:
@import tags._
@notice("error") { color =>
Oops, something is <span style="color:@color">wrong</span>
}Again, there’s nothing special here. You can just call any other template you like (or in fact any other function, wherever it is defined):
<h1>Home</h1>
<div id="side">
@common.sideBar()
</div>