Title problem with NavigationGroup using Alloy

Hi. I'm playing around with my first Alloy app (SDK 3.1.1.GA) and I'm doing something wrong with a NavigationGroup and/or TabGroup. In my index.xml view I'm requiring a view (eg. planner.xml) for each of the tabs, then in my 'planner.xml' view I've have a NavigationGroup with a LeftNavButton, TitleControl, and RightNavButton. Then problem is, the NavigivationGroup items are appearing below the main navigation bar. What am I doing wrong?

index.xml

<Alloy>
    <TabGroup>
        <Tab title="Map" icon="tab_map.png">
            <Require type="view" src="map" id="mapTab"/>    
        </Tab>
        <Tab title="Planner" icon="tab_planner.png">
            <Require type="view" src="planner" id="plannerTab"/>
        </Tab>
        <Tab title="Media" icon="tab_media.png">
            <Require type="view" src="media" id="mediaTab"/>
        </Tab>
        <Tab title="Friends" icon="tab_friends.png">
            <Require type="view" src="friends" id="friendsTab"/>
        </Tab>
        <Tab title="More" icon="tab_more.png">
            <Require type="view" src="more" id="moreTab"/>
        </Tab>
    </TabGroup>
</Alloy>

$.index.open();

<Alloy>
    <Window>
        <NavigationGroup>
            <Window>
                <LeftNavButton>
                    <Button>Left</Button>
                </LeftNavButton>
                <TitleControl>
                    <Label>Planner</Label>
                </TitleControl>
                <RightNavButton>
                    <Button>Right</Button>
                </RightNavButton>
            </Window>
        </NavigationGroup>
        <Label id="label">Test</Label>
    </Window>
</Alloy>

$.planner.open();