ソースコードから理解する技術-UnderSourceCode

手を動かす(プログラムを組む)ことで技術を理解するブログ

Play framework(6) - 画面の一部をタグにして部品化

Play frameworkでは「タグ」を使い、画面の一部を共通化することができます。
今回は、そのソースについてです。

まず、タグを使用する画面のハードコピーです。

create.html
f:id:UnderSourceCode:20130504101506j:plain

update.html
f:id:UnderSourceCode:20130504101520j:plain

ここでは2つの画面の白枠内の、titleとcontentのテキストボックスを共通化するため
別ファイルである「タグ」に切り出しています。

◆タグ
タグは、共通化して使いたいhtmlを別ファイルに切り出したものです。
タグのファイルは、アプリのルート\app\views\tagsフォルダに配置します。
以下、タグのソースです。

..\app\views\tags\memo.html


<p>
<label for="title">title: </label>
<input type="text" name="title" id="title" value="${_memo?.title}" />
</p>
<p>
<label for="content">content: </label>
<textarea name="content" id="content">${_memo?.content}</textarea>
</p>

共通化したいHTMLを書いていることが分かるかと思います。

また、テキストボックス内に表示する値を、以下の記述で設定しています。
${_memo?.title}
${_memo?.content}

タグには引数を渡すことができ、その値を画面に表示することができます。
ここでは引数memoがnull以外の場合、title、contentの値を表示しています。
memoの前の_(アンダーバー)が引数の参照を表し、memoの後ろの?がnull以外を表します。

なので、memo.htmlタグは引数memoに値が設定されている場合
title、contentの値を表示することになります。

◆タグの使用
次に、このタグを使用するHTMLファイルです。create.htmlとupdate.htmlの2つのファイルが使用しています。

..\app\views\MemoController\create.html


#{extends 'main.html' /}
#{set title:'Home' /}

#{form @MemoController.dbCreate()}
#{memo memo:memo /}
<p>
<input type="submit" value="Create" />
</p>
#{/form}

..\app\views\MemoController\update.html


#{extends 'main.html' /}
#{set title:'Home' /}

#{form @MemoController.dbUpdate()}
#{memo memo:memo /}
<p>
<input type="submit" value="Update" />
</p>
<input type="hidden" name="id" id="id" value="${id}" />
#{/form}

create.html、update.htmlとも、#{memo memo:memo /} という記述で
タグ(memo.html)を呼び出しています。

タグの呼び出しですが、#{タグ名 引数名:コントローラで渡す値 /}となっています。
この例では全て「memo」なので分かり難いですが、
memo.htmlをタグとして呼び出し、memoという引数に、memoというインスタンスを渡しています。

◆コントローラ
最後にコントローラです。

..\app\controllers\MemoController.java


(中略)

import java.util.*;

import models.*;

@With(Secure.class)
public class MemoController extends Controller {

(中略)

public static void update(long id, Memo memo){
setUpdateRenderArgs(id);
render(memo);
}

public static void create(){
setCreateRenderArgs();
render();
}

(中略)
}


create()アクションには引数を何も渡さず、update()アクションでは引数にmemoインスタンス
渡していることを確認してください。

これにより、タグにて2つのテキストボックスが共通化され
Create画面ではテキストボックスに何も表示されず
Update画面ではテキストボックスに値を表示する動きが実装されます。