레이아웃 공유

전체적인 레이아웃을 만들고 그 내부에 컨텐츠만 바뀌게 하고 싶은 경우가 많을 것이다. Mayaa에서 레이아웃공유 기능은 컴포넌트를 주객을 반대로 생각하면 이해하기 편하다. 즉 호출된 자신이 컴포넌트가 되고 레이웃의 내부로 들어가게 하는 것이다.

간단한 예

레이아웃의 정의는 mayaa태그의 m:extends속성을 사용한다.

hello.html
<html> <body> <h1>DummyTitleHello</h1> <div id="content">Hello Mayaa!</div> </body> </html>

hello.mayaa
<?xml version="1.0" encoding="UTF-8"?> <m:mayaa xmlns:m="http://mayaa.seasar.org" extends="/layout.html"> <m:doRender m:id="content" name="contentBody" /> </m:mayaa>

layout.html
<html> <body> <h1>Hello</h1> <div id="contentPosition">Dummy content</div> </body> </html>

layout.mayaa
<?xml version="1.0" encoding="UTF-8"?> <m:mayaa xmlns:m="http://mayaa.seasar.org"> <m:insert m:id="contentPosition" name="contentBody" /> </m:mayaa>

http://localhost:8080/mayaa/hello.html
와 같이 접속해서 확인한다.

실행결과
<html> <body> <h1>Hello</h1> Hello Mayaa! </body> </html>

레이아웃 내에 복수개의 동적부분

복수개의 부분을 레이아웃내에 배치하기는 복수개의 컴포넌트를 사용하기와 비슷한 방법으로 이루어진다.

hello.html

<html> <body> <h1>DummyTitleHello</h1> <div id="content1">Hello Mayaa! 1</div> <div id="content2">Hello Mayaa! 2</div> </body> </html>

hello.mayaa

<?xml version="1.0" encoding="UTF-8"?> <m:mayaa xmlns:m="http://mayaa.seasar.org" extends="/layout.html"> <m:doRender m:id="content1" name="position1" /> <m:doRender m:id="content2" name="position2" /> </m:mayaa>

layout.html

<html> <body> <h1>Hello</h1> <div id="contentPosition1">Dummy content 1</div> <div id="contentPosition2">Dummy content 2</div> </body> </html>

layout.mayaa

<?xml version="1.0" encoding="UTF-8"?> <m:mayaa xmlns:m="http://mayaa.seasar.org"> <m:insert m:id="contentPosition1" name="position1" /> <m:insert m:id="contentPosition2" name="position2" /> </m:mayaa>

실행결과

<html> <body> <h1>Hello</h1> Hello Mayaa! 1 Hello Mayaa! 2 </body> </html>

이아웃에 컴포넌트 사용

hello.html

<html> <body> <h1>DummyTitleHello</h1> <div id="content">Hello Mayaa!</div> </body> </html>

hello.mayaa

<?xml version="1.0" encoding="UTF-8"?> <m:mayaa xmlns:m="http://mayaa.seasar.org" extends="/layout.html"> <m:doRender m:id="content" name="contentBody" /> </m:mayaa>

layout.html

<html> <body> <h1>Hello</h1> <div id="comp">Dummy component</div> <div id="contentPosition">Dummy content</div> </body> </html>

layout.mayaa

<?xml version="1.0" encoding="UTF-8"?> <m:mayaa xmlns:m="http://mayaa.seasar.org"> <m:insert m:id="comp" path="/component.html" /> <m:insert id="contentPosition" name="contentBody" /> </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 m:id="centered" /> </m:mayaa>

실행결과

<html> <body> <h1>Hello</h1> <div style="text-align: center">component value</div> Hello Mayaa! </body> </html>

변수영역

인클루드 되는 쪽에서는 인클루드를 하는(부모) 변수에 접근이 가능하다.


Comments