Flex SkinnableContainer skin access Group inside contentGroup

Question

I have skin class in which I defined a Group inside my contentGroup:

<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="475" minHeight="0">
        <s:layout>
            <s:HorizontalLayout paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0" gap="2" />
        </s:layout>


        <s:Group id="group_nav_custom_comp_hgroup_prevnext" left="0" right="0" top="0" bottom="0" minWidth="100" minHeight="0">
            <s:layout>
                <s:HorizontalLayout paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0" gap="5" />
            </s:layout>
            <s:Button label="Test Button"/>
        </s:Group>

    </s:Group>

Now, in my CustomComponent that extends the skin class above I am trying to access the "group_nav_custom_comp_hgroup_prevnext" (which is the child group inside the contentGroup) so I can add elements to it at runtime:

public class GroupNavCustomContainer extends SkinnableContainer
    {

        private var m_group_prev_next:Group = null;
        private var m_bAdded_btns:Boolean = true;
        private var _prevbtn:UIComponent = null;

        public function GroupNavCustomContainer()
        {
            super();


            setStyle("skinClass", GroupNavCustomSkin);

        }
        //----------------------------------
        public function set prevBtn(ui_comp_prev:UIComponent):void
        {

            if(m_group_prev_next)   
            {
                _prevbtn = ui_comp_prev;
                m_bAdded_btns = true;
                invalidateProperties();
            }

        }
        //-------------------------------------------------------------------------
        override protected function partAdded(partName:String, instance:Object):void 
        {
            trace("In partAdded");


            if(partName == "contentGroup")
            {
                var group:Group = instance as Group;
                var visualElem:IVisualElement = group.getElementAt(0);
                m_group_prev_next = visualElem as Group;
            }

            super.partAdded(partName, instance);

        }
        //------------------------------------------------------------------------
        override protected function commitProperties():void 
        {

            super.commitProperties();

            if (m_bAdded_btns) 
            {

                m_bAdded_btns = false;
                m_group_prev_next.addElement(_prevbtn);

            }

        }




    }

The result is my: group_nav_custom_comp_hgroup_prevnext is just not showing up at all, evidenced by the fact that the button present in it at compile time is not visible. Anyone know how to get it to show up? - thx! -Mike

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Ok I added my sub group as a skin part:

[SkinPart(required="true")] public var group_nav_custom_comp_hgroup_prevnext:Group;

so now I can access it from anywhere in the CustomComponent. But the button inside the 'group_nav_custom_comp_hgroup_prevnext' still doesn't show up . Any one know why?

package com.viiv.digi.views.navigation
{
          import mx.core.IVisualElement;
          import mx.core.UIComponent;

          import skins.GroupNavCustomSkin;

          import spark.components.Group;
          import spark.components.SkinnableContainer;

          public class GroupNavCustomContainer extends SkinnableContainer
          {

                    private var m_group_prev_next:Group = null;
                    private var m_bAdded_btns:Boolean = false;
                    private var _prevbtn:UIComponent = null;


                    [SkinPart(required="true")]
                    public var group_nav_custom_comp_hgroup_prevnext:Group;



                    public function GroupNavCustomContainer()
                    {
                              super();


                              setStyle("skinClass", GroupNavCustomSkin);

                    }
  //----------------------------------
                    public function set prevBtn(ui_comp_prev:UIComponent):void
                    {

                        _prevbtn = ui_comp_prev;
                              m_bAdded_btns = true;
                              invalidateProperties();
        }
  //------------------------------------
                    public function get prevBtn():UIComponent
                    {
                              return _prevbtn;
                    }
  //-------------------------------------------------------------------- -----
                    override protected function partAdded(partName:String, instance:Object):void
                    {
  trace("In partAdded");
                              super.partAdded(partName, instance);

                    }
  //-------------------------------------------------------------------- ----
                    override protected function commitProperties():void
                    {

                              super.commitProperties();

                              if (m_bAdded_btns)
                              {

                                        m_bAdded_btns = false;
                                        group_nav_custom_comp_hgroup_prevnext.addElement(_prevbtn);

                              }

                    }




          }
}

Answer 1

The contentGroup should contain the elements added to the SkinnableContainer, and nothing else. This is managed in the parent component, not the skin. So you would add the "group_nav_custom_comp_hgroup_prevnext" Group component definition right below the contentGroup and then reference it in the GroupNavCustomContainer.