Before this post check: When simple overriding is not possible!

In this post I will show why would you have to change the flex classes code.
I had hard times with this problem. When both scrollers appear in a container in the same time, a white rectangle is created in the corner. First I thought it’s something with the scroller (that’t why I didn’t find the solution). But I’ve found it! And I have to ask a question: Why is that the the rectangle have to be white, and it is hardcoded there?

The code from the Container class:

4525
4526
4527
4528
4529
4530
4531
4532
4533
4534
4535
4536
4537
4538
4539
4540
4541
4542
4543
4544

        // Create or destroy the whiteBox.
        // If both scrollBars are active, there's an empty space
        // between the two scrollBars in the lower right corner.
        // The whiteBox fills that space, so that the container's
        // children aren't visible when they scroll underneath.
        if (horizontalScrollBar && verticalScrollBar)
        {
            if (!whiteBox)
            {
                whiteBox = new FlexShape();
                whiteBox.name = "whiteBox";
 
                var g:Graphics = whiteBox.graphics;
                g.beginFill(0xFFFFFF);
                g.drawRect(0, 0, verticalScrollBar.minWidth, horizontalScrollBar.minHeight);
                g.endFill()
 
                rawChildren.addChild(whiteBox);
            }
        }

The default container with the white rectangle:

So let’s make an quick change. I will just put there a public property so I can change it easily (I can set the color just on creation, to make a better solution use styles).

I added

 public var whiteRectangleColor:uint=0xFFFFFF;

and made this change

g.beginFill(whiteRectangleColor);

in the Container Class. So now every class that extends container can change that whiteRectangle color, and actually the default behavior was not changed.

So the code that uses this is:

1
2
3
4
5
6
7
8
9
10
11
12
13

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="300">
 
	<mx:Panel width="100%" height="100%">
		<mx:Canvas width="100%" height="100%" backgroundColor="#00ff00" whiteRectangleColor="#00ff00">
			<mx:Canvas width="400" height="400" backgroundColor="#0000ff">
				<mx:Text x="10" y="10" text="Did you ever tried to find out why is that white rectangle there in the down-right corner? (Between the scrollers)" 
					width="253" height="236" fontSize="25"/>
 
			</mx:Canvas> 
		</mx:Canvas>
	</mx:Panel>
</mx:Application>

And the result: a super good looking green rectangle (with grey it would look better, atually i could change the size it looks a little big for me):

Actually this is not the best example for such a hack. You cannot control the drawing the container, because it’s a private funtion. It will use white color, but the whiteBox variable is protected, so there is access to it. (You have to clear the graphics for it, and draw other rectangle with different color after the rectangle was created. And you have to do it every time, when both the scrollers appear, because the rectangle is always destroyed if not needed. So this hack is an easier solution, but not the only for this problem)

Source for this project: TheWhiteRectangleAttacks.zip