什么是主机组件? [英] What is the hostComponent?

问题描述

我在 Flex 中为一个 progressBar 蒙皮，在阅读了一些关于它的内容后，我看到有一个叫做 hostComponent 的东西.

Im skinning a progressBar in Flex, and after reading a bit about it, I see that there is something called 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."

但是，我仍然不明白这究竟是如何工作的.

But, I still dont understand how this exactly works.

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

Any quick and practical explanation?

谢谢！

推荐答案

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

When you create custom components in the Spark architecture, you usually split them up into two parts:

• 一个包含自定义组件核心功能的 ActionScript 类.这个类通常会扩展 SkinnableComponent 或 SkinnableContainer
• 一个 MXML 皮肤类，它与该 ActionScript 类松散地关联并且只包含组件的视觉呈现.这个类不应该包含真正的功能，用另一个皮肤替换它应该是微不足道的.

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

The first of these two classes is referred to as the host component from the skin's point of view.

一个简单的例子

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

Let's create a very simple panel by extending SkinnableContainer:

public class MyPanel extends SkinnableContainer {

    [Bindable]
    public var title:String;

}

如您所见，我创建了一个属性title"，我们想用它来在面板中显示标题.现在让我们创建一个使用这个属性的皮肤:

As you can see, I made a property 'title' which we want to use to display a title in the Panel. Now let's create a skin that uses this property:

<?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 需要它；这是您放置在自定义面板中的所有元素.所以这里是如何使用它:

The hostcomponent is defined in the 'metadata' block and you see that we can use it to bind its properties into our visual representation. The 'contentGroup' is there because it is required by SkinnableContainer; this is were all the elements will go that you put inside the custom panel. So here's how to use it:

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

这篇关于什么是主机组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！