Flex Examples » stringCompare http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting a DataGrid control’s data provider to an XML object in Flex http://blog.flexexamples.com/2008/11/05/setting-a-datagrid-controls-data-provider-to-an-xml-object-in-flex/ http://blog.flexexamples.com/2008/11/05/setting-a-datagrid-controls-data-provider-to-an-xml-object-in-flex/#comments Thu, 06 Nov 2008 06:05:21 +0000 Peter deHaan http://blog.flexexamples.com/2008/11/05/setting-a-datagrid-controls-data-provider-to-an-xml-object-in-flex/ The following example shows how you can use an XML object as a data provider for a Flex DataGrid control and use a custom label function to display the XML node’s name.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/11/05/setting-a-datagrid-controls-data-provider-to-an-xml-object-in-flex/ --> <mx:Application name="DataGrid_dataProvider_XML_test2" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> [...]]]> The following example shows how you can use an XML object as a data provider for a Flex DataGrid control and use a custom label function to display the XML node’s name.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/05/setting-a-datagrid-controls-data-provider-to-an-xml-object-in-flex/ -->
<mx:Application name="DataGrid_dataProvider_XML_test2"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.utils.ObjectUtil;

            private function labelFunc(item:XML, col:DataGridColumn):String {
                return item.name();
            }

            private function nameSortCompareFunc(itemA:XML, itemB:XML):int {
                return ObjectUtil.stringCompare(dataGridCol1.itemToLabel(itemA), dataGridCol1.itemToLabel(itemB), true);
            }

            private function typeSortCompareFunc(itemA:XML, itemB:XML):int {
                return ObjectUtil.numericCompare(itemA.@type, itemB.@type);
            }
        ]]>
    </mx:Script>

    <mx:XML id="xmlDP" source="data/log.xml" />

    <mx:DataGrid id="dataGrid"
            dataProvider="{xmlDP.children()}"
            verticalScrollPolicy="on">
        <mx:columns>
            <mx:DataGridColumn id="dataGridCol1"
                    headerText="Name"
                    labelFunction="labelFunc"
                    sortCompareFunction="nameSortCompareFunc"
                    width="80"/>
            <mx:DataGridColumn id="dataGridCol2"
                    dataField="@type"
                    headerText="Type"
                    sortCompareFunction="typeSortCompareFunc"
                    width="50" />
            <mx:DataGridColumn id="dataGridCol3"
                    dataField="@message"
                    headerText="Message"
                    width="200" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

data/log.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/05/setting-a-datagrid-controls-data-provider-to-an-xml-object-in-flex/ -->
<log>
    <error type="13" message="Cannot do something or other." />
    <warning type="49" message="Whoa, that was close!" />
    <error type="134" message="Abort! Abort!" />
    <error type="99" message="Wait, do you smell smoke?" />
