<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:flux="http://www.openflux.org/2008"
    layout="horizontal" backgroundColor="#ffffff" viewSourceURL="srcview/index.html">
    
    <!-- data function example -->
    <mx:Script>
        <![CDATA[
            import com.openflux.core.IFluxDataGridColumn;
            public function phoneLabel(item:Object, column:IFluxDataGridColumn):Object {
                return String(item[column.dataField]) + "-FLEX";
            }
        ]]>
    </mx:Script>
    
    <!-- tree component -->
    <flux:Tree data="{data1}" width="200" />
    
    <!-- data grid component -->
    <flux:DataGrid data="{data2}">
        <flux:TreeDataGridView/>
        <flux:DataGridColumn headerText="Name" dataField="label" width="150"/>
        <flux:DataGridColumn headerText="Phone" dataField="phone" dataFunction="phoneLabel" width="150"/>
        <flux:DataGridColumn headerText="Email" dataField="email" width="150"/>
    </flux:DataGrid>

    <!-- tree array data -->
    <mx:ArrayCollection id="data1">
        <mx:Object label="Joe" phone="123" email="joe@joe.com">
            <mx:children>
                <mx:ArrayCollection>
                    <mx:Object label="Bob" phone="456" email="bob@bob.com">
                        <mx:children>
                            <mx:ArrayCollection>
                                <mx:Object label="Ted" phone="222" email="ted@ted.com"/>
                                <mx:Object label="Tim" phone="333" email="tim@tim.com"/>
                            </mx:ArrayCollection>
                        </mx:children>
                    </mx:Object>
                    <mx:Object label="Jim" phone="789" email="jim@jim.com"/>                    
                </mx:ArrayCollection>
            </mx:children>
        </mx:Object>
        <mx:Object label="Ned" phone="111" email="ned@ned.com">
            <mx:children>
                <mx:ArrayCollection>
                    <mx:Object label="Ted" phone="222" email="ted@ted.com"/>
                    <mx:Object label="Tim" phone="333" email="tim@tim.com"/>
                </mx:ArrayCollection>
            </mx:children>
        </mx:Object>
    </mx:ArrayCollection>
    
    <!-- data grid array data -->
    <mx:ArrayCollection id="data2">
        <mx:Object label="Joe" phone="123" email="joe@joe.com">
            <mx:children>
                <mx:ArrayCollection>
                    <mx:Object label="Bob" phone="456" email="bob@bob.com">
                        <mx:children>
                            <mx:ArrayCollection>
                                <mx:Object label="Ted" phone="222" email="ted@ted.com"/>
                                <mx:Object label="Tim" phone="333" email="tim@tim.com"/>
                            </mx:ArrayCollection>
                        </mx:children>
                    </mx:Object>
                    <mx:Object label="Jim" phone="789" email="jim@jim.com"/>                    
                </mx:ArrayCollection>
            </mx:children>
        </mx:Object>
        <mx:Object label="Ned" phone="111" email="ned@ned.com">
            <mx:children>
                <mx:ArrayCollection>
                    <mx:Object label="Ted" phone="222" email="ted@ted.com"/>
                    <mx:Object label="Tim" phone="333" email="tim@tim.com"/>
                </mx:ArrayCollection>
            </mx:children>
        </mx:Object>
    </mx:ArrayCollection>
</mx:Application>