Ajaxフレームワーク UI部品リファレンス

1.3.4 JavaScriptからの操作

UI部品は、JavaScriptからrcf:idで指定した値を変数としたオブジェクトとして操作することができます。JavaScriptのオブジェクトとして操作するには、rcf:idで指定した値を用いる方法と、RCF.getComponent関数を用いる方法があります。

■rcf:idで指定した値を用いる方法

rcf:idには、以下の文字列を指定してください。

• 最初の文字は半角英文字
• 2文字目以降の文字は、半角英文字、半角数字、アンダーバーのどれか

以下のようにUI部品を記述した場合、JavaScriptからは“textInput1”という変数名でTextInput部品のAPIを実行することができます。

<script type="text/javascript">
//<![CDATA[
   function setProperty() {
    // valueプロパティの設定
    textInput1.setProperty("value", "hoge");
    // colorスタイルの設定(スタイルを設定する場合はsetStyleメソッドを使用します。)
    textInput1.setStyle("color", "yellow");
   }
//]]>
</script>

 ...
<span rcf:id="textInput1" rcf:type="TextInput" rcf:maxLength="10"></span>
<div rcf:type="Button" rcf:onClick="setProperty()">実行</div>
 ...

各UI部品で使用できるJavaScript APIについては、各部品の説明を参照してください。

■RCF.getComponent関数を利用する方法

以下に、RCF.getComponent関数を利用した例を示します。

<script type="text/javascript">
//<![CDATA[
   function func1() {                                      // (1)
      for (var i = 0; i < 10; i++) {
         var textInput = RCF.getComponent("textInput"+i); 
         if (textInput.getProperty("value") == '') {
            textInput.setStyle("backgroundColor", "red");
         }
      }
   }
//]]>
</script>
   (省略)
<div rcf:id="textInput0" rcf:type="TextInput"></div>
<div rcf:id="textInput1" rcf:type="TextInput"></div>
   (省略)
<div rcf:id="textInput9" rcf:type="TextInput"></div>

<div rcf:type="Button" rcf:onClick="func1()">実行</div>    // (2)

上記の例では、(2)のボタンがクリックされると、(1)のfunc1()関数が実行されます。
func1()関数では、textInput0〜textInput9に対して、入力値が空であった場合、背景色を赤に変更します。

RCF.getComponent関数を利用すると、ID文字列を指定して、部品のオブジェクトを取得することもできます。
RCF.getComponent関数は、部品のID文字列を動的に生成し、そのオブジェクトを取得する場合に利用できます。