<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html" xmlns:flux="com.openflux.*" backgroundColor="#eeeeee">
    <mx:Script>
        <![CDATA[
            import com.openflux.core.IFluxDataGridColumn;
            public function phoneLabel(item:Object, column:IFluxDataGridColumn):Object {
                return String(item[column.dataField]) + "-FLEX";
            }
        ]]>
    </mx:Script>    
    
    <mx:ArrayCollection id="data1">
        <mx:Object name="Joe" phone="123" email="joe@joe.com"/>
        <mx:Object name="Bob" phone="456" email="bob@bob.com"/>
        <mx:Object name="Jim" phone="789" email="jim@jim.com"/>
    </mx:ArrayCollection>
    <mx:ArrayCollection id="data2">
        <mx:Object name="Ned" phone="111" email="ned@ned.com"/>
        <mx:Object name="Ted" phone="222" email="ted@ted.com"/>
        <mx:Object name="Tim" phone="333" email="tim@tim.com"/>
    </mx:ArrayCollection>
    
    <mx:HBox verticalCenter="0" horizontalCenter="0">
        <mx:VBox>
            <mx:Label text="OpenFlux DataGrid:" fontWeight="bold"/>
            <flux:DataGrid data="{data1}">
                <flux:DataGridColumn headerText="Name" dataField="name" width="150"/>
                <flux:DataGridColumn headerText="Phone" dataField="phone" dataFunction="phoneLabel" width="150"/>
                <flux:DataGridColumn headerText="Email" dataField="email" width="150"/>
            </flux:DataGrid>
            
            <mx:Text htmlText="Supports multiple selection, drag 'n drop from/to Flex list, double click to edit cell, draggable headers to rearrange columns and selectedable header to toggle sorting. This is alpha with many issues but it's a great start.&lt;br&gt;&lt;br&gt;View source is enabled :)" width="100%"/>
        </mx:VBox>
        
        <mx:VBox>
            <mx:Label text="Flex List:" fontWeight="bold"/>
            <mx:List dragEnabled="true" dragMoveEnabled="true" dropEnabled="true"
                labelField="name"
                dataProvider="{data2}" width="100"/>
        </mx:VBox>
    </mx:HBox>

</mx:Application>