Now let's look at the typical usage of templates.
layout
Now declare a view / main.scala.html template as the main template:
@(title: String)(content: Html) <!DOCTYPE html> <html> <head> <title>@title</title> </head> <body> <section class="content">@content</section> </body> </html>
The template above has two parameters: name and HTML content block. Now we use it in views/Application/index.scala.html:
@main(title = "Home") { <h1>Home page</h1> }
Note: we can specify parameter names, such as @ main(title = "Home"), or @ main("Home") directly. You can choose the way you like.
Sometimes you need to set page specific content blocks for sidebars or breadcrumb paths. You can add an additional parameter:
@(title: String)(sidebar: Html)(content: Html) <!DOCTYPE html> <html> <head> <title>@title</title> </head> <body> <section class="sidebar">@sidebar</section> <section class="content">@content</section> </body> </html>
Now call it as follows:
@main("Home") { <h1>Sidebar</h1> } { <h1>Home page</h1> }
Or simply state sidebar separately:
@sidebar = { <h1>Sidebar</h1> } @main("Home")(sidebar) { <h1>Home page</h1> }
Tags (are they also functions?)
Now let's write a views/tags/notice.scala.html tag to show an HTML notification:
@(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> } }
Use it in another template:
@import tags._ @notice("error") { color => Oops, something is <span style="color:@color">wrong</span> }
Contain
There is nothing special about includes. You can call any other template (or even any code anywhere):
<h1>Home</h1> <div id="side"> @common.sideBar() </div>
moreScripts and moreStyles
To define the old moreScripts and moreStyles variables (such as Play! 1.x) in the Scala template, you can modify the main template as follows:
@(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>
If you need additional scripts, you can write as follows:
@scripts = { <script type="text/javascript">alert("hello !");</script> } @main("Title",scripts){ Html content here ... }
If you don't need additional scripts, it's easier:
@main("Title"){ Html content here ... }