実際、これが唯一の方法ではありません。おっしゃるように、ハードコードされた方法です。申し訳ありません。TitleWindowコンポーネントにスキンを適用して、背景画像を受け入れることもできます。
必要なすべての状態で適切なスキンを作成するには、ベーススキンをコピーしspark.skins.spark.TitleWindowSkinてMyTitleWindowSkin、それにカスタマイズを追加します。
MetaDataタグに、カスタムTitleWindowクラスの名前を入力する必要があります。
<fx:Metadata>
<![CDATA[
[HostComponent("my.package.CustomTitleWindow")]
]]>
</fx:Metadata>
backgroundImageを受け入れるには、
- 変数を宣言する必要があります：[Bindable] private var backgroundImage：*;
- メソッドをオーバーライドし
updateDisplayList(unscaledWidth,
unscaledHeight)、その内部でこのメンバーを初期化します。
backgroundImage =
getStyle("backgroundImage");
この<!-- layer 2: background fill
-->セクションのsolid-color-fill（<s:Rect
id="background"...）の後に、次のスニペットを配置する必要があります。
<s:Rect id="backgroundImg"
left="1" right="1"
top="{topGroup ? topGroup.height : 0}"
bottom="{bottomGroup ? bottomGroup.height : 0}">
<s:fill>
<!-- BackgroundImage -->
<s:BitmapFill id="img" source="{backgroundImage}"
smooth="true" fillMode="scale" />
</s:fill>
</s:Rect>
my.package.CustomTitleWindow次に、TitleWindowを拡張し、そのスキンを設定し、backgroundImageスタイルをバインドする新しいクラス（）を作成する必要があります。
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
skinClass="my.package.MyTitleWindowSkin">
<fx:Metadata>
[Style(name="backgroundImage", type="*")]
</fx:Metadata>
<mx:VBox width="100%" height="100%">
<mx:Text text="{IMyConstants.LOREMIPSUM}" width="100%" height="100%" />
<s:Button label="Do something" />
</mx:VBox>
</s:TitleWindow>
最後に小さなテスト（私の側ではうまくいきました、そしてあなたが探しているものにもっと近いことを願っています）：
<s:VGroup width="100%" height="100%" paddingLeft="10" paddingTop="10" paddingRight="10">
<my:CustomTitleWindow title="Window without background image"
width="100%" height="50%" />
<my:CustomTitleWindow title="Window with background image"
width="100%" height="50%" backgroundImage="{IMyConstants.MYLOGO}" />
</s:VGroup>
アップデート
cssファイルからスキンと背景画像を設定するには、いくつかの小さな変更のみが必要です。
コンテンツを含むCSSファイルを作成します。
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace my "your.package.*";
my|CustomTitleWindow {
skin-class: ClassReference("your.package.MyTitleWindowSkin");
}
.twWithBgImage {
background-image: Embed("icons/logo.png");
}
テストは次のようになります。
<s:VGroup width="100%" height="100%" paddingLeft="10" paddingTop="10" paddingRight="10">
<my:CustomTitleWindow title="Window without background image"
width="100%" height="50%" />
<my:CustomTitleWindow title="Window with background image"
width="100%" height="50%" styleName="twWithBgImage" />
</s:VGroup>
そして、CustomTitleWindowクラスからスキン宣言を削除する必要がありますskinClass="your.package.MyTitleWindowSkin"。
もちろん、スキンをmy | CustomTitleWindowクラスに適用する必要はありません。これは、cssクラスにのみ使用できます。これにより、既存のコンポーネントを変更する必要がなくなります。
更新-カスタムコンポーネントなし
CustomTitleWindowクラスを忘れてください。
skinnedtw.css
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.twWithBgImage {
skin-class: ClassReference("your.package.MyTitleWindowSkin");
background-image: Embed("icons/logo.png");
}
TestApp.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Style source="assets/skinnedtw.css" />
<s:VGroup width="100%" height="100%" paddingLeft="10" paddingTop="10" paddingRight="10">
<s:TitleWindow title="Window without background image"
width="100%" height="50%">
<mx:VBox width="100%" height="100%">
<mx:Text text="{IMyConstants.LOREMIPSUM}" width="100%" height="100%" />
<s:Button label="Do something" />
</mx:VBox>
</s:TitleWindow>
<s:TitleWindow title="Window with background image"
width="100%" height="50%" styleName="twWithBgImage">
<mx:VBox width="100%" height="100%">
<mx:Text text="{IMyConstants.LOREMIPSUM}" width="100%" height="100%" />
<s:Button label="Do something" />
</mx:VBox>
</s:TitleWindow>
</s:VGroup>
</s:WindowedApplication>
私の出力はまだ次のようになります：
