3

再次，一个主题问题。因为我正在处理的项目需要扩展 mx 组件的旧库（例如 TitleWindow 和 TabNavigator），所以我不能直接使用我所知道的关于 Spark 蒙皮的知识。但是，由于该项目是使用默认的 Spark 主题（上面是我的修改）而不是 Halo 主题来编程的，我显然无法访问我需要的样式（即 backgroundImage 和 contentBackgroundImage 显然需要 Halo 处于活动状态）。简单地将 Halo 设置为主题会破坏其他东西，尤其是我自己的主题。正在计划替换旧的库或至少将它们更好地修补到 Flex 4，但截至目前，我需要一种方法来设置这些组件的样式/外观，而无需直接修改它们。

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

4

2 回答 2

2

实际上，这不是唯一的方法，它是 - 正如你所提到的 - 硬编码的方式：对此感到抱歉。您还可以为 TitleWindow 组件设置皮肤以接受背景图像。

要创建具有所有必要状态的适当皮肤，您可以复制基本皮肤：spark.skins.spark.TitleWindowSkinas MyTitleWindowSkin，并为其添加一些自定义：

在 MetaData 标记中，您应该输入自定义 TitleWindow 类的名称：

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

接受背景图像，

  • 你应该声明一个变量： [Bindable] private 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");
}

测试应用程序.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>

我的输出仍然如下所示： 在此处输入图像描述

于 2011-04-11T20:45:26.017 回答
0

如果您的 mx:TitleWindow 中没有显式成员，那么您应该考虑使用 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>

我希望我理解你的问题，这会有所帮助。

于 2011-04-11T10:50:35.467 回答