2.1.1 Text

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

表示例

記述形式

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

または

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

注意

子要素は指定できません。詳細は、「5.1.4 子要素を持たない部品に子要素を記述した場合の動作」を参照してください。

ポイント

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

プロパティ

表の項目の意味

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

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

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

注意

titleプロパティに長い文字列を指定すると、自動的に改行または省略されることがあります。
また、発生位置はブラウザにより異なります。

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

フォーマッタの指定方法

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

【処理概要】

テキストをフォーマットするオブジェクトに、getLabel関数を用意します。
getLabel関数は、引数としてテキストを受け取り、戻り値に表示する文字列を返します。
labelProviderプロパティに、getLabel関数を持つオブジェクトを指定します。例では「lp1」を指定しています。
「テキスト」という文字列がフォーマットされ、画面には<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として表示します。変換ルールは以下のとおりです。

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

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

[変換後]
      &lt;formatted&quot;テキスト&quot;&gt;
      ↑             ↑            ↑    ↑
      (1)           (2)           (2)  (3)

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

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

スタイルプロパティ

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

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

注意

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

Internet Explorer 9 標準、Internet Explorer 10 標準、およびInternet Explorer 11 標準以外の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>
```

イベントリスナ

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

JavaScript API

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