什么是主机组件？

Question

我在 Flex 中为一个进度条设置皮肤，在阅读了一些内容之后，我发现有一个叫做 hostComponent 的东西。

Adobe 网站说：

"The host component is the component that uses the skin. By specifying the host component, Spark skins can gain a reference to the component instance that uses the skin by using the hostComponent property."

但是，我仍然不明白这到底是如何工作的。

有什么快速实用的解释吗？

谢谢！

Answer 1

当您在 Spark 架构中创建自定义组件时，通常会将它们分成两部分：

• 包含自定义组件核心功能的 ActionScript 类。这个类通常会扩展 SkinnableComponent 或 SkinnableContainer
• 一个 MXML 外观类，与该 ActionScript 类松散关联，并且仅包含组件的可视化表示。这个类不应该包含真正的功能，用另一个皮肤代替它应该是微不足道的。

从皮肤的角度来看，这两个类中的第一个被称为宿主组件。

一个简单的例子

让我们通过扩展 SkinnableContainer 创建一个非常简单的面板：

public class MyPanel extends SkinnableContainer {

    [Bindable]
    public var title:String;

}

如您所见，我创建了一个属性“title”，我们想用它来在面板中显示一个标题。现在让我们创建一个使用此属性的皮肤：

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Metadata>
        [HostComponent("path.to.MyPanel")]
    </fx:Metadata>

    <!-- graphics for title bar go here -->
    <s:Label text="{hostComponent.title}" top="5" left="5" />

    <!-- graphics for panel content go here -->
    <s:Group id="contentGroup" top="30" bottom="0" left="0" right="0" />

</s:Skin>

主机组件在“元数据”块中定义，您可以看到我们可以使用它将其属性绑定到我们的可视化表示中。 'contentGroup' 存在是因为 SkinnableContainer 需要它；这是您放入自定义面板中的所有元素。所以这里是如何使用它：

<myComps:MyPanel title="Panel title" skinClass="path.to.skins.MyPanelSkin">
    <s:Label text="Hello Panel" />
    <!--everything in here goes into the 'contentGroup'-->
</myComps:MyPanel>