На самом деле, это не единственный способ, как вы уже упоминали, жестко закодированный способ: извините за это.
Вы также можете сделать скин для вашего компонента TitleWindow для принятия фоновых изображений.
Чтобы создать соответствующий скин со всеми необходимыми состояниями, вы можете скопировать базовый скин: spark.skins.spark.TitleWindowSkin как MyTitleWindowSkin и добавить к нему некоторые настройки:
В теге MetaData вы должны ввести имя вашего пользовательского класса TitleWindow:
<fx:Metadata>
<![CDATA[
[HostComponent("my.package.CustomTitleWindow")]
]]>
</fx:Metadata>
Чтобы принять backgroundImage,
- вы должны объявить переменную:
[Bindable] частный var
BackgroundImage: *;
- переопределить
updateDisplayList(unscaledWidth,
unscaledHeight) метод и внутри
из этого инициализировать этот член:
backgroundImage =
getStyle("backgroundImage");
в разделе <!-- layer 2: background 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>
Мой вывод все еще выглядит так:
