Flash Actionscript 2 List Component and selecting multiple items without having to hold CTRL while clicking

Question

I am wondering if there is a way to allow users to select multiple items from my AS2 List component without having to hold CTRL while clicking. So they would be able to select/deselect individual items with a single click - effectively togglling the item on/off in exactly the same way you would do by holding CTRL while selecting.

Can anyone think of any usability guidelines for this sort of interaction? This is kind of like presenting a list of checkboxes (but nicer I think). Are there any examples out there of simialr interaction.

Does the AS2 list component allow this to be done? eg i would like to say list._ctrlAlwaysOn = true ;-)

thanks

Answer 1

Live Demo of my solution: http://codebundles.com/listDemo.swf

You could add a "check" infront of the options the user selects and remove the check if the user clicks it again, this way the user can de-select by tapping the object a second time.. I used to indexing and data on the list but here is a quick example that runs pretty smoothly! It looks really nice too!

list.addItemAt(0, "​item 1", 0)
list.addItemAt(1, "item 2", 1)
list.addItemAt(2, "item 3", 2)
list.addItemAt(3, "item 4", 3)
list.addItemAt(4, "item 5", 4)
list.addItemAt(5, "item 6", 5)
_root.onMouseUp = function() {
    selectedObject = (list.getSelectedItem().data)
    tempString = (list.getSelectedItem().label)
    withcheckString =  "✓​" + (list.getSelectedItem().label)
    var stringArray:Array=tempString.split("✓​"); 
    withoutcheckString = stringArray.join(""); 
    trace(tempString.indexOf("✓​"))
    if (tempString.indexOf("✓​") == -1) {
        list.replaceItemAt(selectedObject, withcheckString, selectedObject);
    } else if (tempString.indexOf("✓​") == 0) {
        list.replaceItemAt(selectedObject, withoutcheckString, selectedObject);
    }
}

*One bug I can see coming is if you have a scroll bar like in my live demo... clicking to move that will cause a "mouseUp" event to be called and remove/add a check on your last selected list item.. so you may want to detect if the user's _ymouse & _xmouse position are actually inside the list before running my "✓" replace code.. Shouldn't be to hard ;)
*also, the ctrl+clicking may not work anymore but you could still add code to fix that as well...

This same code will apply to the HTML.. but I'm sure there is better javascript stuff you can do with the html lists like highlighting the field instead of putting a check infront of it.. heck maybe even in AS2 you can highlight the field you have selected too....

Answer 2

Personally I would say you should use checkboxes, as they do exactly what you want and nobody expects a list to work this way.

Anyway it should be possible by handling the list's selectedIndices property manually. This is necessary because if the list is clicked (without holding ctrl) the so far selected indices are lost. Keeping track of those indices on your own can prevent that.

// stores selected indices
var selected:Array = new Array();

// handler when item is selected
var listHandler:Object = new Object();
listHandler.change = function(evt:Object) {
    // all selected elements are automatically cleared at this point
    var index = evt.target.selectedIndex; // clicked item
    for (i = 0; i < selected.length; i++) {
        if (selected[i] == index) {
            // index was already selected, remove it
            selected.splice(i, 1);
            evt.target.selectedIndices = selected; // reassign our own selection
            return;
        }
    } 
    // index wasn't selected
    selected.push(index);
    evt.target.selectedIndices = selected; // reassign our own selection
};

list.addEventListener("change", listHandler);

I can't test it, as I don't have access to this ancient technology (to the compiler yes, but not to the mx components). So it might need a little fix; If the list isn't updated you need to fire the change event manually... then you probably need to add something to prevent a infinitive change event recursion. And it might behave funny if a user makes multiple selections with his ctrl or shift. But I won't take all the fun from you of figuring that out. This code is the basic idea, other than that you would need to create your own list component. For the HTML equivalent : use jQuery.