Flex Builder では、MXML エディタおよび CSS エディタでコンポーネントを視覚的に操作できるので、構築中にどのようなアプリケーションかを確認できます。MXML エディタおよび CSS エディタには 2 つのモードがあります。1 つはコード記述用のソースモードで、もう 1 つはアプリケーションを視覚的に開発するためのデザインモードです。

デザインモードでの MXML エディタの使用

デザインモードでは、デザインエリアのサイズを設定できます。この設定により、アプリケーションやコンポーネントのレイアウトがさまざまなサイズでどのように表示されるかをプレビューできます。デザインエリアでは、アイテムの選択、パン、移動、サイズ変更、スクロール、および拡大も可能です。

MXML ファイルの表示

1. MXML エディタで MXML ファイルがまだ開かれていない場合、Flex ナビゲータビューでファイルをダブルクリックして開きます。
2. MXML エディタにソースコードが表示されている場合は、エディタ領域の上部にある「デザイン」をクリックします。

   モードをすばやく切り替えるには、Control + ` キー（左引用符）を押します。

   ソースモードとデザインモードを切り替えると、コンポーネントビュー、プロパティビュー、ステートビューなどのデザイン関連ビューが自動的に表示または非表示になります。この動作をオンまたはオフにするには、ウィンドウ／設定を選択して、Flex／エディタ／デザインモードを選択します。次に、「デザイン関連のビューを自動表示する」オプションを選択します。

デザインエリアのサイズの設定

1. エディタのツールバーのデザインエリアポップアップメニューからサイズを選択します。

   

   • レイアウトのサイズがエディタウィンドウより大きい場合、エディタにレイアウトを設定されたサイズで保持するスクロールバーが表示されます。
   • 「ウィンドウに合わせる」を選択した場合、エディタにスクロールバーは表示されません。代わりに、可能であれば、ウィンドウのサイズに合わせてレイアウトが調整されます。
   • Application コンテナのサイズを指定すると、そのサイズによって該当するサイズの「カスタムサイズ」設定がオーバーライドされます。

デザインエリア内でのコンポーネントの選択と移動

 エディタツールバーの右側にある選択モード（矢印）ボタンをクリックします。ドキュメントを開いたときには、デフォルトで選択モードがアクティブになっています。キーボードの V キーを押すと選択モードに入ります。コンポーネントをクリックして、任意の場所にドラッグします。ドラッグしてサイズを変更し、クリックして選択することもできます。

デザインエリアでのパンおよびスクロール

 エディタツールバーの右側にあるパンモードボタンをクリックします。キーボードで H を押すとパンモードに入ります。一時的にパンモードに入るには、キーボードのスペースバーを押し続けます。パンモードではアイテムの選択または移動はできません。

デザインエリアでのズーム

ズームツールはいくつかの方法で使用できます。メインメニューおよびポップアップメニューから倍率を選択する、ツールバー上のズームモードボタンをクリックする、またはキーボードショートカットを選択して、ズームを行えます。現在の倍率は常にツールバー上に表示されます。

• メインメニューからデザイン／拡大またはデザイン／縮小を選択します。倍率サブメニューを選択して、倍率を選択することもできます。
• ツールバー上のズームモードボタンをクリックするか、キーボードで Z キーを押します。デザインエリア内にプラス記号のカーソルが表示されます。
• エディタツールバー上の選択、パンおよびズームの各モードボタンの隣にあるポップアップメニューから倍率を選択します。デザインエリアは、選択された倍率に、またはウィンドウのサイズに変わります。
• デザインエリアで右クリックして、拡大、縮小、または倍率サブメニューを選択できます。デザインエリアは選択した倍率に変更されます。

デザインエリアでは、以下のキーボードショートカットをいつでも使用できます。

• 拡大：Ctrl + = キー（Mac OS では Command + = キー）
• 縮小：Ctrl + - キー（Mac OS では Command + - キー）

その他のキーボードショートカットについては、ヘルプ／キー・アシストを選択してください。

MXML ファイルでの複数のコンポーネントの選択

MXML ファイルでは、複数のコンポーネントを選択できます。これは、共有プロパティに共通の値を設定する場合に便利です。

• レイアウト内の各コンポーネントを Ctrl キー（Macintosh では Command キー）を押しながらクリックします。
• ページの背景をクリックして、コンポーネントと重なるボックスを描画します。
• アウトラインビュー（ウィンドウ／アウトライン）で、ツリーコントロールのコンポーネントを Ctrl キー（Macintosh では Command キー）を押しながらクリックします。

複数のコンポーネントの選択解除

• 背景のコンテナをクリックします。
• 選択されていないコンポーネントをクリックします。
• ルートコンポーネントの周囲の灰色の余白をクリックします。

コンポーネントの配置

コンポーネントの位置は、親コンテナのレイアウト規則に応じて視覚的に変更できます。親コンテナのプロパティは、子コンポーネントの位置にも影響を与えることがあります。制約ベースのレイアウトを使用すると、コンポーネントを動的に配置することもできます。詳細については、コンポーネントのレイアウト制約の設定を参照してください。

1. MXML エディタのデザインモードで、レイアウト内のコンポーネントを選択して、新しい位置にドラッグします。

   コンポーネントは、親コンテナのレイアウト規則に従ってレイアウトに配置されます。例えば、VBox コンテナを HBox コンテナ内に移動すると、VBox コンテナは、他の子コンテナ（存在する場合）と水平方向に並べて配置されます。

   コンテナに絶対配置が設定されている場合は、コンポーネントをコンテナ内の任意の位置にドラッグして配置できます。コンテナが Canvas コンテナであるか、layout プロパティが absolute に設定されている Application、Panel または TitleWindow コンテナである場合、コンテナには絶対配置が設定されています。layout="absolute" プロパティを指定すると、コンテナのデフォルトのレイアウト規則がオーバーライドされます。詳細については、『Adobe Flex 3 開発ガイド』のレイアウトコンテナの使用を参照してください。

2. デザインモードで、コンポーネントの親コンテナを選択し、Flex プロパティビューでコンポーネントのレイアウトプロパティを編集します。

   場合によっては、親コンテナのプロパティを変更して、子コンポーネントの位置を変更することもできます。例えば、Tile コンテナの verticalGap プロパティと horizontalGap プロパティを使用して子コンポーネント同士の間隔を設定したり、direction プロパティで行または列のレイアウトを指定することができます。

コンポーネントのサイズ指定

制約ベースのレイアウトのデザインエリアで、MXML ファイル内のコンポーネントの動的なサイズ指定が視覚的に行えます。デザインで、コンポーネントの 1 つまたは複数の側面を、コンポーネントのコンテナまたはコンテナの制約領域の端に固定できます。MXML ファイル内のコンポーネントのサイズは、メニューオプションを選択するか、Flex プロパティビューでそのプロパティを編集して、変更することもできます。詳細については、制約ベースのレイアウトについてを参照してください。

コンポーネントサイズの視覚的な設定

 MXML エディタのデザインモードで、コンポーネントをクリックしてサイズ変更ハンドルをドラッグし、コンポーネントのサイズを変更します。

• コンポーネントの比率を制約するには、Shift キーを押したままドラッグします。
• 吸着が有効な場合、サイズを変更するにつれて、コンポーネントの端を近くのコンポーネントに整列させる吸着ラインが表示されます。メインメニューから吸着を有効または無効にするには、デザイン／吸着を有効にするを選択します。

複数のコンポーネントの幅または高さを同じにする

1. デザインモードで、複数のコンポーネントを選択します。
2. デザインメニューで、次のいずれかのサイズ指定オプションを選択します。

   幅を合わせる 選択したすべてのコンポーネントの width プロパティを、最初に選択したコンポーネントの幅に設定します。

   高さを合わせる 選択したすべてのコンポーネントの height プロパティを、最初に選択したコンポーネントの高さに設定します。

   選択したすべてのコンポーネントが同じコンテナにあり、最初に選択したコンポーネントにパーセント値による幅または高さが指定されている場合、すべてのアイテムがそのパーセント値による幅または高さに設定されます。それ以外の場合、すべてのコンポーネントは、同じピクセル値による幅または高さに設定されます。

プロパティの編集によるコンポーネントのサイズ指定

1. デザインモードでコンポーネントを選択します。

   複数のコンポーネントを Ctrl キーを押しながらクリック（Mac OS では Shift キーを押しながらクリック）すると、それらのサイズを同時に設定できます。

2. Flex プロパティビュー（ウィンドウ／Flex プロパティ）で、選択したコンポーネントの height プロパティまたは width プロパティを設定します。

   Flex プロパティビューには、コンポーネントのプロパティを調べるための 3 つのビューがあります。標準のフォームビュー、カテゴリ別テーブルビューおよびアルファベット順テーブルビューです。ビューを切り替えるには、ツールバーのビューボタンをクリックします。

1. Tab キーまたは Enter キーを押すか、ビューの外側をクリックして、最後の変更を適用します。

吸着によるコンポーネントの配置

コンポーネントを絶対配置が設定されているコンテナ内に視覚的にドラッグすると、既存のコンポーネントとの関連でドロップした位置に応じた場所に、コンポーネントが吸着されます。コンポーネントは、垂直方向または水平方向に整列させることができます。

吸着は、1 つのコンポーネントまたはすべてのコンポーネントに対して無効にできます。

吸着の有効化と無効化

 MXML エディタのデザインモードで MXML ファイルを開いたまま、デザイン／吸着を有効にする選択（または選択解除）をします。

環境設定での吸着の有効化または無効化

1. メインメニューからウィンドウ／設定を選択します。
2. 設定ダイアログボックスのサイドバーで Flex ／エディタ／デザインモードを選択します。

   

3. 「吸着を有効にする」オプションを選択または選択解除します。

コンポーネントの整列

絶対配置が設定されているコンテナでは、コンポーネントを相互の関連で視覚的に整列させることができます。

制約ベースのレイアウトを使用すると、コンポーネントをコンテナの中央に配置できます。詳細については、コンポーネントのレイアウト制約の設定を参照してください。

絶対配置が設定されているコンテナ内でのコンポーネントの整列

1. MXML エディタのデザインモードで、コンテナ内の複数のコンポーネントを選択します。

   詳細については、MXML ファイルでの複数のコンポーネントの選択を参照してください。

2. デザインメニューで、次のいずれかの整列オプションを選択します。

   左揃え 選択したすべてのコンポーネントの左端が、最初に選択したコンポーネントの左端と整列するように配置されます。

   中央揃え（垂直方向） 選択したすべてのコンポーネントの垂直方向の中心線が、最初に選択したコンポーネントの垂直方向の中心線と整列するように配置されます。

   右揃え 選択したすべてのコンポーネントの右端が最初に選択したコンポーネントの右端と整列するように配置されます。

   上揃え 選択したすべてのコンポーネントの上端が、最初に選択したコンポーネントの上端と整列するように配置されます。

   中央揃え（水平方向） 選択したすべてのコンポーネントの水平方向の中心線が、最初に選択したコンポーネントの水平方向の中心線と整列するように配置されます。

   下揃え 選択したすべてのコンポーネントの下端が、最初に選択したコンポーネントの下端と整列するように配置されます。

   ベースラインを揃える 選択したすべてのコンポーネントの水平方向のテキストベースラインが、最初に選択したコンポーネントの水平方向のテキストベースラインと整列するように配置されます。テキストベースラインがないコンポーネント（HBox など）の場合、下端がベースラインと見なされます。

   レイアウト制約がないオブジェクトの場合、Flex Builder では、x プロパティを調整して垂直方向の整列方法を変更し、y プロパティを調整して水平方向の整列方法を変更します。

   レイアウト制約があるオブジェクトの場合、Flex Builder では、左揃えと右揃えの制約を調整して垂直方向の整列方法を変更し、上揃えと下揃えの制約を調整して水平方向の整列方法を変更します。既存の制約のみ変更され、新規の制約は追加されません。

   例えば、コンポーネント A には、左揃えの制約があって右揃えの制約がなく、コンポーネント B には左揃えと右揃えの両方の制約があるとします。この場合、コンポーネント A とコンポーネント B を選択してデザイン／中央揃え（垂直方向）を選択すると、オブジェクト A の左揃えの制約と、オブジェクト B の左揃えと右揃えの両方の制約が調整されて整列されます。オブジェクト A で指定されていない右揃えの制約は、未指定のままです。

コンポーネントのナッジング

矢印キーを使用して任意の方向に一度に 1 ピクセルずつ、または 10 ピクセルずつコンポーネントを調整して、絶対配置が設定されているコンテナ内のコンポーネントの位置を微調整できます。

コンポーネントの 1 ピクセル単位でのナッジング

 MXML エディタのデザインモードで 1 つ以上のコンポーネントを選択して、矢印キーを押します。

コンポーネントの 10 ピクセル単位でのナッジング

 MXML エディタのデザインモードで 1 つ以上のコンポーネントを選択して、Shift キーを押したまま矢印キーを押します。

矢印キーを押したままにすると、コンポーネントが移動し続けます。

コンポーネントプロパティの設定

デザインエリアまたは Flex プロパティビューで、コンポーネントのプロパティを視覚的に設定します。

コンポーネントによって表示されるテキストの編集

 Label コントロールや TextInput コントロールなどのコンポーネントによって表示されるテキストを編集するには、コンポーネントをダブルクリックして編集します。

ID フィールドのテキストの変更

ID フィールドのテキストを変更する場合、新しい ID を使用してすべての参照を更新するように要求されます。このダイアログボックスは、デザインモード環境設定ページで非表示に設定できます。

1. メインメニューから、ウィンドウ／設定を選択します。
2. Flex／エディタ／デザインモードを選択します。
3. 「Flex プロパティビューで ID を変更するときは、常に参照を更新する」を選択または選択解除します。

コンポーネントの他のプロパティの設定

 コンポーネントを選択して、Flex プロパティビュー（ウィンドウ／Flex プロパティ）でそのプロパティを設定します。

カテゴリビューまたはアルファベット順ビューでプロパティを設定するには、ツールバーのビューボタンをクリックします。

周囲のコンテナの表示

MXML エディタのデザインモードで周囲のコンテナを表示すると、レイアウト内のコンテナをより見やすく視覚化し、複雑なレイアウトでコンテナをより簡単に挿入または選択できます。

1. レイアウト内のコンテナを選択します。

   コンテナの選択が難しい場合は、コンテナ内のコントロールを選択します。

2. F4 キーを押します。

   コントロールを選択した場合は、ここで親コンテナを選択します。簡単に見つかるはずです。

   選択したコンテナの周囲のすべてのコンテナを示す半透明のオーバーレイが表示され、外側に少し拡張されるため、さらにコンポーネントを挿入できる空き領域ができます。すべての子コンテナを示すオーバーレイも表示されます。

   次の例で Panel コンテナを選択して F4 キーを押すと、パネルの親コンテナ（Canvas）と子コンテナ（HBox）のオーバーレイが表示されます。

   

   別のコンテナを選択すると、オーバーレイが変わります。

コンテナの親と直下の子の表示

 周囲のコンテナをオンにして、コンテナをクリックします。

コンテナの別のコンテナへの移動

 コンテナのオーバーレイを別のコンテナ上にドラッグして、ターゲットコンテナがハイライト表示されるのを待ってから、コンテナをドロップします。

周囲のコンテナの非表示設定

 再度 F4 キーを押します。

MXML の構造の確認

デザインモードでアウトラインビュー（ウィンドウ／アウトライン）を使用すると、デザインの構造を調べて、コンポーネントを選択できます。複数のビューステートがある場合、アウトラインビューには現在のビューステートの構造が表示されます。

 デザインモードで MXML ファイルを開いたまま、アウトラインビューを選択します。

 アウトラインビューで、1 つのコンポーネントをクリックして選択するか、複数のコンポーネントを Ctrl キー（Macintosh では Command キー）を押しながらクリックします。