先日テンプレートのシンタックス系のマニュアルを意訳しましたが、こちらはもう少し具体的にScalaテンプレートの使い方を説明しているものになります。
例のごとく、もし私の訳が間違っていても責任は負えませんのであしからず・・・
正確なものを読みたい方は原典をどうぞ。
http://www.playframework.org/documentation/2.0.1/ScalaTemplateUseCases
なお、日本Playframeworkユーザー会さんの方で翻訳作業が進行中のようですので、そちらを待たれるという手もあります。
それではどうぞ！
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>
<!DOCTYPE html>
<html>
<head>
<title>@title</title>
</head>
<body>
<section class="content">@content</section>
</body>
</html>
ご覧のとおり、このテンプレートは2つのパラメータを必要としています。
タイトルと、HTMLコンテンツです。
では、別のテンプレートであるviews/Application/index.scala.htmlからこのテンプレートを使ってみましょう。
@main(title = "Home") {
<h1>Home page</h1>
}
<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>
<!DOCTYPE html>
<html>
<head>
<title>@title</title>
</head>
<body>
<section class="sidebar">@sidebar</section>
<section class="content">@content</section>
</body>
</html>
このパラメタを追加したメインテンプレートを、さっき用意したviews/Application/index.scala.htmlから使ってみましょう。
@main("Home") {
<h1>Sidebar</h1>
} {
<h1>Home page</h1>
}
<h1>Sidebar</h1>
} {
<h1>Home page</h1>
}
また、サイドバーの部分を別々に宣言することもできます。
@sidebar = {
<h1>Sidebar</h1>
}
@main("Home")(sidebar) {
<h1>Home page</h1>
}
<h1>Sidebar</h1>
}
@main("Home")(sidebar) {
<h1>Home page</h1>
}
※注意（公式にない私的メモ）
Play frameworkにおけるScalaテンプレートは関数だということを思い出しましょう。
さらに、テンプレートパラメータ（main.scala.htmlの先頭で宣言されている引数を受け取る部分）は、カリー化された関数になります。
だから、index.scala.htmlから呼び出す際に、コードブロックを{}で囲んで渡してあげることができるわけです。
カリー化されたmain.scala.htmlの方の引数の型が、Html型になっているので、コードブロックとして渡したHTMLはHtml型になるっぽいです。
Play frameworkにおけるScalaテンプレートは関数だということを思い出しましょう。
さらに、テンプレートパラメータ（main.scala.htmlの先頭で宣言されている引数を受け取る部分）は、カリー化された関数になります。
だから、index.scala.htmlから呼び出す際に、コードブロックを{}で囲んで渡してあげることができるわけです。
カリー化されたmain.scala.htmlの方の引数の型が、Html型になっているので、コードブロックとして渡したHTMLはHtml型になるっぽいです。
タグ（これらは関数、でしょ？）
それでは、ちょっとしたインフォメーションを表示するシンプルなタグを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>
}
}
@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>
}
@notice("error") { color =>
Oops, something is <span style="color:@color">wrong</span>
}
※注意（公式にない私的メモ）
テンプレートの方に@import tags._っていきなり出ていますね。
何の説明もなく、さも当たり前に書かれているので、なんじゃこりゃ！？と思いましたが、よくよく考えるとScalaテンプレートは結局ただの関数なので、上記で作成したviews/tags/notice.scala.htmlが、tags.notics()になっているということなんですね。（たぶん）
テンプレートの方に@import tags._っていきなり出ていますね。
何の説明もなく、さも当たり前に書かれているので、なんじゃこりゃ！？と思いましたが、よくよく考えるとScalaテンプレートは結局ただの関数なので、上記で作成したviews/tags/notice.scala.htmlが、tags.notics()になっているということなんですね。（たぶん）
Includes
再度言いますが、特別なことは何もありません。
どんなテンプレートもどこからでも呼び出すことが出来ます。
普通の関数だってどこかから呼び出しているのと全く変わりありません。
<h1>Home</h1>
<div id="side">
@common.sideBar()
</div>
<div id="side">
@common.sideBar()
</div>
moreScriptsとmoreStylesと同等の事
Play framework1.xの頃のmoreScriptsやmoreStylesと同じ環境をScalaテンプレートで宣言するには、mainテンプレートの以下のように宣言します。
(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>
mainテンプレート以外のテンプレートでのみ使いたいJavaScriptなどは以下のように定義します。
@scripts = {
<script type="text/javascript">alert("hello !");</script>
}
@main("Title",scripts){
Html content here ...
}
<script type="text/javascript">alert("hello !");</script>
}
@main("Title",scripts){
Html content here ...
}
mainテンプレートに渡すべき特別なJavaScriptなどが無い場合は、以下のよう呼び出します。
@main("Title"){
Html content here ...
}
Html content here ...
}
※注意（公式にない私的メモ）
mainテンプレートのscripts引数を見てみると、デフォルト引数としてHtml=("")がセットされていますよね？
だから、mainテンプレートを呼び出す、別のテンプレートからscriptsを渡さなければ自動的にHtml("")がscriptsに格納されるわけですね。
mainテンプレートのscripts引数を見てみると、デフォルト引数としてHtml=("")がセットされていますよね？
だから、mainテンプレートを呼び出す、別のテンプレートからscriptsを渡さなければ自動的にHtml("")がscriptsに格納されるわけですね。
以上で終了です。
0 件のコメント:
コメントを投稿