コントロールの操作 -- Flex 2.01

Flex のコントロールは、共通のクラス階層を共有しています。したがって、すべてのコントロールは同様の手順で設定することができます。このセクションでは、次のトピックについて説明します。

サブトピック

コントロールのクラス階層

次の図に示したように、Flex コントロールは flash.display.Sprite クラスと mx.core.UIComponent クラスから派生した ActionScript オブジェクトです。コントロールは、それらのスーパークラスのプロパティ、メソッド、イベント、スタイル、エフェクトを継承します。

Sprite クラスと UIComponent クラスは、すべての Flex コンポーネントの基本クラスです。UIComponent クラスのサブクラスは形状を持つことができ、それ自体を表示することも非表示にすることもできます。各サブクラスはタブ順序の管理に対応し、低レベルのイベント (キーボードやマウスによる入力など) を受け付けます。また、キーボードやマウスによる入力を受け付けないように無効にすることができます。

コントロールが Sprite クラスと UIComponent クラスから継承するインターフェイスの詳細については、Flex ビジュアルコンポーネントの使用を参照してください。

コントロールのサイズ設定

このセクションでは、コントロールのサイズ設定方法について説明します。コンポーネントのサイズの詳細については、コンポーネントのサイズと位置の制御を参照してください。

すべてのコントロールには、Flex アプリケーションにおけるサイズを決定するための規則が定義されています。たとえば、Button コントロールの場合は、ラベルテキストとオプションのアイコンイメージを表示できるようなサイズが基準になります。同様に、Image コントロールの場合は、読み込むイメージの大きさに合わせてサイズが計算されます。各コントロールには、デフォルトの高さと幅があります。各標準コントロールのデフォルトサイズについては、各コントロールの説明を参照してください。

コントロールのデフォルトサイズは、固定値とは限りません。たとえば、Button コントロールの場合は、ラベルテキストとオプションのアイコンイメージを表示できるだけの大きさがデフォルトサイズになります。Flex は、実行時に各コントロールのデフォルトサイズを計算します。デフォルトでは、コントロールのサイズがデフォルトサイズから変更されることはありません。

MXML で height 属性または width 属性を 50% などのパーセントに設定するか、ActionScript で percentHeight プロパティまたは percentWidth プロパティを 50 などのパーセント値に設定すると、コントロールがそれぞれ縦方向または横方向に自動的にサイズ変更されます。つまり、Flex が、親コンテナに対するパーセント値として指定されたサイズでコントロールを収めようと試みます。コントロールに対して割り当てるだけの十分な領域が存在しない場合、指定された比率は維持しながら、残された領域が比例配分されます。

次のようにして、コメントボックスの幅を親コンテナのサイズ変化に合わせて拡大 / 縮小させることも可能です。

<mx:TextInput id="comments" width="100%" height ="20"/>

また、コントロールのサイズを明示的に指定することもできます。この場合は、コントロールの height プロパティと width プロパティをピクセル数値に設定します。次の例は、addr2 TextInput コントロールの高さと幅をそれぞれ 20 ピクセルと 100 ピクセルに設定しています。

<mx:TextInput id="addr2" width="100" height ="20"/>

コントロールのサイズを実行時に変更するには、ActionScript を使用して width プロパティと height プロパティを設定します。たとえば、次の例では、Button コントロールのクリックイベントリスナーで、addr2 TextInput コントロールの width プロパティについて、幅を 10 ピクセル分増やしています。

<mx:Button id="button1" label="Slide" height="20" 
    click="addr2.width+=10;"/>

多くのコンポーネントは最大サイズが任意の大きさに設定されています。つまり、アプリケーションの要件に合わせて、どのような大きさでも適用できるという意味です。ゼロ以外の最小サイズが定義されたコンポーネントも一部存在しますが、ほとんどのコンポーネントでは最小サイズが 0 として定義されています。maxHeight、maxWidth、minHeight、minWidth の各プロパティを使用して、各コンポーネントのサイズ変更範囲を明示的に設定できます。

コントロールの配置

コントロールはコンテナ内に配置します。ほとんどのコンテナには、自動的に子の位置を決定するレイアウト規則があらかじめ定義されています。Canvas コンテナではその子に絶対位置が指定されますが、Application コンテナと Panel コンテナでは、オプションで絶対位置とコンテナに対する相対位置を使用できます。

コントロールの絶対位置を指定するには、x プロパティと y プロパティにコンテナにおける座標をピクセル単位で設定します。この座標は、コンテナの左上隅を (0,0) とする相対位置になります。x と y には、正負の整数を指定できます。たとえば、負数を指定することによってコントロールをコンテナの表示領域外に配置しておき、ActionScript を使用して、イベントに対する応答として子を表示領域に移動するようなことも可能です。

次の例では、Canvas コンテナの左上隅を基準とし、TextInput コントロールを 150 ピクセル右、150 ピクセル下の位置に配置しています。

<mx:TextInput id="addr2" width="100" height ="20" x="150" y="150"/>

絶対位置が指定されたコンテナに配置されたコントロールを実行時に移動するには、コントロールの x プロパティと y プロパティを使用します。たとえば、次の Button コントロールの click イベントリスナーは、TextInput コントロールを現在の位置から 10 ピクセル下に移動しています。

<mx:Button id="button1" label="Slide" height="20" x="0" y="250"
click="addr2.y = addr2.y+10;"/>

コントロールの外観の変更

コントロールの外観は、スタイル、スキン、およびフォントを使用してカスタマイズできます。これらは、コンポーネントに共通して適用させる特性を定義するものです。各コントロールには、設定可能な一連のスタイル、スキン、フォントが定義されています。特定のコントロールタイプに固有のものと、さまざまなコントロールで汎用的に使用されるものとがあります。

Flex では、さまざまな方法でコントロールの外観を設定できます。たとえば、コントロールの MXML タグまたは ActionScript を使用して特定のコントロールに対してのみスタイルを設定できる場合と、<mx:Style> タグを使用してアプリケーションの特定のコントロールのすべてのインスタンスに対してグローバルにスタイルを設定できる場合とがあります。

テーマでは、Flex アプリケーションの外観と雰囲気を定義します。テーマには、アプリケーションのカラースキーマや共通フォントなどの単純なものから、全 Flex コンポーネントの完全な再スキンのような複雑なものまで定義できます。コントロールに対して設定できるスタイルは、そのアプリケーションの現在のテーマによって定義されます。したがって、スタイルのプロパティは必ずしも設定できるとは限りません。詳細については、スタイルとテーマの使用を参照してください。