定期外ですが、月1くらいで書いて連載を終わらせようとしているnkgwです(ルール的に問題なし)。
前回は静的なページを表示することでAsta4Dのプロジェクトを作って表示するところまでをやりました。
第2回目は静的なページだけではWebアプリケーションとしては不完全です。
そんなわけで動的ページを表示させれるようにします。
動的ページを作る手順
動的ページを実際に作りながら説明します。
プロパティファイル書き込み
URLルールと同じようにSnippetクラスを置くパッケージ名を書きます。
ついでにcache機能をoffにしたいので、cacheの設定も書き込む事にします。
cache設定については開発中はoffにしておかないと直してもすぐに反映してくれないので、開発環境ではoffがおすすめです！(忘れたこと数知れず)
cacheEnable=false snippetResolver.searchPathList=com.astamuse.blog_sample.snippet
cacheの設定はcacheEnableでtrue falseのどちらかを設定します。
設定してない時はtrue扱いされるらしいです。
Snippetの場所はsnippetResolver.searchPathListにパッケージ名を入れます。
書かなくてもよいのですが、Snippetを大量に書くようになった時に面倒になるので設定を追加した方が良いと思います。
複数のパッケージに分ける場合は一番上のパッケージまでを書くようにすればオッケーです。
com.astamuse.blog_sample.snippet.patent com.astamuse.blog_sample.snippet.keywordみたいな構成ならcom.astamuse.blog_sample.snippetまでという意味です。
HTMLテンプレート作成
HTMLがないと話になりませんので、元となるHTMLファイルを作成します。
今回はサンプルなので、簡単なHTMLファイルを用意しました。
<html> <head> <meta charset="utf-8" /> </head> <body> <p class="text"></p> </body> </html>
今回はこのpタグにSnippetで何か書く事を目標にします。
HTMLテンプレートにSnippetを埋め込む
サーバーでレンダリングする際は、Snippetの概念的に分割したレンダリングをするべきとの考えなので、bodyタグ全体を一気にレンダリングさせずに必要な場所だけレンダリングするように印を埋め込みます。
埋め込み方については先に説明するのが難しいので、先にコードを見てから説明したいと思います。
<html> <head> </head> <body> <p afd:render="IndexSnippet:showRenderer" class="text"></p> </body> </html>
<html> <head> </head> <body> <afd:snippet render="IndexSnippet:showRenderer"> <p class="text"></p> </afd:snippet> </body> </html>
埋め込み方的には大体この2パターンです。
afd:snippetタグで埋め込むか普通のhtmlタグ内に属性として埋め込むかですね。
必要な場所に埋め込むということで、両方とも今回対象となるpタグに対して効果がおよぶような記述としました。
埋め込む時のルールとしてはSnippetクラス名：メソッド名という形で書きます。
クラス名は省略不可で、プロパティファイルに記載したパッケージ名とここに書いた内容でクラス名が特定出来るようにしなければなりません。
なので、プロパティファイルにSnippetのベースパッケージを指定しない場合は以下のように書いてください。
render="com.astamuse.blog_sample.snippet.IndexSnippet:showRenderer"
上で面倒と書いたのは、com.astamuse.blog_sample.snippetの部分を毎回書くのは面倒ってことです。
本格的なWebアプリケーションになると沢山これを書くことになるので、さすがに毎回大量に書くのは思ったより骨です。
なんかしらの理由でパッケージ移動なんて起きた日には見るも無残なことになることうけあい。
メソッド名については省略可能ですが、省略してもあんまりよいことがないので個々で付けてください。
Snippetの実装
HTMLに書いたSnippetをjavaで書いていきます。
今回はIndexSnippetクラスをcom.astamuse.blog_sample.snippet配下に作り、showRendererメソッドで書き込む事としまたので、その通りに実装していきます。
package com.astamuse.blog_sample.snippet; import com.astamuse.asta4d.render.Renderer; public class IndexSnippet { public Renderer showRenderer() { Renderer renderer = Renderer.create(); renderer.add(".text", "Snippetで書いたテキストです"); return renderer; } }
実装しました。
メソッドの戻り値はRendererクラスでここにDOM対してのレンダリング処理を入れ込みます。
第一引数にselectorを指定(指定の仕方はjqueryなんかと同じです)、第二引数にvalueを指定です。
他にも指定の仕方が色々ありますが(これは次回で説明)、基本形としてはこのような指定をします。
1つのRendererで複数個所レンダリングしたい場合は、次々とaddしていけばオッケーです。
ただ、何回か書いているように分割したレンダリングとするべきなので、ある程度の粒度で
起動
http://localhost:8080/に接続すると、指定したvalueが表示されていると思います。
補足
今回、class名でレンダリングしましたが、class名でレンダリングする場合はプレフィックスルールを決めると良いです。 せっかくHTMLとレンダリングロジックが分離されているのに、競合してしまうと意味がありません。
次回予告
次回はもう少しSnippetについて深堀していきます。
関連URL
第1回：環境構築して静的ページを表示するまで
第2回：Snippetを使って動的ページを作ろう(今ここ)
第3回：少し複雑なSnippet
第4回：Handlerの役割と使い方
第5回：Global Handlerとattribute
第6回：Form Flowを使おう
