Markup Template Engine introduced Groovy 2.3

Groovy 2.3,2.4の新機能より、
「マークアップテンプレー
トエンジン」機能のご紹介
2014/12/19
NTTソフトウェア株式会社
上原潤二
Copyright (C) 2014 NTT Software Corp.

The Groovy Roadmap
• Groovy 2.3
• 2.3.0(2014.5.5)
• Groovy 2.4
• 2.4b1(2014.6.12)
• 2.4b2(2014.7.29)
• 2.4b3(2014.9.2)
• 2.4b4(2014.11.27)
• RC1,2,3…
• Release(2015.初?)
• Groovy 3.0(2016?)
http://www.slideshare.net/SpringCentral/groovy-
in-2014andbeyond?qid=c66045f1-fab4-44f8-
a86e-afccd3e7e56f&v=qf1&b=&from_search=3

Groovy 2.3新機能一覧
• Trait
• 新規AST変換
• @TailRecursive/
@Builder/@Sortable/
@SourceURI
• ライブラリ改良・拡張
• マークアップテンプ
レートエンジンの追
加
• JSON Slurper
• ConﬁgSlurper
• Java8/7対応
• JUnit4対応
• @ClosureParams
• ツール拡張
• Groovysh
• GroovyConsole
• ドキュメント改善

Groovy 2.4 
∼beta4)新機能一覧
• Android対応
• ライブラリ改良・拡張
• toUnique(), toSorted()の
追加
• init(), dropRight()、
takeRight()の追加
• System.currentTimeSec
ond()の追加
• ツール拡張
• Groovysh
• -eオプション
• ローカル変数の型宣言
• SelfTypeアノテーション
• MacroGroovy/
ASTMatcher→2.5へ

今日のテーマ
• マークアップテンプレートエンジン
• groovy.text.markup.MarkupTemplateEngine

継承階層
• SimpleTemplateEngineと同列
• MarkupBuilderのような記法のテンプレート

XML/HTMLを生成するDSL
html {
head {
title "タイトル"
}
body {
h1 "タイトル"
ul {
(1..10).each {
li it
}
}
}
}
<html>
<head>
<title>タイトル</title>
</head><body>
<h1>タイトル</h1><ul>
<li>1</li><li>2</li><li>3</
li><li>4</li><li>5</li><li>6</li><li>7</
li><li>8</li><li>9</li><li>10</li>
</ul>
</body>
</html>

機能
• プログラマブルマークアップ言語
• HTML/XMLを生成
• 型チェック機能つき
• インクルード
• エスケープ
• レイアウト
• http://beta.groovy-lang.org/docs/latest/html/gapi/
groovy/text/markup/
BaseTemplate.html#layout(java.util.Map, java.lang.String)
• 国際化
• Grailsタグリブを呼び出す
• http://beta.groovy-lang.org/docs/latest/html/gapi/groovy/
text/markup/TagLibAdapter.html

フレームワークにくみこまれ始
めている
• Spring MVC 4のGroovyMarkupViewはそれである
• Spring Bootから呼んだり
• http://spring.io/blog/2014/05/28/using-the-
innovative-groovy-template-engine-in-spring-
boot
• Ratpackでも使える

今日は
• マークアップテンプレートエンジンを使って
Webアプリケーションフレームワークを作っちゃ
おう!!
• マークアップテンプレートエンジンは、基
本的には「文字列生成処理」なので、http
リクエストに繋げ、レスポンスを返す
• TemplateServletとのアダプタを作ればよい

これだけだ
package org.jggug.markup
import groovy.text.markup.MarkupTemplateEngine
import groovy.text.markup.TemplateConﬁguration
class ServletAwareMarkupTemplateEngine extends
MarkupTemplateEngine {
ServletAwareMarkupTemplateEngine() {
super(new TemplateConﬁguration(autoIndent:true,
autoNewLine:true, expandEmptyElements:true))
}
}

