デザインモードでの Flex 開発パースペクティブ

MXML エディタのデザインモードでは、Flex アプリケーションを視覚的にレイアウトしデザインできます。デザインモードとは、ソースモードで編集するコードを視覚的に表現するものです。ただし、デザインモードでは、デザインタスクをサポートするビューが追加されています。それは、コンポーネントビュー、Flex プロパティビュー、およびステートビューです。さらに、デザインモードでは、アウトラインビューに、Flex アプリケーションの MXML 構造が表示されます。

Flex Builder で Flex アプリケーションを設計する方法の詳細については、Flex ユーザーインターフェイスの作成を参照してください。

メモ

 

デザインモードは、ActionScript プロジェクトを操作しているときには使用できません。ActionScript アプリケーションのユーザーインターフェイスをプレビューするには、これらのアプリケーションを構築して実行する必要があります。ActionScript の操作方法の詳細については、ActionScript プロジェクトについておよびアプリケーションの実行とデバッグを参照してください。


デザインビュー

デザインモードでは、開発パースペクティブに次のビューがあります。

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

デザインモードでは、Flex アプリケーションと視覚的にやり取りできます。たとえば、コンポーネントをデザインサーフェスにドラッグ & ドロップしたり、コンポーネントを選択してそのサイズを変更したりできます。デザインモードでは、MXML エディタを拡張して、個々のコンポーネントを明瞭に表示して選択することもできます。これは、コンテナコンポーネントを埋め込んだ場合に特に便利です。デザインモードでの操作方法の詳細については、Flex ユーザーインターフェイスの作成を参照してください。

コンポーネントビュー

コンポーネントビューには、標準の Flex コンポーネントがすべて含まれていて、これらのコンポーネントを選択してデザインサーフェスに追加できます。自分でカスタムコンポーネントを作成すると、それらのコンポーネントもコンポーネントビューに表示されます。


コンポーネントビュー

詳細については、コンポーネントの追加を参照してください。

ステートビュー

Flex では、ユーザーによって直接トリガされるイベント、またはプログラムで生成されるイベントに基づいて外観を変えるアプリケーションを作成できます。これらのユーザーインターフェイスの変換は "ビューステート" と呼ばれます。ビューステートは、ステートビューで作成および管理します。


ステートビュー

ビューステートの詳細については、ビューステートとトランジションの追加を参照してください。

Flex プロパティビュー

Flex コンポーネントを選択すると、そのプロパティが Flex プロパティビューに表示されます。プロパティは必要に応じて設定および編集できます。コンポーネントのプロパティは、次の例に示すようにグラフィカルに表示するか、カテゴリ別一覧またはアルファベット順一覧として表示できます。


プロパティビュー

詳細については、コンポーネントプロパティの設定を参照してください。

デザインモードでのアウトラインビュー

デザインモードでは、アウトラインビューに、Flex アプリケーションの MXML 構造の階層ビューが表示されます。個々の MXML タグのステートメントとコンポーネントを選択すると、アプリケーションの構造を簡単に移動できます。アウトラインビューでアイテムを選択すると、デザインモードでハイライト表示されます。


デザインモードでのアウトラインビュー

デザインモードでのアウトラインビューの使用方法の詳細については、MXML の構造の確認を参照してください。

関連トピック


Flex 2.01