Что такое hostComponent?

Question

Im скинирует progressBar в 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

При создании пользовательских компонентов в архитектуре Спарк, вы обычно разделить их на две части:

• класса ActionScript, который содержит основную функциональность пользовательского компонента. Этот класс обычно расширяет SkinnableComponent или SkinnableContainer
• класс кожи MXML, который слабо связан с этим классом ActionScript и содержит только визуальное представление компонента. Этот класс не должен содержать никакой реальной функциональности, и это должно быть тривиально, чтобы заменить его другим скином.

Первый из этих двух классов называется хост-компонентом с точки зрения кожи.

Простой пример

Давайте создадим очень простую панель, расширив SkinnableContainer:

public class MyPanel extends SkinnableContainer { 

    [Bindable] 
    public var title:String; 

} 

Как вы можете видеть, я сделал свойство «название», который мы хотим использовать, чтобы отобразить в панели. Теперь давайте создадим оболочку, которая использует это свойство:

<?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 определяется в блоке «метаданных», и вы увидите, что мы можем использовать его, чтобы связать его свойства в наше визуальное представление. «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>