전체적인 레이아웃을 만들고 그 내부에 컨텐츠만 바뀌게 하고 싶은 경우가 많을 것이다. 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>
변수영역
인클루드 되는 쪽에서는 인클루드를 하는(부모) 변수에 접근이 가능하다.