§Scala テンプレートのよくある使い方
テンプレートは単純な関数なので、いかようにも組み合わせることができます。このページでは、よくある利用シナリオを紹介していきます。
§レイアウト
メインレイアウトとして機能する views/main.scala.html というテンプレートを定義してみましょう。
@(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>@title</title>
</head>
<body>
<section class="content">@content</section>
</body>
</html>
ご覧のとおり、このテンプレートはタイトルと HTML コンテンツを含むブロックの二つの引数を取ります。このテンプレートは、例えば views/Application/index.scala.html のような別のテンプレートから、次のように利用することができます。
@main(title = "Home") {
<h1>Home page</h1>
}
Note:
@main("Home")の代わりに、名前付き引数を使って@main(title = "Home")のように書くこともあります。どちらを使っても良いのですが、時と場合に応じてテンプレートが読みやすくなる方を選ぶとよいでしょう。
例えば、ページのメインコンテンツ以外にサイドバーやパンくずなどに副次的な内容を埋め込みたい場合、次のようにパラメータを追加するとよいでしょう。
@(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>
これを先ほどの index テンプレートから、以下のように利用することができます。
@main("Home") {
<h1>Sidebar</h1>
} {
<h1>Home page</h1>
}
別の書き方として、サイドバー向けのブロックをレイアウトの呼び出しとは全く別に宣言することもできます。
@sidebar = {
<h1>Sidebar</h1>
}
@main("Home")(sidebar) {
<h1>Home page</h1>
}
§タグ
Web ページ上に通知を表示するための単純なタグ views/tags/notice.scala.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>
}
}
このタグを別のテンプレートから呼び出すには、次のように書きます。
@import tags._
@notice("error") { color =>
Oops, something is <span style="color:@color">wrong</span>
}
§インクルード
これも、特別なことは何もありません。次のように、他のテンプレートを単に呼び出すだけで OK です (実際には、テンプレートに限らず、スコープ内にある関数であればなんでも呼び出せます) 。
<h1>Home</h1>
<div id="side">
@common.sideBar()
</div>
§moreScripts と moreStyles 相当の変数
Scala テンプレートにおいて (Play! 1.x のような) 古い moreScripts または moreStyles 相当の変数を定義するために、メインテンプレートにて以下のような変数を定義することができます :
@(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>
そして、追加のスクリプトが必要な拡張テンプレートでは、以下のようにします :
@scripts = {
<script type="text/javascript">alert("hello !");</script>
}
@main("Title",scripts){
Html content here ...
}
そして、追加のスクリプトを必要としない拡張テンプレートでは、単に以下のようにします :
@main("Title"){
Html content here ...
}
次ページ: カスタムフォーマット