1 Reply Latest reply on Jul 17, 2011 1:16 PM by MikisMM

    Skinnable Component - Within Skinnable Component

    dataDash Level 1

      I have a host component (who's skin you can see below) and it has a property placeHolder which is of type PlaceHolder (which is skinnable component).


      What I want to know is, is there a way to add the object placeHolder from the hostComponent directly to the skin of the hostComponent rather than adding another PlaceHolder in the skin and binding all its properties to the hostComponent.placeHolder.XXX (XXX = property I want to bind to)?


      To me that just seems odd adding another PlaceHolder to display exactly the same stuff that is in hostComponent.placeHolder.






      <?xml version="1.0" encoding="utf-8"?>
      <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:vo="co.uk.pavers.creative.stiletto.catalogue.mvc.model.vo.*">
          <!-- host component -->
              [HostComponent("co.uk.pavers.creative.stiletto.catalogue.mvc.model.vo.TemplatePlaceHolder ")]
          <vo:PlaceHolder id="placeHolder" label="{hostComponent.placeHolder.label}" widthMM="{hostComponent.placeHolder.widthMM}" heightMM="{hostComponent.placeHolder.heightMM}"/>
          <s:Label text="{hostComponent.sequenceNumber}" horizontalCenter="0" verticalCenter="20" fontSize="200" alpha="0.08"/>
          <s:Rect id="hud" width="{lblPosition.width + 10}" height="20" radiusX="5" radiusY="5" top="10" left="10">
                  <s:SolidColor color="0x333333" alpha="0.8"/>
          <s:Label id="lblPosition" text="X: {hostComponent.x} mm Y: {hostComponent.y} mm" x="{hud.x + 5}" y="15" color="#FFFFFF"/>

        • 1. Re: Skinnable Component - Within Skinnable Component
          MikisMM Level 2

          I suggest extending your TemplatePlaceHolder from SkinnableContainer rather than SkinnableComponent (that's what you are doing right now, aren't you?). This way you would define contentGroup skin part within your skin class (instead of that PlaceHolder). And in the setter of your placeHolder property (the component side) you can add an element you passed to the setter to the display list via addElement() method. So your setter might look like this:


          public function set placeHolder(value:PlaceHolder) : void {
             // remove previous element, if you need this
             // add the new one
             if (value != null) {
                // do some cofiguration of the PlaceHolder instance if you like
                // and add it to the display list


          This is the simplest thing I could think of. However I would probably move all that element removing / adding logic to the commitProperties(). Doing so would require additional instace variable for storing the PlaceHolder instance, a flag that would be set when the placeHolder property changes and all other Flex-related stuff. But the above code should work just fine (assuming I've understood your requirements correctly).