5 Replies Latest reply on Dec 6, 2011 11:37 AM by drkstr_1

    Flex SkinnableContainer skin access Group inside contentGroup

    Mike6679 Level 1

      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 in advance -Mike

        • 1. Re: Flex SkinnableContainer skin access Group inside contentGroup
          nikos101 Level 2

          Don't you mean

           

          if(partName == "group_nav_custom_comp_hgroup_prevnext")

           

          have you defined group_nav_custom_comp_hgroup_prevnext

          as a skin part in GroupNavCustomContainer?

          • 2. Re: Flex SkinnableContainer skin access Group inside contentGroup
            drkstr_1 Level 4

            Your contentGroup should contain the elements added to the SkinnableContainer, and nothing else. This is managed in the parent component, not the skin.

            • 3. Re: Flex SkinnableContainer skin access Group inside contentGroup
              Mike6679 Level 1

              Based on Nikos tip, I rearranged my code and added 'group_nav_custom_comp_hgroup_prevnext' as a SkinPart, so now I have access to it, in other functions of the class, but still I do not see the button inside that nested group showing up. 

               

              @ drkstr_1 :  Are you saying I cannot have a group inside my contentGroup? if so if then how can I have a group appear right next to it? --- do I have to add it programmatically in the  parent component -- but doesn't that defeat the purpose of the skin?

               

              thx - Mike

               

               

               

               

              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);

               

                                            }

               

                                  }

               

               

               

               

                        }

              }


              • 5. Re: Flex SkinnableContainer skin access Group inside contentGroup
                drkstr_1 Level 4

                @ drkstr_1 :  Are you saying I cannot have a group inside my contentGroup? if so if then how can I have a group appear right next to it? --- do I have to add it programmatically in the  parent component -- but doesn't that defeat the purpose of the skin?

                 

                Yes, that's what I'm saying. The contentGroup is a SkinPart that is used as the container the host component adds all of it's element's to. Any children of this group existing in the skin will be cleared out by the host component. You need to place your other Group on top of the contentGroup, rather than in it.