Maccle

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

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

5116715671_ba702e1c2e_b_mini

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

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

サンプルケース

プロジェクト名:myApp

以下の階層を例とする。

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

スタイル定義(fx:Style)部分に、以下を指定する。
[xml]<fx:style>
@namespace "library://ns.adobe.com/flex/spark";
WindowedApplication
{
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin");
}
</fx:style>[/xml]

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

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

[xml]<fx:style source="style.css" />[/xml]

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

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

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

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

[xml]<!– The type of system chrome to use (either "standard" or "none"). Optional. Default standard. –>
<systemchrome>none</systemchrome>[/xml]

About The Author

某IT系なんちゃってエンジニアヨーダ
Apple好きだけど盲目マカーは気持ち悪いと思ってる中道だと思い込んでるしがないダメダメエンジニア。

今もってるApple製品↓
Macbook Pro 15 inch, iMac 27 inch (Late 2009), iPhone 6 Plus, iPad (初代! いらない!)
Follow :

Leave A Reply

*

Comment On Facebook