<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" viewSourceURL="srcview/index.html" xmlns:flux="com.openflux.*" backgroundColor="#eeeeee" xmlns:openflux="http://www.openflux.org/2008" xmlns:local="*">
    
    <!-- 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>
    
    <!-- set custom view via css -->
    <mx:Style>
        DataGridRow {
            view: ClassReference("MyCustomRowView");
        }
    </mx:Style>
    
    <!-- array data -->
    <mx:ArrayCollection id="data1">
        <mx:Object name="Joe" phone="123" email="joe@joe.com" desc="Hey there this is great stuff. Hey there this is great stuff. Hey there this is great stuff. Hey there this is great stuff."/>
        <mx:Object name="Bob" phone="456" email="bob@bob.com" desc="Hey there this is great stuff. Hey there this is great stuff. Hey there this is great stuff. Hey there this is great stuff."/>
        <mx:Object name="Jim" phone="789" email="jim@jim.com" desc="Hey there this is great stuff. Hey there this is great stuff. Hey there this is great stuff. Hey there this is great stuff."/>
        <mx:Object name="Ned" phone="111" email="ned@ned.com" desc="Hey there this is great stuff. Hey there this is great stuff. Hey there this is great stuff. Hey there this is great stuff."/>
        <mx:Object name="Ted" phone="222" email="ted@ted.com" desc="Hey there this is great stuff. Hey there this is great stuff. Hey there this is great stuff. Hey there this is great stuff."/>
        <mx:Object name="Tim" phone="333" email="tim@tim.com" desc="Hey there this is great stuff. Hey there this is great stuff. Hey there this is great stuff. Hey there this is great stuff."/>
    </mx:ArrayCollection>
    
    <!-- data grid component -->
    <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:Application>