Apache flex 使用flex 4时向mx组件添加背景图像

这又是一个主题问题。因为我正在处理的项目需要扩展mx组件（如TitleWindow和TabNavigator），所以我不能直接使用我所知道的Spark蒙皮。但是，由于项目是使用默认的Spark主题（顶部有我的修改）而不是Halo主题进行编程的，因此我显然无法访问我需要的样式（即backgroundImage和contentBackgroundImage，它们显然需要Halo处于活动状态）。简单地将光环作为主题将打破其他东西，而不仅仅是我自己的主题。正在计划替换旧的库，或者至少将它们更好地修补到Flex4，但是现在，我需要一种不直接修改这些组件的样式/外观的方法

---

无法将背景图像添加到TitleWindow的内容区域将是荒谬的我整天在互联网上到处搜索，尝试了无数款式、皮肤、选择器以及它们的组合，但运气不佳。难道没有人知道在使用Flex 4.1 sdk时如何将背景图像添加到mx TitleWindow的内容中吗

> p>如果在Mx:Type窗口中没有显式成员，则不应考虑使用 spark BorderContainer作为其第一个子对象，因为您可以为其指定背景图像
我在想这样的事情：

<?xml version="1.0" encoding="utf-8"?>
<mx: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" layout="absolute" 
    width="400" height="300" backgroundAttachment="">
    <s:BorderContainer backgroundImage="{IMyConstants.MYLOGO}" 
        width="100%" height="100%" backgroundAlpha=".5" />
    <mx:VBox width="100%" height="100%">
        <mx:Text text="{IMyConstants.LOREMIPSUM}" width="100%" height="100%" />
        <mx:Button label="Do something" />
    </mx:VBox>
</mx:TitleWindow>

---

我希望我理解了你的问题，这很有帮助。

事实上，这不是唯一的方法，正如你所提到的，这是硬编码的方法：抱歉。 也可以对TitleWindow组件进行蒙皮以接受背景图像

要创建具有所有必要状态的适当外观，可以将基本外观：

spark.skins.spark.TitleWindowSkin

复制为

MyTitleWindowSkin

，并向其添加一些自定义项：

在元数据标记中，应输入自定义TitleWindow类的名称：

<fx:Metadata>
    <![CDATA[ 
        [HostComponent("my.package.CustomTitleWindow")]
    ]]>
</fx:Metadata> 

接下来，您需要创建一个新类（

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%" styleName="twWithBgImage" />
</s:VGroup>

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>

我的输出仍然如下所示：

---

我担心这是唯一的办法。这是硬编码，不是样式。我想尽量避免这种情况。有没有办法通过CSS指定这种皮肤？我没有创建派生类型的特权，因为我使用的是一个已经派生的类型，不允许我直接更改（现实地说），是的。检查我的更新以获取示例。输出与之前粘贴的相同。我想您不明白。我们正在使用一个派生TitleWindow的库，但我们无法派生自己的类型。至少现在不行。是否有任何纯CSS+皮肤方法可以做到这一点？上一次更新是一个纯CSS+皮肤解决方案。您只需将.package.CustomTitleWindow更改为您正在使用的TitleWindow类声明。我已从上次更新中删除了CustomTitleWindow，因为它令人困惑。

/* 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>

/* 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");
}

<?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>