0 Replies Latest reply on Jun 9, 2009 12:04 PM by Clifford Meece

    Accessing Programmatic skin variables

    Clifford Meece Level 1

      Hi, I have a button with a custom programmatic skin set in css.  The Skin draws a simple circle with a '+' inside.  This works fine.  The problem is positioning my button component.

       

      The button can appear in a fe places in my app, and I can't always get it to line up the way I want.  For example, I would like to place it in a HBox, but then I can't quite get the vertical alignment correct, and if I get it right, it is then wrong when the button with the same skin appears later in a different hbox component with different characteristics. 

       

      I figure I have two possible solutions but I don't know how to do either:

       

      1) let HBox lay out the component and then move it slightly into place.  Is this possible?  Can I adjust the automatic layout without getting rid of it entirely?

       

      2) My Programmatic skin has some public variables that help it to draw itself.  Is there a way to access this skin via a component that has it?  If so I can then manually set the skin properties for some of the components to get a customized drawing that aligns properly. 

       

      This is what I have so far:

       

      in my package definition:

       

      // The following meta tags allow me to grab the values defined in the

      // CSS definitions for each respective 'named' skin type.

      [Style (name="plusButtonSkin", type="Class")]

       

      in my custom component definition:

       

      // instance variables corresponding to the metatags above

      // which in turn match to the css named skin types

      protected var addButtonSkin:Class;

       

       

      And here I am creating children in my component:

       

      // Add the left button

      leftAddButton = new Button();

      leftAddButton.width=10;

      leftAddButton.height=10;

      // set my instance variable to the css variable definition

      addButtonSkin = getStyle("addButtonSkin");

      // set the styles

      leftAddButton.setStyle("upSkin",addButtonSkin);

      leftAddButton.setStyle("downSkin",addButtonSkin);

      leftAddButton.setStyle("overSkin",addButtonSkin);

      leftAddButton.addEventListener(MouseEvent.MOUSE_DOWN,startNewNode);

      this.addChild(leftAddButton);

       

       

      So after adding the 'leftAddButton', the vertical alignment is off, so I need to either do something 'like'

       

      leftAddButton.moveToCorrectVerticalAlignment

       

      or

       

      addButtonSkin.somePropertyToHelpMeDraw=something

       

       

      Thanks for any advice,

      Cliff