Spark List Progressive Multiple Selection

By request, I’ve made this simple tutorial to show how to make a Checklist component that extends from a Spark List. On the other hand this is to also show how easy it is to customize the Spark List component. This tutorial is available in cookbooks together with an example file.

Check it out there too: http://cookbooks.adobe.com/post_Multiple_checklist_like_selection_with_Spark_List-18957.html

The Spark List control can already do a progressive multiple selection but only when you’re in a touch interaction mode or holding the CTRL key. The Touch mode interaction is set only when you’re in a Touch device, since most of these devices don’t have a keyboard. But if you’re in a desktop environment the default handling is that the Spark List depends on the CTRL key. So in order to do a progressive or checklist-like selection, we will create a component that extends from the Spark List control and override calculateSelectedIndices method.

First, let’s create a class that extends from a Spark List and define that allowMultipleSelection is set to true:

package com.staticfunction.components
{

   import spark.components.List;

   public class CheckList extends List
   {
       public function CheckList()
       {
           super();
           allowMultipleSelection = true;
       }
   }
}

Then override calculateSelectedIndices so that it won’t depend on the CTRL key.

override protected function calculateSelectedIndices(index:int, shiftKey:Boolean, ctrlKey:Boolean):Vector.<int>
{
     return super.calculateSelectedIndices(index, shiftKey, true);
}

As you can see above, we force the last parameter to true. Since we’re doing a checklist like selection, we don’t want the user to always hold the CTRL key.

You can optionally have this feature turn on only when you want it. You can do this by defining a flag like selectionRequiresModKey and reference from it whether to force the progressive selection or not.

let’s define a variable for selectionRequiresModKey and set it’s value to true by default. Then, use it in our overriden calculateSelectedIndices method for reference if we will force the progressive selection or not.

public var selectionRequiresModKey:Boolean = true;

override protected function calculateSelectedIndices(index:int, shiftKey:Boolean, ctrlKey:Boolean):Vector.<int>
{
      if (!selectionRequiresModKey)
          return super.calculateSelectedIndices(index, shiftKey, true);
      else
          return super.calculateSelectedIndices(index, shiftKey, ctrlKey);
}

Our final code:

package com.staticfunction.components
{

   import spark.components.List;

   public class CheckList extends List
   {
       public function CheckList()
       {
           super();
           allowMultipleSelection = true;
       }
   }

   public var selectionRequiresModKey:Boolean = true;

   override protected function calculateSelectedIndices(index:int, shiftKey:Boolean, ctrlKey:Boolean):Vector.<int>
   {
        if (!selectionRequiresModKey)
            return super.calculateSelectedIndices(index, shiftKey, true);
        else
            return super.calculateSelectedIndices(index, shiftKey, ctrlKey);
   }
}

That’s all there is to it. If you want to see it in action, I’ve included an example with the .fxp or .zip file I’ve uploaded for you to download.

To download the file, go tohttp://cookbooks.adobe.com/post_Multiple_checklist_like_selection_with_Spark_List-18957.html