Tutorial(3)
HTML
リソース(/WEB-INF/html/tutorial3.html)
<?xml version="1.0" encoding="UTF-8"?>

<html xmlns:java="http://hoeppe.the-ninja.jp/">
    <body>
        <div>hello world</div>
        <div java:canvas="canvas"></div>
    </body>
</html>
Java
package org.ruler.markup.tutorial;

import org.ruler.markup.api.Canvas;
import org.ruler.markup.api.Http;
import org.ruler.markup.api.Mount;
import org.ruler.markup.api.Page;
import org.ruler.markup.api.Source;

@Mount(path="/tutorial3.html")
@Source(file="/WEB-INF/html/tutorial3.html")
public class Tutorial3 extends Page {

	//@Source(id="canvas") // if class field name is not same HTML id.
	@Source
	Canvas canvas = (node) -> {
		node.attr("style", "color:ff0000;");
		node.text("this node was rewrited");
	};

	@Override
	public void action(Http http) {
		http.GET = (e) -> {
			Page page = this;
			page.draw(e);
		};
	}
}

実行
出力[結果]
<?xml version="1.0" encoding="UTF-8"?>

<html>
	<body>
		<div>hello world</div>
		<div java:canvas="canvas" style="color:ff0000;">this node was rewrited</div>
	<body>
</html>

説明
HTMLの一部(<div id="canvas"></div>)を動的に生成します。
Canvasクラスのフィールドに添付されたアノテーション@Source(id="xxx")と、
HTMLの属性(id)が一致するXML/HTMLタグが動的に生成される領域となります。
イベントリスナー(Canvas)に引数として渡されるNodeインスタンスをDOM Treeとして
操作することで、タグ・属性・子ノードを変更・追加することができます。