</log>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/05/setting-a-datagrid-controls-data-provider-to-an-xml-object-in-flex/ -->
<mx:Application name="DataGrid_dataProvider_XML_test2"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:XML id="xmlDP" source="data/log.xml" />

    <mx:Script>
        <![CDATA[
            import mx.core.ScrollPolicy;
            import mx.controls.DataGrid;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.utils.ObjectUtil;

            private var dataGrid:DataGrid;
            private var dataGridCol1:DataGridColumn;
            private var dataGridCol2:DataGridColumn;
            private var dataGridCol3:DataGridColumn;

            private function init():void {
                dataGridCol1 = new DataGridColumn();
                dataGridCol1.headerText = "Name";
                dataGridCol1.labelFunction = labelFunc;
                dataGridCol1.sortCompareFunction = nameSortCompareFunc;
                dataGridCol1.width = 80;

                dataGridCol2 = new DataGridColumn("@type");
                dataGridCol2.headerText = "Type";
                dataGridCol2.sortCompareFunction = typeSortCompareFunc;
                dataGridCol2.width = 50;

                dataGridCol3 = new DataGridColumn("@message");
                dataGridCol3.headerText = "Message";
                dataGridCol3.width = 200;

                dataGrid = new DataGrid();
                dataGrid.columns = [dataGridCol1, dataGridCol2, dataGridCol3];
                dataGrid.dataProvider = xmlDP.children();
                dataGrid.verticalScrollPolicy = ScrollPolicy.ON;
                addChild(dataGrid);
            }

            private function labelFunc(item:XML, col:DataGridColumn):String {
                return item.name();
            }

            private function nameSortCompareFunc(itemA:XML, itemB:XML):int {
                return ObjectUtil.stringCompare(dataGridCol1.itemToLabel(itemA), dataGridCol1.itemToLabel(itemB), true);
            }

            private function typeSortCompareFunc(itemA:XML, itemB:XML):int {
                return ObjectUtil.numericCompare(itemA.@type, itemB.@type);
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/11/05/setting-a-datagrid-controls-data-provider-to-an-xml-object-in-flex/feed/ 6 Creating a custom sort on a DataGrid control in Flex http://blog.flexexamples.com/2008/04/09/creating-a-custom-sort-on-a-datagrid-control-in-flex/ http://blog.flexexamples.com/2008/04/09/creating-a-custom-sort-on-a-datagrid-control-in-flex/#comments Thu, 10 Apr 2008 04:12:10 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/09/creating-a-custom-sort-on-a-datagrid-control-in-flex/ The following example shows how you can create a custom sort on a Flex DataGrid control by using the SortField class and creating a custom compare function.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/04/09/creating-a-custom-sort-on-a-datagrid-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.collections.SortField; import mx.collections.Sort; import [...]]]> The following example shows how you can create a custom sort on a Flex DataGrid control by using the SortField class and creating a custom compare function.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/09/creating-a-custom-sort-on-a-datagrid-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.collections.SortField;
            import mx.collections.Sort;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.utils.ObjectUtil;

            private function sortOld():void {
                var sortField:SortField = new SortField();
                sortField.compareFunction = test2_compareFunc;
                sortField.descending = checkBox.selected;

                var oldSort:Sort = new Sort();
                oldSort.fields = [sortField];

                xmlListColl.sort = oldSort;
                xmlListColl.refresh();
            }

            private function sortNew():void {
                var sortField:SortField = new SortField();
                sortField.compareFunction = test3_compareFunc;
                sortField.descending = checkBox.selected;

                var sort:Sort = new Sort();
                sort.fields = [sortField];

                xmlListColl.sort = sort;
                xmlListColl.refresh();
            }

            private function resetSort():void {
                xmlListColl.sort = null;
                xmlListColl.refresh();
            }

            private function dataGridCol_labelFunc(item:XML, col:DataGridColumn):String {
                return item.*.(@name == col.dataField).text();
            }

            private function test2_compareFunc(itemA:XML, itemB:XML):int {
                var valueA:String = itemA.test2.text();
                var valueB:String = itemB.test2.text();
                return ObjectUtil.stringCompare(valueA, valueB);
            }

            private function test3_compareFunc(itemA:XML, itemB:XML):int {
                var valueA:String = itemA.test3.text();
                var valueB:String = itemB.test3.text();
                return ObjectUtil.stringCompare(valueA, valueB);
            }
        ]]>
    </mx:Script>

    <mx:XML id="tests" source="tests.xml" />
    <mx:XMLListCollection id="xmlListColl" source="{tests.test}" />

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox" label="descending:" labelPlacement="left" />

        <mx:Button label="Sort 'old'"
                click="sortOld();" />

        <mx:Button label="Sort 'new'"
                click="sortNew();" />

        <mx:Button label="Reset sort"
                click="resetSort();" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{xmlListColl}"
            width="300"
            verticalScrollPolicy="on"
            sortableColumns="true">
        <mx:columns>
            <mx:DataGridColumn dataField="old"
                    labelFunction="dataGridCol_labelFunc"
                    sortCompareFunction="test2_compareFunc" />
            <mx:DataGridColumn dataField="new"
                    labelFunction="dataGridCol_labelFunc"
                    sortCompareFunction="test3_compareFunc"  />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

tests.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/09/creating-a-custom-sort-on-a-datagrid-control-in-flex/ -->
<tests>
    <test name="group1">
        <test2 name="old">One (old)</test2>
        <test3 name="new">Un (new)</test3>
    </test>
    <test name="group2">
        <test2 name="old">Two (old)</test2>
        <test3 name="new">Deux (new)</test3>
    </test>

    <test name="group8">
        <test2 name="old">Eight (old)</test2>
        <test3 name="new">Huit (new)</test3>
    </test>
</tests>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/09/creating-a-custom-sort-on-a-datagrid-control-in-flex/feed/ 6 Performing case [in]sensitive sorts using the DataGrid control in Flex http://blog.flexexamples.com/2008/03/07/performing-case-insensitive-sorts-using-the-datagrid-control-in-flex/ http://blog.flexexamples.com/2008/03/07/performing-case-insensitive-sorts-using-the-datagrid-control-in-flex/#comments Sat, 08 Mar 2008 03:03:21 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/07/performing-case-insensitive-sorts-using-the-datagrid-control-in-flex/ The following example shows how you can perform numeric sorts, case sensitive sorts, or case insensitive sorts in the Flex DataGrid control by setting a custom sort compare function on the DataGridColumn using the sortCompareFunction property, the static ObjectUtil.numericCompare() method, and the static ObjectUtil.stringCompare() method.

Full code after the jump.

View MXML

[...]]]> The following example shows how you can perform numeric sorts, case sensitive sorts, or case insensitive sorts in the Flex DataGrid control by setting a custom sort compare function on the DataGridColumn using the sortCompareFunction property, the static ObjectUtil.numericCompare() method, and the static ObjectUtil.stringCompare() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/07/performing-case-insensitive-sorts-using-the-datagrid-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;

            private function index_sortCompareFunc(itemA:Object, itemB:Object):int {
                // Make sure itemA has an "index" property.
                if (!itemA.hasOwnProperty("index")) {
                    itemA.index = null;
                }
                // Make sure itemB has an "index" property.
                if (!itemB.hasOwnProperty("index")) {
                    itemB.index = null;
                }
                // Perform a numeric sort.
                return ObjectUtil.numericCompare(itemA.index, itemB.index);
            }

            private function value_sortCompareFunc(itemA:Object, itemB:Object):int {
                // Make sure itemA has a "value" property.
                if (!itemA.hasOwnProperty("value")) {
                    itemA.value = null;
                }
                // Make sure itemB has a "value" property.
                if (!itemB.hasOwnProperty("value")) {
                    itemB.value = null;
                }
                /**
                 * Perform a string sort. If the checkbox is selected
                 * do a case insensitive sort, otherwise, dont.
                 */
                return ObjectUtil.stringCompare(itemA.value, itemB.value, checkBox.selected);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object index="1" value="apple" />
                <mx:Object index="200" value="Bear" />
                <mx:Object index="3" value="corn" />
                <mx:Object index="40" value="Dragon" />
                <mx:Object value="eggplant" />
                <mx:Object index="5" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="case insensitive search:"
                labelPlacement="left"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid" dataProvider="{arrColl}">
        <mx:columns>
            <mx:DataGridColumn dataField="index"
                    sortCompareFunction="index_sortCompareFunc" />
            <mx:DataGridColumn dataField="value"
                    sortCompareFunction="value_sortCompareFunc" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/03/07/performing-case-insensitive-sorts-using-the-datagrid-control-in-flex/feed/ 0