On Thu, May 21, 2009 at 11:24 AM, ilanavigdor <[email protected]> wrote:
> Can anyone explain what is the difference between viewable and content area? For regular components like Button, CheckBox, etc., there's only one frame of reference, and that is the local co-ordinate system. For containers (Canvas, Box, etc.), you have the viewable and content areas as well. Check this example: <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; xmlns="*"> <mx:VBox id="box1" borderStyle="solid" borderThickness="3" width="200" height="200" paddingLeft="10"> <mx:Button id="btn1" label="Test 1" width="100%" height="300" click="trace(btn1.width, btn1.x)" /> </mx:VBox> </mx:Application> If you click on the "Test 1" button, its width is reported as 168 px. Its x position is 10 px. This x position is in the content co-ordinate system of its parent container (box1), which does not include the 3 px. border. If you were to translate this x position to the local co-ordinate system of the parent, you would get 13 px. (10 + 3). For instance: var pt:Point = new Point(btn1.x, btn1.y); pt = box1.contentToLocal(pt); trace("btn1 in local co-ordinates:", pt.x, pt.y); Prints: btn1 in local co-ordinates: 13 3 So that's the difference between content and local co-ordinates. Content is the content area of the container, which is everything minus the border and any chrome elements (scrollbar, title bar, whatever). The viewable area is the part of the content area that's visible. In the above example you have a vertical scrollbar, so here's what it looks like: width: 200; height: 200; content width: 178; // (200 - (3 * 2) - 16) content height: 300; viewable width: 178; viewable height: 194; // (200 - (3 * 2)) As per the documentation, both percentage-based layout and constraints-based layout should follow the content co-ordinates. Unfortunately that doesn't seem to be the way it works right now. See this example: <mx:Canvas id="box2" borderStyle="solid" borderThickness="3" width="200" height="200"> <mx:Button id="btn2" label="Test 2" right="0" height="300" /> <mx:Button id="btn3" label="Test 3" bottom="0" /> </mx:Canvas> "Test 2" is aligned to the right, but part of it is hidden behind the scrollbar. "Test 3" is aligned to the bottom but not the bottom of the content area. Bug or feature? I don't know, but it's not what I'd expect. Whew. Manish
