Flex 4にてOSネイティブのウインドウをFlex独自スタイルに変更する方法

Flex 4は、OS標準のフォームアプリのウインドウ枠をFlexオリジナルのものに変えたり、カスタマイズするにはFlex 3のときのやり方では反映されない。

OSに依存するフォームウインドウデザインを解除し、クロスプラットフォーム環境で統一したFlexの素のウインドウデザインにするには、以下のようにする。

サンプルケース

●プロジェクト名：myApp

以下の階層を例とする。

対象ファイル：
myApp → src → (default package) → myApp.mxml

スタイル定義（fx:Style）部分に、以下を指定する。

1
2
3
4
5
6
7

<fx:style>
@namespace "library://ns.adobe.com/flex/spark";
WindowedApplication
{
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin");
}
</fx:style>

よりビューとロジックを分けて開発するなら、Flexではフォームや各コントロールのデザインをCSSに定義して分離することができるので、mxmlではなくCSSに定義する場合は例えばこんな感じ。

対象ファイル：
myApp → src → (default package) → myApp.mxml

1	<fx:style source="style.css" />

対象ファイル：
myApp → src → (default package) → style.css

1
2
3
4

@namespace s "library://ns.adobe.com/flex/spark";
s|WindowedApplication {
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin");
}

さらに、以下のアプリケーション定義ファイル(XML)のシステムクロームをオフにしておく。

対象ファイル：
myApp → src → myApp-app.xml