フレックス：SkinnableContainerがスキンされているときに子コンポーネントが消滅する

Question

イメージコンポーネントやボタンバーなどの子コンポーネントを持つSkinnableコンテナがいくつかあります。スキンを追加するとSkinnableコンテナが大きく見えるようですそのコンテナのすべての子コンポーネントが消えるようです。

Example: 
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"> 

    <!-- host component --> 
    <fx:Metadata> 
      [HostComponent("path.to.skin.MySkinnableContainer")] 
    </fx:Metadata> 

    <s:states> 
     <s:State name="disabled" /> 
     <s:State name="normal" /> 
    </s:states> 

    <mx:Image source="@Embed('path.to.skin.AllSkinArt.swf#SkinArt')" includeIn="normal"/> 

    <!-- SkinParts 
    name=contentGroup, type=spark.components.Group, required=false 
    name=contentGroup, type=spark.components.Group, required=false 
    --> 
</s:Skin> 

スキニングされるコンポーネント、スキンされたときに消えるイメージコンポーネントがあります。

<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         width="116" height="74" 
         addedToStage="onAddedToStage(event)"> 

<fx:Script> 
    <![CDATA[ 

     [Bindable] 
     private var _screenShot:Bitmap; 

     public function updateScreenShot(screenShot:Bitmap):void 
     { 
      _screenShot = screenShot; 

     } 

     protected function onAddedToStage(event:Event):void 
     { 
      //do not want the mouse to interact with this object. 
      this.mouseEnabled = false; 
     } 
    ]]> 
</fx:Script> 

<s:Image 
    width="115" 
    height="82" 
    x="-8" 
    y="-109" 
    source="{_screenShot}"/> 
</s:SkinnableContainer> 

CSSドキュメント内には、スキンを設定するための次のコード行があります。

wd|MySkinnableContainer 
{ 
    skinClass: ClassReference("path.to.MySkinnableContainerSkin"); 
} 

上記の例では、Skinはうまく動作しますが、SkinnableContainerに含まれる画像は消えます。

Answer 1

あなたの肌にはcontentGroupのスキンパーツがないようです。面白いことに、SkinnableContainerのようなコンポーネントでは、コンテンツグループが必要と思っていたでしょう。悲しいかな、そうではありません。

は、お肌にこれを追加します。

<s:Group id="contentGroup" /> 

そして今、「contentGroupの皮膚の一部が存在することを、「SkinnableContainer」はそれにあなたの子オブジェクトを追加することができる必要があります。

Answer 2

私は同じ問題を抱えていましたが、これを行う別の方法はありませんでした。問題は画像がスキンの一部とみなされることです。スキンクラスのソースを設定すると、それは私のために働いた。

<s:SkinnableContainer> 

<fx:Script> 
    <![CDATA[ 

     [Bindable] 
     public var imageSource:String; 
     .................... 

    ]]> 
</fx:Script> 
    <s:Image id="sampleImg"/> 

</s:SkinnableContainer> 

<s:Skin> 

    <s:Image id="sampleImg" source="{hostcomponent.imageSource}"/> 

</s:Skin>