什么是hostComponent区域？ [英] What is the hostComponent?

问题描述

林剥皮进度在Flex和阅读一些关于它后，我看到有个东西叫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.

有快捷，实用的解释？

谢谢！

推荐答案

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

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

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

第这两个类被称为从皮肤的观点的主机组件。

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;

}

正如你所看到的，我做了一个属性'标题'，我们想用显示面板中的一个标题。现在，让我们创建一个使用这个属性皮肤：

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>

hostComponent区域被定义在元数据块，你看，我们可以用它来其属性绑定到我们的视觉重新presentation。在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>

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