Ok ... so I'm still getting issues with the dynamic height on custom
components. 

I have a background Shape which I construct in the createChildren
method and set its graphics. In the updateDisplayList function I clear
and redraw the graphics at the new y position. This results in 2
versions of the Shape existing, first at the initial location (the
ghost version) and second at the new y location. 
You can see in the screenshot below, in the 2nd case there there are 2
sets of tiled backgrounds instead of a clear area where the swf asset
(dotted circle) is located.

It seems myShape.graphics.clear() does nothing. 
Here's the screenshot:
http://img186.imageshack.us/img186/8470/ghostredrawingxv8.jpg

Here's the code:
public class CustomPanel extends UIComponent {
        
        // Children             
        private var progress:Sprite;
        private var nameContainer:Shape;
        private var numberContainer:Shape;
        private var nameLabel:Label;
        private var numberLabel:Label;
        
        // Styles from parent game-header
        private var backgroundFill:Class;
        private var backgroundColour:int;
        private var padding:int;
        
        private var nameHeight:int = 28;
        private var ratingHeight:int = 26;
        private var nameBackground:BitmapData;
        private var _nameText:String = "";
        private var _numberText:String = "";
        
        public function get nameText():String {
                return _nameText;
        }
        
        public function CustomPanel(backgroundFill:Class,
backgroundColour:int, fontColour:int, ratingFontColour:int,
imageWidth:int, padding:int)    {
                super();
                this.backgroundFill = backgroundFill;
                this.backgroundColour = backgroundColour;
                this.fontColour = fontColour;
                this.ratingFontColour = ratingFontColour;
                this.imageWidth = imageWidth;
                this.padding = padding;
        }
        
        override protected function createChildren() : void {
                super.createChildren();
                        
                if(!nameContainer) {
                        nameContainer = addChild(new Shape()) as Shape;
                }
                if(!numberContainer) {
                        numberContainer = addChild(new Shape()) as Shape;
                }
                if(!nameLabel) {
                        nameLabel = addChild(new Label()) as Label;
                        nameLabel.truncateToFit = true;
                        nameLabel.setStyle("color", fontColour);
                }
                if(!numberLabel) {
                        numberLabel = addChild(new Label()) as Label;
                        numberLabel.setStyle("color", ratingFontColour);
                }
                
                nameBackground = new BitmapData(nameHeight, nameHeight, false)
                nameBackground.draw(new backgroundFill());
                                        
                nameLabel.x = numberLabel.x = padding;
        }
        
        override protected function commitProperties():void {
                super.commitProperties();
                
                nameLabel.text = _nameText;
                numberLabel.text = _numberText;
        }
        
        override protected function measure():void {
        super.measure();
        
        measuredWidth = measuredMinWidth = explicitWidth;
        measuredHeight = measuredMinHeight = ((progress == null) ?
explicitWidth : progress.height) + nameHeight + ratingHeight;
    }

        override protected function updateDisplayList( unscaledWidth:Number,
unscaledHeight:Number ):void {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                
                nameContainer.graphics.clear();
                nameContainer.graphics.beginBitmapFill(nameBackground);
                nameContainer.graphics.drawRect(0, 0, explicitWidth, 
nameHeight);
                nameContainer.graphics.endFill();
                
                numberContainer.graphics.clear();
                numberContainer.graphics.beginFill(backgroundColour);
                numberContainer.graphics.drawRect(0, 0, explicitWidth, 
ratingHeight);
                numberContainer.graphics.endFill();
                
                var playerWidth:Number = unscaledWidth;
                if(playerWidth == 0) {
                        playerWidth = nameLabel.measuredWidth;
                }
                else {
                        playerWidth = Math.min(unscaledWidth, 
nameLabel.measuredWidth)
                }
                nameLabel.setActualSize(playerWidth, nameLabel.measuredHeight);
                numberLabel.setActualSize(numberLabel.measuredWidth,
numberLabel.measuredHeight);
                
                if(progress != null) {
                        progress.x = explicitWidth/2 - progress.width/2;
                        nameContainer.y = progress.height + padding;
                }
                
                numberContainer.y = nameContainer.y + nameHeight;
                nameLabel.y = nameContainer.y + nameHeight/2 -
nameLabel.measuredHeight/2 - 2;
                numberLabel.y = numberContainer.y + ratingHeight/2 -
numberLabel.measuredHeight/2;
        }
                
        public function setDetails(nameText:String, numberText:String):void {
                if(progress == null && image == null) { // loaded for the 1st 
time
                        progress = addChild(new Sprite()) as Sprite;
                        progress.addChild(new Assets.processingAni());  
                }
                _nameText = nameText;
                _numberText = numberText;
                invalidateProperties();
        }


--- In flexcoders@yahoogroups.com, "polestar11" <[EMAIL PROTECTED]> wrote:
>
> Thanks Josh
> 
> This example was a simple case. What I actually want to is have my
> component behave like a container where it centres its child items. In
> retrospect I would have to extend from the Container class. 
> 
> The absoulte size would fix the problem (in that the item re-draws
> would occur underneath each other & would not be visible). I was just
> worried that I was getting a lot of outdated screen objects that
> aren't being cleaned up when drawing underneath each other. But I
> suppose it's only 1 graphics layer.
> 
> Cheers
> Tracy
> 
> 
> 
> --- In flexcoders@yahoogroups.com, "Josh McDonald" <dznuts@> wrote:
> >
> > Components don't set explicitWidth and explicitHeight on themselves,
> they're
> > (optionally) set by the container, and actual sizing is set by the
> container
> > through setActualSize().
> > 
> > Override measure(), and set measuredWidth and measuredHeight to
> match your
> > label, and your problems may go away. Also in updateDisplayList you
> want to
> > set the actual size of the label to the minimu of it's measured
size and
> > unscaledWidth x unscaledHeight.
> > 
> > -Josh
> 
> >
>


Reply via email to