0 Replies Latest reply on Oct 18, 2009 1:46 AM by K-kOo

    Custom BoxLayouted component

    K-kOo

      Hello Flex team and members.

       

      I'm trying to create a custom component using a BoxLayout (horizontal) . This component should display a linkbutton (iconized) along with a label. I wanted to use a BoxLayout to easy up all the positionning thing. So i copied the Box class and kept only the important thing to me.

      Here is what i have:

       

      package common
      {
        import flash.events.Event;
        import flash.events.MouseEvent;
        
        import mx.containers.BoxDirection;
        import mx.containers.utilityClasses.BoxLayout;
        import mx.controls.Label;
        import mx.controls.LinkButton;
        import mx.core.Container;
        import mx.core.IUIComponent;
        
        public class TagLabel3 extends Container
        {
           private var layoutObject:BoxLayout = new BoxLayout();
      
           [Embed(source="cancel.png")]
           protected var iconSymbol:Class;
           
           protected var tagLabel:Label;
           protected var closeButton:LinkButton;
           
           private var labelChanged:Boolean = false;
           
           private var _displayCloseButton:Boolean = true;
           private var _text:String;
           
           public function TagLabel3()
           {
               super();
        
               layoutObject.target = this;
               layoutObject.direction = BoxDirection.HORIZONTAL;
               
               setStyle("cornerRadius", 4);
               setStyle("borderStyle", "solid");
               setStyle("borderThickness", 2);
               setStyle("backgroundColor", "#D4D4D4");
               setStyle("verticalAlign", "middle");
               // other setStyle()...
           }
      
           override protected function createChildren():void
           {
               super.createChildren();
               if (!closeButton)
               {
                 closeButton = new LinkButton();
                 closeButton.setStyle("icon", iconSymbol);
                 closeButton.addEventListener("heightChanged", 
                    function (e:Event):void {
                        minHeight = closeButton.height + 10;
                    }
                 );
                 addChild(closeButton);
               }
               if (!tagLabel)
               {
                 tagLabel = new Label();
                 addChild(tagLabel);
               }
           }
      
           override protected function commitProperties():void
           {
               if (closeButton.visible != displayCloseButton)
               {
                 closeButton.includeInLayout = displayCloseButton;
                 closeButton.visible = displayCloseButton;
               }
           }
      
           override protected function measure():void
           {
               super.measure();
        
               layoutObject.measure();
           }
      
           override protected function updateDisplayList(unscaledWidth:Number,
                                                         unscaledHeight:Number):void
           {
               super.updateDisplayList(unscaledWidth, unscaledHeight);
        
               layoutObject.updateDisplayList(unscaledWidth, unscaledHeight);
               
               if (labelChanged)
                  {
                    tagLabel.text = text;
                    labelChanged = false;
                  }
           }
           
           public function get text():String
           {
               return _text;
           }
      
           public function set text(value:String):void
           {
               if (_text != value)
               {
                   _text = value;
                   labelChanged = true;
                   invalidateSize();
                   invalidateDisplayList();
               }
           }
           
           public function get displayCloseButton():Boolean
           {
               return _displayCloseButton;
           }
        
           public function set displayCloseButton(value:Boolean):void
           {
               if (_displayCloseButton != value)
               {
                   _displayCloseButton = value;
                   invalidateProperties();
                   invalidateSize();
                   invalidateDisplayList();
               }
           }      
        }
      }
      

      And now I am facing 2 problems:

      - when i play with the 'text' and 'displayCloseButton' properties, the things are being updated correctly but not the size of the whole container. How can i asked the layout to resize correctly.

      - the initial style is taking very long to initialize. I can really first see my container with no border and background color (but with the inner component displayed) and then 1.5 sec later the style is being set.

       

      I first did the same component by extending an HBox but i didn't want the user to be able to wrongly add something to the HBox by calling addChild on my component.

       

      Thank you