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>タグ
部品の前後に改行コードは挿入されません。
各画面部品の詳細は、「第2章 画面部品」を参照してください。
機能部品と機能付加部品は、<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を使用して値を指定してください。