html {
includeGroovy('head.tpl')
body {
nav (class:"navbar navbar-inverse navbar-ﬁxed-top", role:"navigation") {
div (class:"container") {
div (class:"navbar-header") {
button (type:"button", class:"navbar-toggle collapsed", 'data-
toggle':"collapse", 'data-target':"#navbar", 'aria-expanded':"false", 'aria-
controls':"navbar") {
span class:"sr-only", "ナビゲーションの切替"
span class:"icon-bar"
}
a(class:"navbar-brand", href:"#", yield "Bootstrap theme")
}
div (id:"navbar", class:"navbar-collapse collapse") {
ul (class:"nav navbar-nav") {
li (class:"active") { a (href:"#", "Home") }
li { a (href:"#about", "About" ) }
li { a (href:"#contact", "Contact" ) }
li (class:"dropdown") {
a (href:"#", class:"dropdown-toggle", 'data-toggle':"dropdown",
role:"button", 'aria-expanded':"false", "Dropdown"; span class:"caret" )
ul (class:"dropdown-menu", role:"menu") {
デモ
BootstrapのHTML/CSSのサン
プルを機械的に変換。つらい。

web.xml
<web-app>
<servlet>
<servlet-name>template</servlet-name>
<servlet-class>groovy.servlet.TemplateServlet</servlet-class>
<init-param>
<param-name>template.engine</param-name>
<param-value>org.jggug.markup.ServletAwareMarkupTemplateEngine</
param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>template</servlet-name>
<url-pattern>*.tpl</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.tpl</welcome-file>
</welcome-file-list>
</web-app>

war
.
├── META-INF
│ └── MANIFEST.MF
├── WEB-INF
│ ├── classes
│ │ ├── META-INF
│ │ ├── cars.tpl
│ │ ├── defer.tpl
│ │ ├── head.tpl
│ │ ├── index.tpl
│ │ ├── list.tpl
│ │ ├── navi.tpl
│ │ ├── org
│ │ │ └── jggug
│ │ │ ├── Car.class
│ │ │ └── markup
│ │ │ ├── ServletAwareMarkupTemplateEngine.class
│ │ │ └── ServletAwareTypeCheckedMarkupTemplateEngine.class
│ │ ├── sample.tpl
│ │ └── typechecked
│ │ └── index.stpl
│ ├── lib
│ │ └── groovy-all-2.4.0-beta-4.jar
│ └── web.xml
├── cars.tpl
├── defer.tpl
├── head.tpl
├── index.tpl
├── list.tpl
├── navi.tpl
├── sample.tpl
└── typechecked
└── index.stpl
includeするには
classpathにある必要が
あり、暫定的に二重保持

型チェックつきにする
package org.jggug.markup
import
groovy.text.markup.MarkupTemplateEngine
import
groovy.text.markup.TemplateConﬁguration
import groovy.text.Template
class
ServletAwareTypeCheckedMarkupTempl
ateEngine extends MarkupTemplateEngine
{
HashMap<String,String> modelTypes = [
request:'javax.servlet.http.HttpServletReque
st',
response:'javax.servlet.http.HttpServletResp
onse',
context:'javax.servlet.ServletContext',
application:'javax.servlet.ServletContext',
session:'javax.servlet.http.HttpSession',
params:'Map',
headers:'LinkedHashMap<String,
String>'
]
ServletAwareTypeCheckedMarkupTemplate
Engine() {
super(new
TemplateConﬁguration(autoIndent:true,
autoNewLine:true,
expandEmptyElements:true))
}
Template createTemplate(Reader reader)
{
createTypeCheckedModelTemplate(reader,
modelTypes)
}
Template createTemplate(Reader reader,
String sourceName) {
createTypeCheckedModelTemplate(reader,
sourceName, modelTypes)
}
Template createTemplate(URL resource)
{
createTypeCheckedModelTemplate(resourc
e, modelTypes)
}
}

型情報の与え方
HashMap<String,String> modelTypes = [
request:'javax.servlet.http.HttpServletRequest',
response:'javax.servlet.http.HttpServletResponse',
context:'javax.servlet.ServletContext',
application:'javax.servlet.ServletContext',
session:'javax.servlet.http.HttpSession',
params:'Map',
headers:'LinkedHashMap<String, String>'
]
createTypeCheckedModelTemplate(reader, modelTypes)
文字列で!

型エラー
javax.servlet.ServletException: Creation of template failed:
org.codehaus.groovy.control.MultipleCompilationErrorsException: startup
failed:
GeneratedMarkupTemplate0: 4: [Static type checking] - No such
property: foo for class: javax.servlet.http.HttpServletRequest
@ line 4, column 33.
h1 { yield "request.foo="+request.foo }
^
html {
body {
h1 "headers="+headers.'user-agent'
h1 "request.foo="+request.foo
}
}

プログラミングHTML:
Helper Functions
def container(clos) {
div (class:"container") {
clos.call()
}
}
def row(clos) {
div (class:"row") {
clos.call()
}
}
def col_md(n, clos) {
div (class:"col-md-"+n) {
clos.call()
}
}
def header(s) {
div (class:"page-header")
{
h1 s
}
}
def alert(s, clos) {
div (class:"alert alert-
$s", role:"alert", clos)
}

Programming HTML:
You can writecontainer {
row {
col_md(2) {
header "サイドバーの表示"
}
col_md(10) {
header "メインの表示"
alert('success') {
strong "Well done!"
yield "You successfully read this important alert
message."
}
alert('info') {
strong "Heads up!"
yield "This alert needs your attention, but it's not
super important."
}
}
}
Simpler
and Tidy way

まとめ
• MarkupTemplateEngineは、 
新世代型付きDSL実装の模範コード。
• 以下を使用して実装
• 型チェッカ拡張(TypeChecking Extension)
• aka (カスタムタイプチェッカ)Custom Type Checker)
• CompilerConﬁguration
• プログラミング言語のフル機能を使ってマークアップ
• 抽象化、型システム、モジュラリテイ、合成、部品化
• HTML+CSSのような言語もどきではなく

参考リンク
• http://groovy.codehaus.org/Groovy%202.3%20release%20notes
• https://jira.codehaus.org/secure/ReleaseNote.jspa?
projectId=10242&version=20369
• http://www.slideshare.net/rstoya05/spring-4-web-app
• http://spring.io/blog/2014/05/28/using-the-innovative-groovy-template-engine-in-
spring-boot

Markup Template Engine introduced Groovy 2.3

More Related Content

What's hot (20)

Similar to Markup Template Engine introduced Groovy 2.3 (20)

More from Uehara Junji (16)

Markup Template Engine introduced Groovy 2.3