Flex Tips(5) - テキストを表示する

今回は、Flexのアプリケーションでテキストを表示する方法を紹介します。Flexでテキストを表示する場合は、通常、LabelコントロールかTextコントロールクラスを使用します。Labelコントロールは単数行のテキスト、Textコントロールは複数行のテキストを表示する場合に使用します。また、「htmlText」プロパティを使用すると、HTMLタグを使用して文字を修飾することもできます。以下が今回のサンプルプログラムです。

ソースを見る

LabelコントロールとTextコントロール

サンプル中の「A」と「B」はそれぞれLabelコントロールとTextコントロールを使用して表示しています。Labelコントロールに表示できる文字数以上の長さのテキストを設定した場合は、残りの部分が切り詰められます。切り詰められた状態でLabelコントロール上にマウスポインタを持っていくと、textプロパティに設定されている文字全体がツールヒントに表示されます。

Textコントロールは行に表示するテキストの幅がTextコントロールの幅に指定されている値を超えた場合、自動的に行を折り返します。また、改行文字などを使用して強制的に改行することもできます。

Textコントロールに幅のみを指定した場合、高さは自動的に計算されます。幅と高さを指定した場合は、表示しきれない文字は切り詰められます。以下はここまでのサンプルコードです。

<mx:Label x="10" y="10" width="295" height="25" fontSize="15"
 text="A．Labelを使って表示しているテキストです。テキストの一部が切り詰められています。"/>
<mx:Text x="10" y="43" fontSize="15" width="304">
 <mx:text>
 B．Textを使って表示しているテキストです。Textは複数行のテキストを自動的に改行して、高さを調節してくれます。
 </mx:text>
</mx:Text>

textプロパティは、mx:Label(またはmx:Text)タグの属性に記述する方法(上記Labelのケース)とmx:textというサブタグに記述する方法(上記Textのケース)があります。またActionScript中で以下のようにしてテキストを設定することも可能です。

<mx:Label id="label1" x="10" y="10" width="295" height="25" fontSize="15" />
 <mx:Script>
 <![CDATA[
 import mx.controls.Label;

 //初期化イベントのハンドラ関数
 function onInit():void
 {
 label1.text = "A．Labelを使って表示しているテキストです。テキストの一部が切り詰められています。";
 }
 ]]>
 </mx:Script>

htmlTextプロパティを使って文字を装飾する

LabelコントロールとTextコントロールのhtmlTextプロパティにはHTMLを記述することができます。サンプルの「C」ではFontタグで文字色を変更したり、aタグを使用してリンクを生成したりしています。以下がサンプルコードです。

<mx:Text x="10" y="113" fontSize="15" width="304">
 <mx:htmlText>
 <![CDATA[C．htmlTextプロパティにはhtmlタグの
サブセットである以下のタグを使用することができます。
 <a> <img>
 <li>
<a>で囲った文字をクリックするとそのページへ
移動します。
 <a href="http://www.javadb.jp">ホームへ</a>
]]>
 </mx:htmlText>
</mx:Text>

htmlTextプロパティにはタグを記述するため、XMLのCDATAセクションを使用します。CDATAセクション内では、改行やスペースがそのまま反映されます。htmlTextプロパティ内で使用できるタグは段落のフォーマットに使用するFlex固有の「textformat」というタグと以下のHTMLのサブセットのタグです。
<a> <img><li>

aタグで囲んだ文字列がクリックされると実際にhref属性に指定されたURLにページが遷移します。また、以下のようにtarget属性を指定することで別ウィンドウに表示することも可能です。

htmlTextプロパティ内のaタグがクリックされた場合、linkイベントが発生します。そのイベントを処理することによって、リンククリック時の動作を変更することもできます。その場合、aタグのhref属性を「event:」で始まるように指定します。(event:以降はなんでもいいみたいです。)

<mx:Text x="10" y="113" fontSize="15" width="304" link="onLinkClicked(event)">
 <mx:htmlText>・・・・・・・・・・・・・・・・
 <a href="event:xxxxx">アラートを表示する</a>
・・・・・・・・・・・・・・・・
 </mx:htmlText>
</mx:Text>
<mx:Script>
 <![CDATA[

 import mx.controls.Alert;
 //htmlText内のアンカーがクリックされた場合のハンドラ
 function onLinkClicked(event:TextEvent):void
 {
 Alert.show("リンクがクリックされました","アラート");
 }

 ]]>
</mx:Script>

スタイルを指定する

Flexでは、CSSと同じ文法で、コントロールのスタイルを指定することができる。サンプルの「D」のテキストはスタイルを使用して文字色を青にしています。

<mx:Label styleName="styleSample" x="14.5" y="287" text="D．スタイルを使って文字色を変更しています。" width="295" height="25" fontSize="15"/>

<mx:Style>
.styleSample{ color:blue; }
</mx:Style>

スタイルは上記サンプルのようにコントロールのstyleName属性に指定した値に対して設定する方法と、コントロールのクラス(例 Label { color:blue })に対して設定する方法があります。前者の場合、異なる種類のコントロールに同じスタイルを設定することができます。クラスに対する設定とstyleName属性に対する設定の両方が記述されている場合、styleNameに対する設定が優先されます。

コントロールのクラスにスタイルを適用する場合は、継承関係に注意する必要があります。TextコントロールはLabelコントロールのサブクラスであるため、Labelコントロールに対してスタイルを設定すると、Textコントロールに対しても同じスタイルが適用されます。

(2008年1月12日)

ちょっと一休み. Javaキーワード並び替えゲーム