Documentation

2-5. HTML 部品 (静的)

Mayaa には HTML テンプレートと mayaa ファイルのセットを部品として扱う機能があります。このテンプレート部品のことを「コンポーネント」と呼びます。コンポーネントを作ることで機能の共有・再利用を実現できます。

コンポーネントの作り方は簡単で、基本的には通常の HTML テンプレートを作るのと変わりません。作った HTML テンプレートのうちコンポーネントにしたい部分に id をつけ、doRender プロセッサと結びつけることでコンポーネントとして扱えるようになります。コンポーネントを使う側は insert プロセッサを使ってコンポーネントを指定します。コンポーネントの HTML テンプレートを直接表示させれば、通常の HTML テンプレートとして動作をテストすることもできます。

図 2-6-1: コンポーネントはテンプレートの一部として作成

簡単な例

まずは簡単な例として、静的な表示のコンポーネントを作ってみましょう。

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>

関係するファイルは４つです。ユーザからリクエストされる hello.html およびその mayaa ファイル、それと hello.html から呼び出される component.html およびその mayaa ファイルです。

ブラウザで http://localhost:8080/mayaa/hello.html にアクセスしてみましょう。

実行結果 (改行などは実際の実行結果と異なります)
<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"> のボディが、コンポーネントである component.html の <span id="centered"> によって置き換えられたものになっています。

図 2-6-2: コンポーネント描画イメージ

このとき doRender プロセッサおよび insert プロセッサに割り当てられているタグを出力するかどうかは、それぞれの replace の値に従います。この例では hello.html と component.html の両方とも replace="false" ですので、hello.html のタグの内側に component.html のタグが出力されています。

pathに指定するコンポーネントファイルパスは、コンテキストルートからの相対パスを指定します。先頭"/"はコンテキストルートを表します。

ひとつのテンプレートで複数のコンポーネントを定義する

コンポーネントはひとつのテンプレートで複数定義できます。定義したコンポーネントを区別するには、それぞれのコンポーネントに名前を付け、呼び出すときにその名前を指定します。

名前を付けない場合、空文字列 ("") が名前として使われます。また、同一テンプレート上の複数のコンポーネントに同じ名前を付けることはできません。

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 が component1.html のコンポーネントを利用し、component1.html のコンポーネントが component2.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>

図 2-6-3: 2 段のコンポーネント描画イメージ

↑このページのトップへ

＜ 2-4. 設定の記述方法

2-6. HTML部品 (動的) ＞