少し複雑なSnippet
今回はasta4dをmaven + jettyで動かしつつ勉強しようという趣旨です。 流石に機能がいっぱいあるので数回に分けて書いていこうと思います。 私が書く分は全6回を予定しています。
前回の簡単なSnippetでは流石に実用性がなさすぎるので、少し複雑なSnippetの書き方を書いていきます。
今回のHTML
<html>
<head>
</head>
<body>
<afd:snippet render="IndexSnippet:showRenderer">
<p class="text"></p>
</afd:snippet>
<afd:snippet render="IndexSnippet:showLink">
<a href="" class="link"></a>
</afd:snippet>
<afd:snippet render="IndexSnippet:showList">
<ul>
<li class="list">
<p class="text"></p>
</li>
</ul>
</afd:snippet>
</body>
</html>
ちょっとHTMLが長くなってきたのでbodyタグの中にインデントを入れています。 中身的には前回より2つSnippetが増えています。 1つはリンク、1つはリストです。
今回は追加した2つを描画する方法について書いていきます。
リンクの作り方
まずはaタグからリンクを作る方法です。 aタグには色々属性がありますが、href属性が書き換えられないとリンクが生成出来ません。
renderer.add(".link", "astamuse.comへのリンク");
<a href="" class="link">astamuse.comへのリンク</a>
前回と同様のやり方では、タグの中身が変化するだけでリンクの中身を生成することが出来ません。
public Renderer showLink() {
Renderer renderer = Renderer.create();
renderer.add(".link", "astamuse.comへのリンク");
renderer.add(".link", "href", "http://astamuse.com");
return renderer;
}
ということで引数を1つ追加します。
属性に値を入れたい場合は引数を3つにして2つ目に属性のname、3つ目に属性のvalueを入れれば大丈夫です。
<a href="http://astamuse.com" class="link">astamuse.comへのリンク</a>
これでリンクの完成です。
リストの作り方
リストといえばliタグですが、Snippetとしてはliタグじゃなくてもリストは作れます(リストというより複数個をまとめて作れるってだけ)。
liタグが分かりやすいと思うので、liタグを使います。
<afd:snippet render="IndexSnippet:showList">
<ul>
<li class="list">
<p class="text"></p>
</li>
</ul>
</afd:snippet>
public Renderer showList() {
Renderer renderer = Renderer.create();
List<String> list = Arrays.asList("a", "b", "c");
renderer.add(".list", list, text -> Renderer.create(".text", text));
return renderer;
}
リストの時は第2引数にiteratorを渡す事でレンダリングする事が出来ます。 第3引数はRendererクラスを返却するラムダ式を書きます。
renderer.add(".list", list, (int rowIndex, String text) -> Renderer.create(".text", rowIndex + text));
また、レンダリングで処理している0オリジンのインデックスの番号を取得する事も出来ます。
どちらを選択しても問題ありませんが、インデックス使わない時は使わないのが望ましいです。
起動
http://localhost:8080/に接続して思った通り表示されていれば大成功。
終わりに
少し複雑という割にそんなに複雑ではないですが、これだけで大体のレンダリングに対応できると思います。
レンダリング部分がとても簡単で使いやすいフレームワークなので、ちょっとした動的ページを作り際にはおすすめ出来るフレームワークです。
是非使ってみていただければと思います。
次回予告
次回はSnippetと切っても切れない関係であるHandlerについて書きます。
関連URL
第1回：環境構築して静的ページを表示するまで
第2回：Snippetを使って動的ページを作ろう
第3回：少し複雑なSnippet(今ここ)
第4回：Handlerの役割と使い方
第5回：Global Handlerとattribute
第6回：Form Flowを使おう
