apache-flex - 使用 flex 4 时将背景图像添加到 mx 组件

Question

同样，一个主题问题。因为我正在进行的项目需要 older libraries扩展 mx 组件(例如 TitleWindow 和 TabNavigator)，我不能直接使用我对 Spark 皮肤的了解。然而，由于该项目是使用默认的 Spark 主题(我的修改在顶部)而不是 Halo 主题进行编程，我显然无法访问我需要的样式(即 backgroundImage 和 contentBackgroundImage 显然需要 Halo 处于事件状态).简单地将 Halo 设置为主题会破坏其他东西，尤其是我自己的主题。正在制定替换旧库或至少将它们更好地修补到 Flex 4 的计划，但就目前而言，我需要一种方法来设置这些组件的样式/外观，而无需直接修改它们。

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

Answer 1

实际上，这不是唯一的方法，正如您所提到的，它是硬编码的方法:对此深表歉意。您还可以设置 TitleWindow 组件的外观以接受背景图像。

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

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

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

接受背景图片，

• 你应该声明一个变量:[可绑定(bind)] 私有(private)变量背景图片:*;
• 覆盖 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，设置其外观，并绑定(bind) 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>

我的输出仍然是这样的: