Play framework(6) - 画面の一部をタグにして部品化
Play frameworkでは「タグ」を使い、画面の一部を共通化することができます。
今回は、そのソースについてです。
まず、タグを使用する画面のハードコピーです。
create.html
update.html
ここでは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画面ではテキストボックスに値を表示する動きが実装されます。