<?xml version="1.0" encoding="utf-8"?>
<!-- based on the DataGrid example from the component explorer -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    viewSourceURL="srcview/index.html"
    xmlns:components="components.*" width="600" height="350">
    
    <mx:Style source="scrawl4.css"/>
    <mx:Model id="employees" source="employees.xml"/>

    <mx:VDividedBox height="100%" width="100%"
        paddingTop="10" paddingLeft="10" paddingRight="10">

        <components:ScrawlGrid id="dg" width="100%" height="50%" dataProvider="{employees.employee}">
            <components:columns>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
                <mx:DataGridColumn dataField="email" headerText="Email"/>
            </components:columns>
        </components:ScrawlGrid>

        <mx:HDividedBox width="100%" height="50%">
            <mx:Form width="50%" height="100%">
                <mx:FormItem label="Name">
                    <mx:Label text="{dg.selectedItem.name}"/>
                </mx:FormItem>
                <mx:FormItem label="Email">
                    <mx:Label text="{dg.selectedItem.email}"/>
                </mx:FormItem>
                <mx:FormItem label="Phone">
                    <mx:Label text="{dg.selectedItem.phone}"/>
                </mx:FormItem>
            </mx:Form> 
            <components:ScrawlComboBox width="50%" dataProvider="[Lorem, Ipsum, Dolor, Amet]"/>
        </mx:HDividedBox>      
    </mx:VDividedBox>
</mx:Application>