Markup Builderの利用
このGroovletでは「Markup Builder」と呼ばれる機能を利用して、HTMLの構造を記述しています。ソースコードをよく見ると、このような形になっていることが分かるでしょう。
html.html {
head {
……ヘッダーのタグ……
}
body {
……ボディのタグ……
}
}
見れば分かるように、それぞれのタグの名前を使って、タグの内容を記述しています。例えば、<p>Hello</p>という出力なら「p "Hello"」と記述するわけです。タグに属性を指定する場合には、その後に()で引数として指定します。
この機能をうまく使いこなせば、かなり複雑なHTMLも非常に分かりやすく記述できます。例えば、スタイルシートやJavaScript、テーブルなども、このやり方で記述することが可能です。
「Markup Builder」HTMLの構造
html.doubleQuotes = true
html.html {
head {
title "Hello"
style(type:'text/css'){
yield('''
h3 { background: #AAAAFF; padding: 3px;}
p { color: #666666; }
''')
}
script(type:'text/javascript'){
yield('''
alert("ok");
''')
}
}
body {
h3 "Groovlet"
p "Welcome to Groovy world!"
a (href:"http://google.com","Google Site")
hr (size:"2")
table(border:"1"){
tr(){
td "One"
td "Two"
td "Three"
}
}
}
}
スタイルシート、JavaScript、テーブルの例。アクセスすると最初にスクリプトが実行され、アラートが表示される
ここでは、ヘッダーにスタイルシートとスクリプト、ボディには<h3>、<p>、<a>、<hr>、<table>といったタグを配置しています。かなり複雑なソースコードも、このように記述できます。冒頭に、html.doubleQuotesというものがありますが、これは属性の値をシングルクォートではなくダブルクォートで出力させるための設定です（なくとも動作には影響ありません）。
これを実行して表示されるページのHTMLソースコードを見てみると、次のようなものが自動生成されていることが分かります。
HTMLソースコード
<html>
<head>
<title>Hello</title>
<style type="text/css">
h3 { background: #AAAAFF; padding: 3px;}
p { color: #666666; }
</style>
<script type="text/javascript">
alert("ok");
</script>
</head>
<body>
<h3>Groovlet</h3>
<p>Welcome to Groovy world!</p>
<a href="http://google.com">Google Site</a>
<hr size="2" />
<table border="1">
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
</body>
</html>
注意しておきたいのは、スタイルシートとスクリプトの本文となるテキストの記述です。これらは、何行にも渡る長いテキストが指定されます。こうした場合には「yield」というメソッドを使います。yield('''内容''')というように3つのクォートを使って記述することで、改行を含むテキストを値に持つことができます。
