基本編

外部コンポーネントを使う

このチュートリアルで出来るアプリケーション : ボタンでアラート表示

Hello World.のページで作成したコードも1つのコンポーネントです。 Benderは小さいコンポーネントを組み合わせて、大きなアプリケーションを作成することが出来ます。

このページでは、別ファイルで作成したコンポーネントを使ってみるということをしたいと思います。今回は、Benderが用意しているボタンコンポーネントを使ってみることにします。

実行方法は、Hello World.の時と同じです。上記のソースコードをwelcome.xmlとして保存し、runtime.htmlを使って実行してみて下さい。ラベルとグレーのボタンが表示されたかと思います。ボタンをクリックしてみると、アラートが表示されるので、試してみて下さい。

Benderはボタン以外にも、いくつかのコントロールをコンポーネントとして用意しています。
※ 将来的には、ライブラリとして、もっと快適に利用出来ることを目指しています。

 <component id="thanks-button" href="../../dom/lib/button.xml">
   <view>
     Thanks
   </view>
 </component>

button.xmlはボタンコンポーネントが定義されているXMLファイルです。 component要素のhrefに外部コンポーネントのファイルを指定することで、ターゲットドキュメントに対して、コンポーネントを組み込みます。

サンプルコードでは、component要素の中に、viewとwatch要素がそれぞれ定義されています。
前回のチュートリアルでも登場したview要素では、表示内容を定義します。HTMLやSVGを使ってドキュメントのレイアウトやコンテンツ内容を記述します。

また、watch要素は、view要素内で定義したインスタンスやオブジェクトの監視を行います。
watch要素は、get要素とset要素の子要素があります。
ここでは、get要素に使用について説明します。 set要素の使い方に関しては、次章以降で説明します。

<get instance="thanks-button" event="@pushed">

サンプルコードでも使用しているget要素は、instanceで指定したインスタンスに対して、eventで指定したイベントが発生した場合に行う処理を定義する事が出来ます。上記の例では、thanks-button（ボタン）で@pushedイベントが発生した場合、アラートを表示する様に指定しています。

次のステップでは、プロパティの利用とバインディングについて説明します。