Flex Examples » sortCompareFunction

Setting a DataGrid control’s data provider to an XML object in Flex

Peter deHaan — Thu, 06 Nov 2008 06:05:21 +0000

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

data/log.xml

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

Creating a custom sort on a DataGrid control in Flex

Peter deHaan — Thu, 10 Apr 2008 04:12:10 +0000

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

tests.xml




    
        One (old)
        Un (new)
    
    
        Two (old)
        Deux (new)
    

    
        Eight (old)
        Huit (new)

View source is enabled in the following example.

Performing case [in]sensitive sorts using the DataGrid control in Flex

Peter deHaan — Sat, 08 Mar 2008 03:03:21 +0000

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

View source is enabled in the following example.

Formatting a Flex DataGrid control using a custom item renderer

Peter deHaan — Tue, 21 Aug 2007 04:41:48 +0000

The following example formats a column in a Flex DataGrid and uses a custom item renderer to color the text red in a cell if a price is below $0. If the item is greater than $0, the test is displayed in black. The price column is also formatted using a custom label function, which uses a CurrencyFormatter, and finally, the data grid column uses a custom sort function to properly sort numeric columns.

Full code after the jump.

"1.0" encoding="utf-8"?>

 name="DataGridColumn_itemRenderer_test "
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    
        
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.utils.ObjectUtil;
 
            private function price_labelFunc(item:Object, column:DataGridColumn):String {
                return currencyFormatter.format(item.@price);
            }
 
            private function price_sortCompareFunc(itemA:Object, itemB:Object):int {
                return ObjectUtil.numericCompare(itemA.@price, itemB.@price);
            }
        ]]>
    
 
     id="itemsXML">
        >
            "Item 1" price="1.32" />
            "Item 2" price="-12.23" />
            "Item 3" price="4.96" />
            "Item 4" price="-0.94" />
        >
    >
 
    >
        .centered {
            text-align: center;
        }
    >
 
     id="currencyFormatter"
            precision="2"
            useNegativeSign="false" />
 
     id="dataGrid" dataProvider="{itemsXML.item}">
        >
             dataField="@name"
                    headerText="Name:"
                    headerStyleName="centered" />
 
             dataField="@price"
                    headerText="Price:"
                    textAlign="right"
                    headerStyleName="centered"
                    labelFunction="price_labelFunc"
                    sortCompareFunction="price_sortCompareFunc"
                    itemRenderer="PriceLabel" />
        >
    >
 
>

And the custom item renderer, PriceLabel.as, is as follows:

/** http://blog.flexexamples.com/2007/08/20/formatting-a-flex-datagrid-control-using-a-custom-item-renderer/ */
package {
    import mx.controls.Label;
    import mx.controls.listClasses.*;
 
    public class PriceLabel extends Label {
 
        private const POSITIVE_COLOR:uint = 0x000000; // Black
        private const NEGATIVE_COLOR:uint = 0xFF0000; // Red
 
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
 
            /* Set the font color based on the item price. */
            setStyle("color", (parseFloat(data.@price) <= 0) ? NEGATIVE_COLOR : POSITIVE_COLOR);
        }
    }
}

View source is enabled in the following example.

Sorting date columns in a DataGrid

Peter deHaan — Sun, 12 Aug 2007 15:51:01 +0000

Here’s an example of sorting a column of dates in a Flex DataGrid. The dates start out as Strings (such as “04/14/1980″) so you create a custom sortCompareFunction on that DataGrid column which converts the strings to dates so Flex will sort the dates in sequential order (as oppsed to string order). Hope that helps somebody out there.

I also created a little tooltip on the date column which shows the dates in a somewhat more readable form (“April 14 1980″) using the DataGridColumn object’s showDataTips and dataTipFunction properties.

Full code after the jump.

"1.0" encoding="utf-8"?>

 xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    
        
            import mx.utils.ObjectUtil;
 
            private function date_sortCompareFunc(itemA:Object, itemB:Object):int {
                /* Date.parse() returns an int, but
                   ObjectUtil.dateCompare() expects two
                   Date objects, so convert String to
                   int to Date. */
                var dateA:Date = new Date(Date.parse(itemA.dob));
                var dateB:Date = new Date(Date.parse(itemB.dob));
                return ObjectUtil.dateCompare(dateA, dateB);
            }
 
            private function date_dataTipFunc(item:Object):String {
                return dateFormatter.format(item.dob);
            }
        ]]>
    
 
     id="arrColl">
        >
            >
                 name="User A" dob="04/14/1980" />
                 name="User B" dob="01/02/1975" />
                 name="User C" dob="12/30/1977" />
                 name="User D" dob="10/27/1968" />
            >
        >
    >
 
     id="dateFormatter" formatString="MMMM D, YYYY" />
 
     id="dataGrid" dataProvider="{arrColl}">
        >
             dataField="name"
                    headerText="Name:" />
 
             dataField="dob"
                    headerText="Date of birth:"
                    sortCompareFunction="date_sortCompareFunc"
                    showDataTips="true"
                    dataTipFunction="date_dataTipFunc" />
        >
    >
 
>

View source is enabled in the following example.

Loading XML at run-time using the mx:HTTPService tag

Peter deHaan — Fri, 27 Jul 2007 14:10:28 +0000

In the previous post we looked at how to load an XML document in at compile-time and have it embedded in our Flex application. But that technique really only works if the XML data in question never changes. What if you had an XML document that was constantly changing on a daily, or hourly, basis. For example, consider an RSS reader application. If the XML was loaded and embedded in the XML document at compile-time, the RSS would never get updated. And while that may be good in some cases (such as a kiosk, or somewhere without an internet connection where you wanted to display static information), in many cases it may not work.

So, lets take a look at using the mx:HTTPService tag to dynamically load an XML file.

The following example dynamically loads an XML file at run-time using the mx:HTTPService tag, rather than using mx:XML and grabbing the data at compile-time:

View MXML





    
    
    

    
         itemB) {
                    return 1;
                } else if (itemA < itemB) {
                    return -1;
                } else {
                    return 0;
                }
            }
        ]]>

xml/cuePoints.xml

View source is enabled in the following example.

The first thing you notice is that the code is nearly identical to the previous example which used mx:XML. The subtle differences are that instead of mx:XML we used mx:HTTPService to get the data. Also, we now listen for the creationComplete event for on the Application tag where we trigger the XML loading using the HTTPService.send() method. Finally, the locations of the files changed slightly. Now instead of the XML being calculated relative to the MXML file, the XML gets placed relative to the generated SWF file. All the other code stayed the same.

In case you’re curious, the sample XML document in question comes from a Quick Start I wrote for the Flash CS3 release, “Flash Quick Starts: Using the Adobe Flash CS3 Video Encoder“.

Displaying XML data in a DataGrid

Peter deHaan — Fri, 27 Jul 2007 06:44:15 +0000

OK, hopefully this example is a bit more interesting than a few of my previous ones. Today’s handy tip comes in the form of loading and embedding an XML file in our Flex application at compile-time (as opposed to dynamically loading at run-time, which we’ll save for a future example), and displaying that information in a DataGrid control.

The following example loads an XML file at compile-time using the mx:XML and displays the information in a DataGrid:

View cuePoints.xml

View MXML





    

    
    

    
         itemB) {
                    return 1;
                } else if (itemA < itemB) {
                    return -1;
                } else {
                    return 0;
                }
            }
        ]]>

View source is enabled in the following example.

In case you’re curious, the sample XML document in question comes from a Quick Start I wrote for the Flash CS3 release, “Flash Quick Starts: Using the Adobe Flash CS3 Video Encoder“.