[flexcoders] Problem with code in Flex 2: Training from the Source book. Help!

[Abe Burnett]

Hi there,

I've recently purchased the book, Flex 2: Training from the Source.
I've hit on a problem with the code in one of the lessons. 

Basically, given the following code (which I've triple checked is
correct--per the book, anyway), I end up with Sales Chart superimposed
(it appears) over both Category Chart and Comparison Chart (which
share a VBox). This is in contrast to the image in the book which
depicts the Sales Chart on the left, and Category Chart above
Comparison Chart to the Right. I can somewhat fix the problem by
wrapping Sales Chart and the VBox enclosing Category Chart and
Comparison Chart into an HBox, but it still doesn't look as
aesthetically pleasing as the image on page 58 of the book. 

Has anyone else had the same problem with this book, and how is it
resolved? 

The code:

I've recently purchased your excellent book, Flex 2: Training from the
Source. I'm plowing through Lesson 3 and run into a case where my
results don't match what the book suggests I should have. Opening the
code provided on the CD indicates that whatever error I have exists in
the code on CD too (so it's not just me--user/learner operator).  The
problem is that the code for Dashboard.mxml as instructed ends up with
views laying on top of one another. My VBox "rightCharts" laying under
(I believe) my Panel "sales." I'm very new to Flex, so I thought I'd
seek your assistance while I continue to try and figure out what's
wrong. I did find one partial solution to the layout problem--a
solution that at least puts the VBox for Category Chart and Comparison
Chart on the right side of the screen and out of the way of the Panel
Sales Chart. That solution involves wrapping both the Panel Sales
Chart and the VBox enclosing Category Chart and Comparison Chart in an
HBox. The problem with this solution is that it doesn't nicely offset
the Sales Chart/Category Chart/Comparison Chart as depicted on page 58
of the book. Instead it has them all laid out correctly, but the
borders of each run from the very bottom of the screen to the very top
of the screen, underneath the ApplicationControlBar. And from one side
of the screen to the other. Layed out correctly, but not aesthetically
pleasing as the book depicts. I'll keep playing with it, but in the
meantime, this code doesn't render the desired results that the book
indicates it should:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute">
    <mx:ApplicationControlBar dock="true">
        <mx:LinkButton label="All"/>
        <mx:LinkButton label="Sales"/>
        <mx:LinkButton label="Categories"/>
        <mx:LinkButton label="Comparison"/>
    </mx:ApplicationControlBar>

    <mx:Panel id="sales"
        width="100%" height="100%"
        title="Sales Chart">
        <mx:ControlBar>
        </mx:ControlBar>
    </mx:Panel>

    <mx:VBox id="rightCharts"
        width="100%" height="100%">
        <mx:Panel id="type"
            width="100%" height="100%"
            title="Category Chart">
            <mx:ControlBar>
            </mx:ControlBar>
        </mx:Panel>
        <mx:Panel id="comp"
            width="100%" height="100%"
            title="Comparison Chart">
            <mx:ControlBar>
            </mx:ControlBar>
        </mx:Panel>
    </mx:VBox>
   
</mx:Application>