Under Development

基本編

Copyright © 2011-2013, IGEL Co., Ltd.

プロパティのバインディング

このチュートリアルで出来るアプリケーション : ボタンクリックによりカウントアップ

ソースコードを以下に記述します。

コンポーネントのプロパティ

Benderのコンポーネントは状態を管理するプロパティを持つことができます。 BenderのプロパティはJavascriptオブジェクトのプロパティと同様ですが、 さらにwatch要素によって観測できるというメリットがあり、プロパティの値の変更をトリガとして様々な変更を行うことも可能になります。

今回の例では、メイン コンポーネントでカウントを保持するcountを持ち、2つのボタンでカウントアップとカウントダウンが可能です。 また、カウントは別のプロパティromanを使うことによりローマ数字で表示されます。

プロパティは以下のようにcomponent要素にproperty子要素を追加することで定義されます。

<property name="count" as="number" value="0"/>

このpropety要素のname属性は必須でプロパティの名称を定義します。 また、value属性はプロパティの値を定義します。 この例ではカウントは0から始まります。 XMLの属性は常に文字列なので、as属性で値をどのように扱うかの情報を付与します。 ここでは、カウントはテキスト文字列ではなくJavascriptのnumberとして扱われます。 asに設定される他の値はstring、boolean （trueかfalseとなるJavascriptのboolean値）、json （JSON表記を使ったJavascriptのboolean値）、dynamic（Javascriptの式）です。 dynamicがデフォルト値になります。

カウントアップとダウン

それぞれbutton-plusとbutton-minusの2つのボタンでカウントのアップとダウンを行います。 外部コンポーネントと同様にwatchを使用してボタンからpushedイベントを取得し、その結果に応じてcountプロパティの値を修正します。

<watch>
  <get component="button-plus" event="!pushed"/>
  <set property="count" value="this.properties.count +1"/>
</watch>

このset要素は、value（プロパティ値と同様）を指定されたターゲットに設定します。 今回のサンプルでは、countプロパティにvalueの値が設定されます。 valueのthisは現状のコンポーネントを参照するJavascriptの式です。 this.propertiesはコンポーネントのプロパティのディクショナリなので、this.properties.countはコンポーネントのプロパティのcountプロパティを参照します。

カウントのローマ数字への変換

2つめのプロパティであるromanは以下のように定義されています。

<property name="roman" value="flexo.to_roman('count).toUpperCase()"/>

本プロパティのvalueはJavascriptの式として、1つ違いがあることに注意して下さい。 文字`がコンポーネントの他のプロパティを参照する為に使用されています。 これには2つの効果が含まれます。

  1. this.properties.countの簡易な記述方法
  2. countの値が変更（例えばボタンの1つが押された場合）される度に romanの値が更新されることを確認するwatchを生成

これがプロパティ　バインディングと呼ばれ、ここではromanプロパティがcountプロパティにバインドされています。

本プロパティの定義の最終結果として、countに新しい数値が設定される度にromanはFlexoのto_roman()ライブラリ関数を使ってローマ数字に設定され、大文字に変換されて表示されることになります。

カウント値の表示

コンポーネントのview内にromanプロパティの値を表示します。 Benderではview内でテキスト要素を生成し、romanプロパティが変更された場合にテキスト要素が新しい値で更新されるようにwatchを設定することで実現可能です。 テキストバインディングを使うことで、以下のようにさらに簡単になります。

<view xmlns:html="http://www.w3.org/1999/xhtml">
  <html:p>
    Number of clicks: `roman
  </html:p>
</view>

繰り返しになりますが、romanに`文字が付いていることに注意して下さい。

他のコンポーネントからのバインディング

今回のサンプルアプリケーションでは正の値のみを表示します。 カウントが0の場合、それ以上はマイナスすることができない為、マイナスボタンは無効にする必要があります。 Benderで標準のボタンはboolean値のenabledプロパティを持っています。 ボタンを無効にするには本プロパティをfalseに設定し、有効にするにはtrueに設定します。

カウントが0以下になることを防ぐ為に、マイナスボタンのenabledプロパティがメインコンポーネントのcountプロパティにバインドされています。

<component href="../lib/button.xml" id="button-minus" class="red">
  <property name="enabled" value="#sample`count &gt; 0"/>
  <view>
    -1
  </view>
</component>

マイナスボタンのenabledプロパティはさらに複雑なバインディングで、自身のプロパティのバインディングではなく、他のコンポーネントのバインディングになっています。 （ここではidがsampleのメインコンポーネント） 異なるコンポーネントのプロパティが参照する場合は、#記号が付いたコンポーネント idの後に、プロパティ名（バッククォートを含む）を組み合わせた形で参照します。