Cairngorm Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    layout="vertical" minWidth="1024" minHeight="768"
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:observer="com.adobe.cairngorm.observer.*"
    xmlns:sample="sample.*">

    <sample:SelectablePM id="pm">
        <sample:people>
            <mx:ArrayCollection id="people">
                <observer:Person firstName="foo" lastName="bar" />
                <observer:Person firstName="foo2" lastName="bar2" />
                <observer:Person firstName="foo3" lastName="bar3" />
            </mx:ArrayCollection>
        </sample:people>
    </sample:SelectablePM>
	
    <mx:Form>
        <mx:FormItem label="SelectableChildProvider">
            <mx:ComboBox id="selectedItemCombo"
                dataProvider="{ people }" labelField="firstName" 
				selectedIndex="{ pm.selectableIndex }" 
				change="pm.selectPerson( selectedItemCombo.selectedItem )" />
        </mx:FormItem>
    </mx:Form>
	
    <observer:SelectableChildProvider 
        dataProvider="{ people }"
        childList="{ navigator }"
        selectedItem="{ pm.selectableItem }">
        <observer:itemRenderer>
            <mx:Component>
                <mx:VBox label="{ Person( data ).firstName }">
                    <mx:Script>
                        <![CDATA[
                            import com.adobe.cairngorm.observer.Person;
                        ]]>
                    </mx:Script>
                    <mx:Label text="{ Person( data ).lastName }" />
                </mx:VBox>
            </mx:Component>
        </observer:itemRenderer>
    </observer:SelectableChildProvider>

    <mx:TabNavigator id="navigator"
        width="400" height="200" 
		change="pm.selectPersonByIndex( navigator.selectedIndex )" />

</mx:Application>