Difference between Flex SDK’s Matching Collator and Sorting Collator

This article was originally written in English. Text in other languages was provided by machine translation.

Flex SDK has two kinds of collators. Do you know the differences?

First of all, let me explain what a Collator is. The Flex SDK Collators are classes that are designed to compare two strings. Their compare functions return a numeric value to tell which of the two items is smaller or larger.

Here is an example:

<fx:Declarations>
    <s:SortingCollator id="c1"/>
    </fx:Declarations>
    <s:VGroup>
        <s:TextInput id="uiInput1" text="ABC"/>
        <s:TextInput id="uiInput2" text="ABC"/>
        <mx:Text id="uiOutput" text="{c1.compare(uiInput1.text, uiInput2.text)}"/>
    </s:VGroup>

This example shows 0 as the compare result by default. As you alter the inputs, the result becomes -1 if the first input is smaller or 1 if larger. See the screenshots below.

 width=

 width=

 width=

The difference in sorting

Now, let’s talk about the differences of Matching and Sorting Collators. Actually, they are essentially same but they have given some specific initial collation parameters good for general string matching (MatchingCollator) or parameters good for general string sorting (SortingCollator). Example below illustrates why two different collators are useful.

Assume you have following items in your Array. You want to sort the items and find a specific string from the items.

  • naïve
  • Naïve
  • NAÏVE
  • naive
  • Naive
  • NAIVE
  • adolescent
  • youthful

If you sort items using a SortingCollator class with “en_US” (English spoken in U.S.) locale, you get following sort result.

  • adolescent
  • naive
  • Naive
  • NAIVE
  • naïve
  • Naïve
  • NAÏVE
  • youthful

This ordering makes sense for most usages. (At least that is what we have hoped.) Lowercase letters come first over upper cases; letters without accent come first over ones with accent.

On the other hand, if you sort the items using a MatchingCollator, you get following result. (Result may vary as some attributes are ignored.)

  • adolescent
  • Naïve
  • NAÏVE
  • naive
  • naïve
  • NAIVE
  • Naive
  • youthful

You may notice that upper/lowercase ordering and accent character ordering are not consistent with a MatchingCollator class. In fact, the MachingCollator class is not designed for sorting.

The difference in matching

Now, assume you want to search a specific string, “naive“, from the list. With a SortingCollator class, you get following result:

  • naive

Yes, only one string with a SortingCollator class.

On the other hand, with a MatchingCollator class, you get following result.

  • Naïve
  • NAÏVE
  • naive
  • naïve
  • NAIVE
  • Naive

As you can see, the string comparison was done in more lenient manner with MatchingCollator class. Often such leniency is desired when searching strings.

Although SortingCollator and MatchingCollator behave differently as you have seen above, those classes are pretty much same underneath. In fact, they can mute to the other sibling by setting their properties. If you need to control more details of sorting/matching behavior, you also manipulate the properties. Please see the Flex SDK references for more details.

References

The example program used in this article

<?xml version="1.0" encoding="utf-8"?>
   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   >
   <fx:Declarations>
      <s:SortingCollator id="sortingCollator" locale="en_US"/>
      <s:MatchingCollator id="matchingCollator" locale="en_US"/>
      <s:Sort id="sort"/>
      <s:ArrayCollection id="arrayCollection" sort="{sort}" source="{wordList}"/>
   </fx:Declarations>
   <fx:Script>
      <![CDATA[
         private static const wordList:Array = [
            "naïve", "Naïve", "NAÏVE",
            "naive", "Naive", "NAIVE",
            "adolescent", "youthful" ];
         private function setCollator(useSortingCollator:Boolean):void
         {
            const collator:Object = useSortingCollator ?
            sortingCollator : matchingCollator;
            sort.compareFunction = function (a:Object, b:Object, fields:Array):int
               { return collator.compare(a as String, b as String); }
            arrayCollection.refresh();
            uiResult.text = "Sort Result:\n" + arrayCollection.toString();
            uiResult.text += "\n\nStinrgs equal to 'naive' are:\n";
            for (var i:uint = 0; i < arrayCollection.length; i++)
            {
               if (!collator.compare(arrayCollection[i], "naive"))
               uiResult.text += arrayCollection[i] + "\n";
            }
         }
      ]]>
   </fx:Script>
   <s:VGroup paddingTop="20" paddingBottom="20"
         paddingLeft="20" paddingRight="20" height="100%">
      <s:Button label="Use SortingCollator" click="setCollator(true)"/>
      <s:Button label="Use MatchingCollator" click="setCollator(false)"/>
      <s:TextArea id="uiResult" height="100%"/>
   </s:VGroup>
    </s:Application>

Leave a Reply