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

1.3.1 UI部品の記述方法

Ajaxフレームワークで提供するUI部品は、HTMLの<div>タグおよび<span>タグを使って記述します。

記述形式: <div>タグの場合

<div rcf:id="部品ID" rcf:type="部品名" rcf:プロパティ名="値" ... ></div>

記述形式: <span>タグの場合

<span rcf:id="部品ID" rcf:type="部品名" rcf:プロパティ名="値" ... ></span>

属性	説明
rcf:id	部品IDを指定します。(省略可)
rcf:type	部品名を指定します。
rcf:プロパティ名	部品ごとに定義されているプロパティ、スタイルプロパティ、イベントリスナなどを指定します。

例えば、TextInputに、maxLengthプロパティ、colorプロパティ、およびonChangeイベントリスナを指定する場合は、以下のように記述します。

<span rcf:id="id1" rcf:type="TextInput" rcf:maxLength="10" rcf:color="blue"
 rcf:onChange="alert('変更されました')"></span>

画面部品は、<div>タグおよび<span>タグの両方で記述できる部品と、<div>タグでだけ記述できる部品があります。<div>タグ、<span>タグの両方で記述できる部品に関しては、表示上、以下の違いがあります。

• <div>タグ
  部品の前後に改行コードが挿入されます。
• <span>タグ
  部品の前後に改行コードは挿入されません。

各画面部品の詳細は、“画面部品”を参照してください。

機能部品と機能付加部品は、<div>タグおよび<span>タグのどちらで記述しても違いはありません。

UI部品を記述する際には、以下の事柄に注意してください。

• 終了タグの記述
  UI部品を記述する場合、子要素を持たない部品を空要素で記述せずに、必ず終了タグを記述してください。
  空要素で記述した場合、それ以降の部品が表示されない場合があります。
  • 正しい例

    <span rcf:id="id1" rcf:type="TextInput"></span>

    
    
  • 間違った例(空要素記述)

    <span rcf:id="id2" rcf:type="TextInput"/>

• “rcf-”から始まる文字列
  Ajaxフレームワークでは“rcf-”から始まる文字列を特別な意味で利用しています。そのため、以下の値に“rcf-”から始まる文字列は指定しないでください。
  • HTMLのid属性
  • HTMLのstyle属性
  • rcf:id属性

• rcf:id属性およびHTMLのid属性
  rcf:id属性により部品IDを指定する場合、指定する値は以下の条件を満たしている必要があります。
  • 画面で一意であること
    例えば、画面の遅延読込み(画面の一部分だけを別に用意しておき、ユーザが画面操作をしている間に裏で画面情報を読み込むこと)を行う場合、遅延読込みで読み込んだ画面情報を含めて、部品IDは一意である必要があります。
  • 画面のHTMLのid属性の値と重複しないこと
    HTML要素にid属性でIDを指定する場合、その画面で指定する部品IDと重複する値は指定できません。重複する値を指定した場合、動作が不定になります。

• 配列要素の記述
  StringやNumberの配列を値として指定するプロパティの場合、属性値を“;”で区切って配列の要素を指定することができます。
  例1: FocusManagerのtargetsプロパティの場合

  <div rcf:type="FocusManager" rcf:targets="text1; text2; text3; ..."></div>

  例2: SelectListのselectedIndexesプロパティの場合

  <div rcf:type="SelectList" rcf:selectedIndexes="0;2;..." rcf:multiple="true"></div>

  配列の要素が空の場合は、属性値に空文字列("")を指定してください。
  そのほかの型(Object型など)の配列を、属性値として直接指定することはできません。配列を持つモデルへのバインディング式を指定するか、部品の初期化後にAPIを使用して値を指定してください。