HTML부품(정적)

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>






Comments