Question

This question is related to:
CS5 FLASH + AS3

Hello,

I am simply trying to mimic the collapse/expand functionality in the following link:
http://static.geewax.org/checktree/index.html

The form itself does not need to be functional.

This is my first AS3 project, and I believe I am making things too complicated and the code is just getting so crazy I keep losing myself in it. I tried making certain functions for things that are repetitive, but all my attempts fail :(.

What I was able to accomplish:

1. Create checkboxes+labels dynamically from an array and properly position them underneath eachother.

2. Clicking Section, causes checkboxes to appear/disappear

3. Clicking 1st Section, automatically repositions 2nd section correctly.

---

My Issue,

I can not find a viable way to reposition the checkboxes that are underneath the 2nd section when the 1st section expands/collapses. I basically need these checkboxes to always be located under the 2nd section.

Here is my code:

stop();

import fl.controls.CheckBox;
import fl.controls.RadioButton;

//General Variables
var i:int;

// Tab1 Group 1
var tab1_gp1_main:CheckBox = new CheckBox();
addChild(tab1_gp1_main);
tab1_gp1_main.move(0, 20);
tab1_gp1_main.width = 120;
tab1_gp1_main.label = "Landscape";

// Tab1 Group 2;
var tab1_gp2_main:CheckBox = new CheckBox();
addChild(tab1_gp2_main);
this.tab1_gp2_main.move(0, 20 + tab1_gp1_main.y );
tab1_gp2_main.width = 120;
tab1_gp2_main.label = "Performance";

// Section Click Listeners
tab1_gp1_main.addEventListener(MouseEvent.CLICK, sectionHandler);
tab1_gp2_main.addEventListener(MouseEvent.CLICK, sectionHandler);

//Declare Number of Options;
var tab1_grp1_Options:int = 4;
var tab1_gp1_op_Labels:Array = ["Test1","Test2","Test3","Test4","Test5"];

var tab1_grp2_Options:int = 4;
var tab1_gp2_op_Labels:Array = ["Test1","Test2","Test3","Test4","Test5"];

//Section Click Functions;
function sectionHandler(event:MouseEvent):void
{
    switch (event.currentTarget)
    {
        case tab1_gp1_main :
            switch (tab1_gp1_main.selected)
            {
                case true :
                    for (i=0; i<=tab1_grp1_Options; i++)
                    {
                        //Option Creation Loop
                        var tab1_gp1_op:CheckBox = new CheckBox();
                        tab1_gp1_op.name = "tab1_gp1_op" + i;
                        addChild(tab1_gp1_op);

                        //Add Properties for Options
                        tab1_gp1_op.label = tab1_gp1_op_Labels[i];
                        tab1_gp1_op.width = 120;

                        //Position 1st Option Below Main
                        if (tab1_gp1_op.name == "tab1_gp1_op0")
                        {
                            tab1_gp1_op.move(20, 20 + this.tab1_gp1_main.y);
                        }
                        else
                        {
                            //Position Options > 1st below it
                            var prevOptionNum:int = i - 1;
                            var prevOption:CheckBox = getChildByName("tab1_gp1_op" + prevOptionNum) as CheckBox;
                            tab1_gp1_op.move(20, 20 + prevOption.y);
                        }
                        //Testing
                        trace(tab1_gp1_op.name);
                        trace(tab1_gp1_op.label);
                        trace(tab1_gp1_op.y);

                    }
                    ExpandCollapse("tab1_gp1_main_selected");
                    break;
                default :
                    //Remove all options for a section
                    for (i=0; i<=tab1_grp1_Options; i++)
                    {
                        var RemoveOption:CheckBox = getChildByName("tab1_gp1_op" + i) as CheckBox;
                        trace("unselected"+RemoveOption);
                        removeChild(RemoveOption);
                    }
                    ExpandCollapse("tab1_gp1_main_unselected");
            }
            break;
        case tab1_gp2_main :
            switch (tab1_gp2_main.selected)
            {
                case true :
                    for (i=0; i<tab1_grp2_Options; i++)
                    {
                        //Option Creation Loop
                        var tab1_gp2_op:CheckBox = new CheckBox();
                        tab1_gp2_op.name = "tab1_gp2_op" + i;
                        addChild(tab1_gp2_op);

                        //Add Properties for Options
                        tab1_gp2_op.label = tab1_gp2_op_Labels[i];
                        tab1_gp2_op.width = 120;

                        //Position 1st Option Below Main
                        if (tab1_gp2_op.name == "tab1_gp2_op0")
                        {
                            tab1_gp2_op.move(20, 20 + tab1_gp2_main.y);
                        }
                        else
                        {
                            //Position Options > 1st below it
                            var tab1_gp2_op_prevnum:int = i - 1;
                            var tab1_gp2_op_prevopt:CheckBox = getChildByName("tab1_gp2_op" + tab1_gp2_op_prevnum) as CheckBox;
                            tab1_gp2_op.move(20, 20 + tab1_gp2_op_prevopt.y);
                        }
                        //Testing
                        trace(tab1_gp2_op.name);
                        trace(tab1_gp2_op.label);
                        trace(tab1_gp2_op.y);
                    }
                    break;
                default :
                    //Remove all options for a section
                    for (i=0; i<tab1_grp2_Options; i++)
                    {
                        var tab1_gp2_op_remove:CheckBox = getChildByName("tab1_gp2_op" + i) as CheckBox;
                        trace("unselected"+tab1_gp2_op_remove);
                        removeChild(tab1_gp2_op_remove);
                    }
            }
            break;
    }
}


function ExpandCollapse(SectionClicked:String):void
{
    switch (SectionClicked)
    {
        case "tab1_gp1_main_selected" :
            var lastOption:CheckBox = getChildByName("tab1_gp1_op" + tab1_grp1_Options) as CheckBox;
            tab1_gp2_main.move(0, 20 + lastOption.y);
            break;
        case "tab1_gp1_main_unselected" :
            tab1_gp2_main.move(0, 20 + tab1_gp1_main.y);
            break;
        default :
    }
}

Thank you in advance.

Answer 1

I think it would help you to think of this problem as a list that could be ‘infinity’ items long and have ‘infinity’ levels of nesting. Right now, there’s a lot of hard coded numbers and text in here and your spacing is all set in a very rigid way. To think of this in terms of an infinite list, you would start with the rules that apply to each level of expanding and collapsing.

• Each item appears Y pixels below the previous group of items.
• Each subgroup appears X to the right of the parent group.
• When a group is collapsed, the children within it are hidden.
• A parent item contains all of its children.

From here you could imagine that each item in the list is also a group of items (and the items inside that group are groups of items (and the items inside that group…)). This is known as the Composite Design Pattern. If you were to create a way for a line item to contain the children within it, perhaps by making each one a sprite that can have child display objects, you can easily get the height of the group (expanded or collapsed) and treat it as a single unit. When the group is expanded the child objects are added to the group (using addChild) and when it’s collapsed, they’re removed (removeChild).

By creating a new class that represents the checklist line it will help you to keep these items encapsulated in smaller easier to work with packages so you’re not moving around labels and checkboxes all over the place, but rather just a single line item / group. That group could contain a list of line item objects which in turn could contain more lists. The functionality stays more or less the same no matter how many levels deep it goes.

I realize all of this is more of an introduction to object-oriented-programming than a direct answer, but learning this stuff will pay off in a big way. To sum it up, the code you posted is trying to force these objects into specific positions depending on specific cases, and I think the answer is to try to create objects that can adapt to the situation based on rules you set.