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

2.1.1 Text

Textは、テキストを表示する部品です。

• 表示例
• 記述形式
• プロパティ
• スタイルプロパティ
• イベントリスナ
• JavaScript API

■表示例

■記述形式

<div rcf:type="Text" ... ></div>

または

<span rcf:type="Text" ... ></span>

子要素は指定できません。

本部品は、以下のように表示されます。

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

■プロパティ

表の項目の意味

表の項目の意味は、以下のとおりです。

• 省略:省略できるプロパティかどうかを示します。
• 省略値:省略した場合の値を示します。
• 属性指定:属性値として指定できる内容を示します。
  • 値:値を指定可能
  • バインド:バインディング式を記述可能
• 更新:APIまたはモデルバインディングにより、外部から更新可能かどうかを示します。
• 部分更新:プロパティ値の一部を更新することが可能かどうかを示します。更新する場合は、データプロバイダを利用します。

名前	データ型	説明	省略	省略値	属性指定	更新	部分更新
value	String	テキストを指定します。	可	""	値、バインド	可	不可
title	String	ツールチップで表示されるテキストを指定します。	可	""	値	可	不可
labelProvider	getLabel関数を持つオブジェクト	テキストを表示するときに、フォーマットするためのオブジェクトを指定します。詳細は、“フォーマッタの指定方法”を参照してください。 getLabel関数を持たないオブジェクトが指定された場合、エラーになります。 nullを指定した場合は、valueに指定された文字列がそのまま使用されます。	可	null	値	可	不可

部品共通のプロパティも指定できます。詳細は、“画面部品共通プロパティ”を参照してください。

titleプロパティに長い文字列を指定すると、以下のような現象が起こることがあります。

• 
  全角30文字(半角60文字)以上の場合、自動的に改行される場合があります。
  改行は、全角文字または単語の区切りで行われます。
• 
  全角45文字(半角90文字)までが表示され、それ以上の文字は省略されます。

なお、空文字列を指定した場合は、表示されません。

フォーマッタの指定方法

labelProviderプロパティでフォーマッタを指定する例を以下に示します。

【処理概要】

1. テキストをフォーマットするオブジェクトに、getLabel関数を用意します。
   getLabel関数は、引数としてテキストを受け取り、戻り値に表示する文字列を返します。
2. labelProviderプロパティに、getLabel関数を持つオブジェクトを指定します。例では“lp1”を指定しています。
3. “テキスト”という文字列がフォーマットされ、画面には“formatted"テキスト"”と表示されます。
   なお、フォーマットされた文字列は、画面に表示する際に特殊文字の変換が行われます。詳細は、“表示するテキストの変換規則”を参照してください。

   <script type="text/javascript">
   //<![CDATA[
          var lp1 = {
            getLabel: function(value) {
              return 'formatted \"' + value + '\"';
            }
         };
   //]]>
   </script>
   
     ...
   
   <div rcf:id="text1" rcf:type="Text"
         rcf:value="テキスト" rcf:labelProvider="lp1"></div>

   
   

表示するテキストの変換規則

valueプロパティに指定されたテキストは、labelProviderによってフォーマットされたあとに特殊文字の変換(エスケープ処理)を行い、結果をHTMLとして表示します。変換ルールは以下のとおりです。

元文字列	変換後の文字列
&	&
<	&lt;
>	&gt;
"	&quot;
'	&#39;
改行文字 (\r\n および単独の \r, \n)	<br/>
空白(半角空白およびタブ)	&nbsp;

変換例:labelProviderがフォーマットを行った結果、<formatted"テキスト">という文字列を返した場合、内部で以下のように変換されます。

[変換前]
      <formatted"テキスト">
      ↑        ↑      ↑↑
     (1)       (2)     (2)(3)

[変換後]
      <formatted"テキスト">
      ↑             ↑            ↑   ↑
      (1)            (2)           (2)  (3)

適用される変換規則は以下のとおりです。

1. < を &lt; に変換
2. " を &quot; に変換
3. > を &gt; に変換

変換後の文字列をHTMLとしてブラウザで表示します。結果、<formatted"テキスト">と正しく表示されます。

■スタイルプロパティ

パーツ名	プレフィックス	クラス名	使用可能なスタイル
部品全体	なし	rcf-Text	カラー フォント テキスト(textIndent、textAlign、whiteSpaceを除く) ボーダー パディング

詳細は、“スタイルプロパティ”を参照してください。

Internet Explorerでボーダーを指定した場合の注意事項

Internet ExplorerでTextにボーダーを指定した場合、以下のようにボーダーの一部が欠けて表示される場合があります。

この場合、以下のどちらかの方法で回避できます。

• Text部品の下に空行を追加します。

  <div rcf:type="Text" rcf:value="文字列"></div>
  <br/>&nbsp;

  
  
• Text部品を記述した<div>タグまたは<span>タグに、style属性でposition:relativeを指定します。

  <div rcf:type="Text" style="position:relative" rcf:value="文字列"></div>

■イベントリスナ

固有のイベントリスナはありません。部品共通のイベントリスナは、“画面部品共通イベントリスナ”を参照してください。

■JavaScript API

固有のJavaScript APIはありません。部品共通のJavaScript APIは、“画面部品共通JavaScript API”を参照してください。