Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

DataFilterLib – Using the DataFilterLib with ActionScript code only

Someone raised an issue a while ago on my DataFilterLib project:

Creating DataSetFilter in Actionscript

If you are not familiar with the DataFilterLib capabilities, this article will explain everything you need to know about it, including examples:

DataFilterLib – Filtrez votre donnée de manière simple et dynamique

As the person who raised the issue doesn't seem to be a native French speaker, this will be my first post in english on this blog .

So this issue is actually more of a lack of documentation than a bug or anything. Every example is written in MXML, using Binding mechanisms and if you are not so familiar with ActionScript code, you might run into some issues.

Here was the MXML code to create the "Very Simple Example":

...
  <mx:Script source="../data/StateData.as"/>

  <filter:DataFilterSet id="filterSet" data="{statesData}">
    <filter:dataFilterParameters>
      <filter:DataFilterParameters id="simpleParam" filterType="{DataFilterType.SINGLE_VALUE}" filterKeys="state" filterOperator="{DataFilterSingleValueOperator.STARTS_WITH}"
                                   filterValues="{stateInput.text}"/>
    </filter:dataFilterParameters>
  </filter:DataFilterSet>

  <mx:Label text="Filter By State Name (Starts With)" fontSize="14" fontWeight="bold"/>
  <mx:TextInput id="stateInput"/>
...

The "StateData.as" file only contains an ArrayCollection filled with USA States and some more data, named "statesData". The data wont be dynamically changed, the Data Binding is only here to set the "data" property on the DataFilterSet once it's set. Also, the "filterType" and "filterOperator" properties use Data Binding on public static constants. The curly braces aren't used for Data Binding in that situation, just to set the properties to a non-String value (class constants). We could as well have set the String value corresponding to the constant but this way, we have compile-time type checking and auto-completion.

The only "real and useful" Data Binding here is used on the "filterValues" proprties. It will change the filterValues every time the user type something in the TextInput, so that we have filtering on each user keystroke.

The ActionScript code of this example is quite straightforward. We simply do the same instanciations and assignation at CreationComplete:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" paddingLeft="20"
         paddingRight="20" creationComplete="onCreationComplete();">
  <mx:Script source="../data/StateData.as"/>
  <mx:Script>
    <![CDATA[
      import mx.binding.utils.BindingUtils;
      import com.fnicollet.datafilter.filter.DataFilterSingleValueOperator;
      import com.fnicollet.datafilter.filter.DataFilterType;
      import com.fnicollet.datafilter.filter.DataFilterParameters;
      import com.fnicollet.datafilter.filter.DataFilterSet;
      private var _dataFilterSet: DataFilterSet = null;
      private var _dataFilterParameters: DataFilterParameters = null;

      private function onCreationComplete():void {
        // instanciation of the global DataFilterSet
        _dataFilterSet = new DataFilterSet;
        // setting the data the DataFilterSet will filter (our USA States)
        _dataFilterSet.data = statesData;
        // DataFilterParameters creation
        // here, we are going to create only one DataFilterParameters Object but
        // we could create as many as we want if we want to cumulate filters
        _dataFilterParameters = new DataFilterParameters;
        _dataFilterParameters.filterType = DataFilterType.SINGLE_VALUE;
        _dataFilterParameters.filterKeys = "state";
        _dataFilterParameters.filterOperator = DataFilterSingleValueOperator.STARTS_WITH;
        // we create a Binding between the stateInput.text property and the DataFilterParameters proprerty
        BindingUtils.bindProperty(_dataFilterParameters, "filterValues", stateInput, "text");
        // once we created our DataFilterParameters Object, we add it
        // to the DataFilterSet:
        _dataFilterSet.dataFilterParameters = [_dataFilterParameters];
      }
    ]]>
  </mx:Script>

Maybe the tricky part is to recreate the MXML Binding behaviour in ActionScript. This is done using the BindingUtils class from Flex. From that point, the example works exactly the same as the MXML example. This is now part of the DataFilterLib example gallery (2nd tab) :