Flex Builder を使用すると、Flex コンポーネントをはじめ、別の MXML ファイルと ActionScript ファイルに定義されているカスタムコンポーネントの追加、サイズ指定、配置、編集または削除を行うことができます。

MXML デザインモードでのコンポーネントの追加

MXML デザインモードを使用して、標準の Flex コンテナおよびコントロールをユーザーインターフェイスに追加できます。コンポーネントビューからコンポーネントをドラッグして、MXML ファイルのデザインエリアにドロップし、コンテナのレイアウト規則に従って配置できます。別の MXML ファイルと ActionScript ファイルに定義し、現在のプロジェクトまたは現在のプロジェクトのソースパスに保存したカスタムコンポーネントを追加することもできます。

1. MXML エディタのデザインモードで、コンポーネントを挿入する MXML ファイルを開きます。

   コンポーネントビューを使用するには、MXML ファイルをデザインモードで開く必要があります。MXML ファイルとしては、メインアプリケーションファイル（Application コンテナ付きのファイル）またはカスタム MXML コンポーネントファイルを指定できます。

2. コンポーネントビューで、追加するコンポーネントを見つけます。

   コンポーネントビューが開いていない場合、ウィンドウ／コンポーネントを選択します。

   

   コンポーネントは、ビューのカテゴリで整理されます。

   「カスタム」カテゴリには、別の MXML ファイルと ActionScript ファイルに定義し、現在のプロジェクトまたは現在のプロジェクトのソースパスに保存したカスタムコンポーネントのすべての一覧が表示されます。例えば、EmployeeView.mxml という名前のコンポーネントファイルを作成して、プロジェクトに保存した場合、「カスタム」カテゴリに EmployeeView コンポーネントが表示されます。詳細については、カスタム MXML コンポーネントの作成を参照してください。

   注意: コンポーネントビューには、可視なカスタムコンポーネント（UIComponent クラスから継承したコンポーネント）の一覧のみ表示されます。詳細については、ヘルプのAdobe Flex リファレンスガイドを参照してください。

3. コンポーネントをコンポーネントビューから MXML ファイルにドラッグします。

   コンポーネントは、親コンテナのレイアウト規則に従ってレイアウトに配置されます。

   Application、Panel または TitleWindow の各コンテナのデフォルトのレイアウト規則をオーバーライドするには、layout="absolute" プロパティを指定します。その後、コンポーネントをドラッグしてコンテナの任意の場所に配置できます。Flex Builder でアプリケーションファイルや Panel または TitleWindow のコンポーネントファイルを作成する場合、layout="absolute" プロパティはデフォルトで指定されています。

複雑なレイアウトでのコンポーネントの追加

1. コンポーネントをレイアウト内の挿入するデザインエリア上にドラッグして、Ctrl キーを押します。
2. コンポーネントをハイライト表示されたコンテナにドロップするか、別の領域上に移動して Ctrl キーを押し、ターゲットコンテナを表示します。

コードの記述によるコンポーネントの追加

コードヒント機能を使用すると、標準の Flex コンテナとコントロールをユーザーインターフェイスに追加できます。Eclipse と同様に、Flex Builder では、コードヒントはコンテンツアシストと呼ばれます。

1. MXML エディタのソースモードで MXML ファイルを開きます。

   MXML ファイルとしては、メインアプリケーションファイル（Application コンテナ付きのファイル）またはカスタム MXML コンポーネントファイルを指定できます。

2. 挿入ポイントを親コンテナのタグに配置します。

   例えば、VBox コンテナを HBox 親コンテナ内に挿入するには、挿入ポイントを開始タグ <mx:HBox> の後に配置します。

   <mx:HBox>
       insertion point here
   </mx:HBox>
   
   

3. コンポーネントタグを入力します。

   タグを入力するにつれ、可能なエントリを示すポップアップメニューが表示されます。

4. 必要に応じて、矢印キーを使用してメニューからタグを選択し、Enter キーを押します。

   

   ポップアップメニューには、標準の Flex コンポーネントに加えて、別の MXML ファイルと ActionScript ファイルで定義し、現在のプロジェクトまたは現在のプロジェクトのソースパスに保存したカスタムコンポーネントの一覧が表示されます。詳細については、カスタム MXML コンポーネントの作成を参照してください。

Flash コンポーネント（SWC ファイル）の追加

Flash コンポーネント（SWC ファイル）のユーザーインターフェイスへの追加は、視覚的に行うか、コードの記述によって行うことができます。

1. Flash コンポーネントが現在のプロジェクトのライブラリパスに保存されることを確認します。

   ライブラリパスは、コンパイル時にアプリケーションがリンクする SWC ファイルの場所を指定します。パスは、プロジェクトの Flex コンパイラ設定に定義されています。新規プロジェクトでは、libs フォルダはデフォルトでライブラリパス上にあります。

   ライブラリパスを設定または調べるには、Flex ナビゲータビューでプロジェクトを選択し、プロジェクト／プロパティを選択します。プロパティダイアログボックスで、「Flex ビルドパス」カテゴリを選択し、「ライブラリパス」タブをクリックします。詳細については、プロジェクトの手動による構築を参照してください。

   ライブラリパスは、Adobe LiveCycle Data Services ES の flex-config.xml 設定ファイルでも定義できます。

2. MXML ファイルを開き、次のいずれかの方法で Flash コンポーネントを追加します。
   • MXML エディタのデザインモードで、コンポーネントビューの「カスタム」カテゴリを展開し、Flash コンポーネントを MXML ファイルまでドラッグします。既に開いているドキュメントの場合、挿入後に更新ボタン（緑色の旋回型矢印アイコン）をクリックして、コンポーネントを表示します。
   • ソースモードで、コンポーネントタグを入力し、コンテンツアシストを使用してタグを完成させます。