Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > テキストコントロールの使用 > テキストコントロールについて

テキストコントロールについて

テキストを表示し、ユーザーがアプリケーションにテキストを入力できるようにするには、テキストベースの Flex コントロールを使用します。次の表は、コントロールの一覧です。コントロールに単一行のテキストではなく複数行のテキストを入力できるかどうか、およびコントロールがユーザーによる入力を受け入れるかどうかを示しています。

コントロール

複数行

ユーザー入力

Label

いいえ

いいえ

TextInput

いいえ

はい

Text

はい

いいえ

TextArea

はい

はい

RichTextEditor

はい

はい

RichTextEditor コントロール以外のすべてのコントロールは、単純なテキスト領域を持つ単一のコンポーネントです。たとえば、次の図は、簡単なフォームにおける TextInput コントロールを示しています。


FormItem ラベルを表示した TextInput コントロール

次のコードで、上のイメージが作成されます。

<?xml version="1.0"?>
<!-- textcontrols/FormItemLabel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
  <mx:Form id="myForm" width="500" backgroundColor="#909090">
     <!-- Use a FormItem to label the field. -->
     <mx:FormItem label="First Name">
        <mx:TextInput id="ti1" width="150"/>
     </mx:FormItem>
  </mx:Form>
</mx:Application>

RichTextEditor コントロールは複合コントロールであり、TextArea コントロールを含む Panel コントロールと、テキストフォーマットと HTTP リンクを指定するための複数のコントロールを含む ControlBar で構成されます。次の図は、RichTextEditor コントロールを示しています。


デフォルトの外観の RichTextEditor コントロール

次のコードで、上のイメージが作成されます。

<?xml version="1.0"?>
<!-- textcontrols/RTECDATA.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
  <mx:RichTextEditor id="rte1" title="Rich Text Editor">
     <mx:htmlText>
        <![CDATA[
           <p align='center'><b><font size='16'>HTML Text</font></b>
           </p>This paragraph has <font color='#006666'><b>bold teal text.
           </b></font>
        ]]>
     </mx:htmlText>
  </mx:RichTextEditor>
</mx:Application>

Flex のテキストベースコントロールでは、次のプロパティを使用してテキストを設定および取得できます。

text  フォーマット情報を持たないプレーンテキスト。text プロパティ使用の詳細については、text プロパティの使用を参照してください。

htmlText  HTML タグのサブセットを使用したフォーマットを表すリッチテキスト。黒丸付きのテキストと URL リンクを含めることもできます。htmlText プロパティ使用の詳細については、
htmlText プロパティの使用を参照してください。

これらのプロパティは両方とも同一の基になるテキストを設定しますが、フォーマットは異なるものを使用できます。たとえば次のような手順で、テキストの設定、変更、および取得を行うことができます。

Flex 2.01