Markup Ruler

概要
今回はページの一部を動的に出力する方法を練習します。

HTML

[1] html_source.html

※相対パスが[/WEB-INF]から始まるディレクトリに配置してください

<html xmlns:java="http://hoeppe.the-ninja.jp/">
    <body>
        <p>
        	markup ruler is good template engine.
        </p>

        <p>
        	<span java:canvas="canvas"/>
        </p>

        <p>
        	lets know more.
        </p>
    </body>
</html>

Java

[2] HelloWorld.java

package org.ruler.markup.tutorial;

import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;

import org.ruler.markup.api.Source;
import org.ruler.markup.api.Page;

@Path("/hello")
@Source(file="/WEB-INF/html/html_source.html")
public class HelloWorld extends Page {

	@GET
	@Produces(MediaType.TEXT_HTML)
	public String action(){
		String html = super.draw();
		return html;
	}

	@Source
	Canvas canvas = (node) -> {
		node.setTag("h1");
		node.addText("hello world");
		node.setAttr("style", "color:#ff8888;");
	};
}

[3] HelloApplication.java

※前回と同じなので省略します。

web.xml

[4] web.xml

※前回と同じなので省略します。

実行
デプロイしてサーバー（Tomcat）を起動し、Webブラウザで登録されたパスを開いてみてください。
http://localhost:8080/rest/helloにてHTMLページが表示され、hello worldと表示されたら成功です。

出力結果
ブラウザに表示されるHTMLのソースです
元のソースで<span java:canvas="canvas"/>だったところのタグと属性、テキストが変化しています。

<?xml version='1.0' encoding='utf-8'?>
<html xmlns:java="http://hoeppe.the-ninja.jp/">
	<body>
		<p>
			markup ruler is good template engine.
		</p>
		<p>
			<h1 java:canvas="canvas" style="color:#ff8888;">
				hello world
			</h1>
		</p>
		<p>
			lets know more.
		</p>
	</body>
</html>

説明
HTMLリソースに属性[java:canvas="$変数"]を埋め込んでおくことで、そのノードを動的に出力します。
プログラム側では、@Source(id="$変数") アノテーションが付属したCanvas型のプロパティーが、
ページをレンダリングする際にイベントリスナーとしてコールされます。
イベントリスナーが受け取る引数Node型のオブジェクトをDOMとして操作することで、ページを変化させてください。