6章コンポーネント

3. コンポーネントとセレクタ

もうひとつ、簡単なコンポーネントの使用例をみてみましょう。このコンポーネントは、画像とテキストを入力して簡単にレイアウトしたコンテンツを生成するものです。コンポーネントの名称は「画像付テキスト」としておきます。

そして、このコンポーネントを、先に作成した「箇条書」コンポーネントと、セレクタを使って組み合わせたテンプレート例をご紹介します。

このコンポーネントの要素定義は下図のとおりです。

全部で４つの要素が定義されています。

picture

イメージ型の要素です。

layout

画像の表示位置を指定するためのラジオボタン型の要素。選択肢は Left と Right としてあります。

altText

画像につける alt 属性を指定するための１行テキスト型の要素です。

text

文章を入力するための複数行テキスト型の要素です。繰り返しありの指定があります。

このコンポーネントにも generateText() という名称のメソッドが定義されています。

展開部分を切り出してみます。下記のとおりです。layout の指定によって画像の位置を調整しています。また、text は p タグで囲んで表示しています。最後に float を解除するための div タグが書かれています。

メソッド generateText() のコード

<wr-if condition="isNotNull(picture)">
  <wr-if condition="layout == \"Left\"">
    <wr-then>
      <img src="%picture%" alt="%altText%
           style="float: left; margin-right: 20px; margin-bottom: 12px;" />
    </wr-then>
    <wr-else>
      <img src="%picture%" alt="%altText%"
           style="float: right; margin-left: 12px; margin-bottom: 12px;" />
    </wr-else>
  </wr-if>
</wr-if>
<wr-for list="text" variable="x">
  <p>%x%</p>
</wr-for>
<div style="clear:both;"></div>

これでコンポーネント側の準備は完了です。

次に、このコンポーネントと、先に説明した「箇条書」コンポーネントを組み合わせて使用するテンプレートの例を作成してみましょう。

新たにテンプレートを作成します。テンプレートの名称は「汎用ページ」としておきます。テンプレートの要素定義は下記のとおりです。

part

ページを構成するコンテンツを選択的に入力するためにセレクタ型の要素を定義してあります。セレクタの子要素は「画像付テキスト」と「箇条書」です。子要素はいずれもコンポーネントです。

画像付テキスト

要素のタイプはコンポーネントです。先ほど作成したコンポーネント「画像付テキスト」を指定してあります。（要素の名前とコンポーネントの名前が同じになっていますが、同じである必要はありません。好きな要素名を使って構いません）

箇条書

要素のタイプはコンポーネントです。以前に作成したコンポーネント「箇条書」を指定してあります。（要素の名前とコンポーネントの名前が同じになっていますが、同じである必要はありません。好きな要素名を使って構いません）

関連項目

Selector オブジェクト

これでテンプレートは完成です。

このテンプレートを使ってページを作成してみます。ページ編集画面は下図のようになるでしょう。

まず、画像とテキストを入力してみます。セレクタで「画像付テキスト」選び、画像とテキストを入力してから「保存」ボタンまたは CTRL-S (CMD-S) で入力結果を保存します。

テンプレート「汎用ページ」でページを作成するときのページ編集画面（画像付テキストを入力）

次は、箇条書き部分を作成してみましょう。「画像付テキスト」という要素名の左側にあるメニューボタンメニューを表示にマウスをあわせるとメニューが表示されますので、そこで「入力欄を追加」「箇条書」を選んで「箇条書」型の要素を追加作成します。

項目も追加して三つ入力してみます。入力が終わったら「保存」します。

テンプレート「汎用ページ」でページを作成するときのページ編集画面（箇条書の部分を追加）

もう一度「画像付テキスト」を入力してみます。「箇条書」という要素名の左側にあるメニューボタンメニューを表示にマウスをあわせるとメニューが表示されますので、そこで「入力欄を追加」「画像付テキスト」を選んで「画像付テキスト」型の要素を追加作成します。

作成された入力欄に画像とテキストを入力します。今度は画像を右側に配置してみます。最後に「保存」します。

テンプレート「汎用ページ」でページを作成するときのページ編集画面（さらに画像付テキストを追加）

作成されたページを Preview するとこの図のような画面になるでしょう。

この例では part の下に置いたコンポーネントはふたつだけでしたが、さまざまなバリエーションをもつコンポーネントを置くことができます。コンポーネントとセレクタを組み合わせて使用することで、簡単なテンプレートでバリエーションのあるコンテンツを作成できる環境が作れます。

実用的なデザインに持ち込むためにはスタイルシートとの連携などが必要になりますが、基本的なコンポーネントのセットを準備しておけば、手早く目的の構造に対応するテンプレートが作成できるようになります。

前

次