HTML템플릿파일과 mayaa파일의 셋으로 부품화하는 것이 가능하다. 이러한 부품을 컴포넌트라고 한다. 부품화 하고 싶은 부분을 <div>등으로 묶어서 mayaa에서는 doRender라는 프로세서를 붙이는 것 이외에서 이제까지의 처리와 동일하다. 컴포넌트를 사용하는 쪽에서는 insert프로세서를 사용해서 인클루드한다.
간단한 예
hello.html
<html>
<body>
<h1>Hello</h1>
<div id="comp">dummy</div>
</body>
</html>
hello.mayaa
<?xml version="1.0" encoding="UTF-8"?>
<m:mayaa xmlns:m="http://mayaa.seasar.org">
<m:insert id="comp" path="/component.html" replace="false" />
</m:mayaa>
component.html
<html>
<body>
<h1>dummy for preview</h1>
<span id="centered">
<div style="text-align: center">component value</div>
</span>
</body>
</html>
component.mayaa
<?xml version="1.0" encoding="UTF-8"?>
<m:mayaa xmlns:m="http://mayaa.seasar.org">
<m:doRender id="centered" replace="false" />
</m:mayaa>
실행결과
<html>
<body>
<h1>Hello</h1>
<div id="comp"><span id="centered">
<div style="text-align: center">component value</div>
</span></div>
</body>
</html>
hello.html의 <div id="comp">태그의 body가 component.html의 <span id="centered">로 치환됨을 알 수 있다.
복수개의 컴포넌트를 하나의 템플릿에 정의
각각의 컴포넌트에 name를 붙여서 여러가지의 컴포넌트를 하나의 파일에 정의할 수 있다.
hello.html
<html>
<body>
<h1>Hello</h1>
<div id="comp1">dummy</div>
<div id="comp2">dummy</div>
</body>
</html>
hello.mayaa
<?xml version="1.0" encoding="UTF-8"?>
<m:mayaa xmlns:m="http://mayaa.seasar.org">
<m:insert m:id="comp1"
path="/component.html" name="center1" replace="false" />
<m:insert m:id="comp2"
path="/component.html" name="center2" replace="false" />
</m:mayaa>
component.html
<html>
<body>
<h1>dummy for preview</h1>
<span id="centered1">
<div style="text-align: center">component value 1</div>
</span>
<span id="centered2">
<div style="text-align: center">component value 2</div>
</span>
</body>
</html>
component.mayaa
<?xml version="1.0" encoding="UTF-8"?>
<m:mayaa xmlns:m="http://mayaa.seasar.org">
<m:doRender m:id="centered1" name="center1" replace="false" />
<m:doRender m:id="centered2" name="center2" replace="false" />
</m:mayaa>
실행결과
<html>
<body>
<h1>Hello</h1>
<div id="comp1"><span id="centered1">
<div style="text-align: center">component value 1</div>
</span></div>
<div id="comp2"><span id="centered2">
<div style="text-align: center">component value 2</div>
</span></div>
</body>
</html>
컴포넌트에서 다른 컴포넌트 사용
같은 방법으로 컴포넌트 중첩도 가능하다.
hello.html
<html>
<body>
<h1>Hello</h1>
<div id="comp">dummy</div>
</body>
</html>
hello.mayaa
<?xml version="1.0" encoding="UTF-8"?>
<m:mayaa xmlns:m="http://mayaa.seasar.org">
<m:insert m:id="comp" path="/component1.html" replace="false" />
</m:mayaa>
component1.html
<html>
<body>
<h1>dummy for preview</h1>
<span id="centered">
<div style="text-align: center">component value 1</div>
<div id="comp2">dummy</div>
</span>
</body>
</html>
component1.mayaa
<?xml version="1.0" encoding="UTF-8"?>
<m:mayaa xmlns:m="http://mayaa.seasar.org">
<m:doRender m:id="centered" replace="false" />
<m:insert m:id="comp2" path="/component2.html" replace="false" />
</m:mayaa>
component2.html
<html>
<body>
<h1>dummy for preview</h1>
<span id="righted">
<div style="text-align: right">component value 2</div>
</span>
</body>
</html>
component2.mayaa
<?xml version="1.0" encoding="UTF-8"?>
<m:mayaa xmlns:m="http://mayaa.seasar.org">
<m:doRender m:id="righted" replace="false" />
</m:mayaa>
실행결과
<html>
<body>
<h1>Hello</h1>
<div id="comp"><span id="centered">
<div style="text-align: center">component value 1</div>
<div id="comp2"><span id="righted">
<div style="text-align: right">component value 2</div>
</span></div>
</span></div>
</body>
</html>