1. ホーム
2. デベロッパーセンター
3. Flexデベロッパーセンター
4. Flex クイックスタート

Flex クイックスタート： はじめに

目次

• MXML と ActionScript を使用したコード記述
• 初めてのアプリケーション開発
• イベントの処理
• Flex コンポーネントの位置指定と配置
• アプリケーションアセットの埋め込み

---

初めてのアプリケーション開発

MXML ファイルは通常の XML ファイルであるため、開発時に使用する環境を自由に選択することができます。 単純なテキストエディタや、XML 専用エディタ、あるいはテキスト編集機能をサポートしている統合開発環境（IDE）などを使用して、MXML コードを記述することができます。 Flex には、アプリケーション開発のために Adobe® Flex™ Builder™ 2 と呼ばれる専用 IDE が用意されています。

MXML ファイルの 1 行目は XML 宣言です。 各 MXML ファイルの先頭にこの宣言行が必要です。

次の行は <mx:Application> タグで、Application コンテナを定義します。これは常に Flex アプリケーションのルートタグとなります。

この <mx:Panel> タグは、タイトルバー、タイトル、ステータスメッセージ、ボーダーおよびその子のコンテンツ領域を含む Panel コンテナを定義します。 その title プロパティは "My Application" に設定されます。■タグのみの部分を開けません■ "My Application".

この <mx:Label> タグは Label コントロールを表します。これはテキストを表示する非常に簡単なユーザインタフェースのコンポーネントです。 その text プロパティは "Hello, World!" に設定されます。■タグのみの部分を開けません■ "Hello, World!".

上記の fontWeight と fontSize ■訳を後の文節にまとめました■ <mx:Label> <mx:Label> の fontWeight および fontSize プロパティによって、使用するフォントのスタイルを変更します。 CSS を使用してコンポーネントにスタイルを適用することもできます。 詳しくは、『Flex 2 Developer's Guide』の「Using Cascading Style Sheets (CSS)」を参照してください。

注意：Flex アプリケーションは、mxmlc （コマンドラインコンパイラ）または Flex Builder 2 を使用してコンパイルすることができます。mxmlc でアプリケーションをコンパイルする手順については、『MXML と ActionScript を使用したコード記述』を参照してください。

例

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/HelloWorld/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="300" height="160"
>
    <mx:Panel 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
        title="My Application"  
    >

        <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
    </mx:Panel>
</mx:Application>

結果

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

トップへ戻る

---

詳細情報

Flex アプリケーションの作成について詳しくは、『Flex 2 Developer's Guide』の「Developing Applications in MXML」の節を参照してください。

著者について