Флэш-форма: разверните / разделы контракта - мой код AS3 работает ... нужен совет

Question

Этот вопрос относится к: CS5 FLASH + AS3

Здравствуйте,

Я просто пытаюсь имитировать функциональность свертывания / развертывания по следующей ссылке: http://static.geewax.org/checktree/index.html

Форма сама по себе не обязательно должна быть функциональной.

Это мой первый проект AS3, и я считаю, что все усложняю, а код становится настолько сумасшедшим, что я теряю себя в нем.Я пытался сделать определенные функции для повторяющихся вещей, но все мои попытки потерпели неудачу: (.

Что мне удалось выполнить:

1. Создание флажков + меток динамически измассив и правильно расположить их под друг другом.

2. Нажатие на раздел, вызывает появление / исчезновение флажков

3. Нажатие на 1-й раздел, автоматически перемещает 2-й разделправильно.

---

My Issue,

Я не могу найти приемлемый способ переместить флажки, которые находятся под 2-м разделом, когда 1-й раздел разворачивается / сворачиваетсяМне нужны эти флажки, чтобы они всегда находились под 2-ой секцией.

Вот мой код:

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 :
    }
}

Заранее спасибо.

Answer 1

Я думаю, это помогло бы вам представить эту проблему как список, который мог бы быть длиной «бесконечности» и иметь уровни вложенности «бесконечности». Прямо сейчас, здесь много жестко закодированных чисел и текста, и ваш интервал задан очень жестко. Чтобы думать об этом в терминах бесконечного списка, вы должны начать с правил, которые применяются к каждому уровню расширения и свертывания.

• Каждый элемент отображается Y пикселей ниже предыдущей группы элементов.
• Каждая подгруппа появляется X справа от родительской группы.
• Когда группа распадается, дети в ней скрываются.
• Родительский элемент содержит все его дочерние элементы.

Отсюда вы можете представить, что каждый элемент в списке также является группой элементов (и элементы внутри этой группы являются группами элементов (и элементы внутри этой группы ...)). Это известно как составной шаблон проектирования . Если бы вы создали способ для позиции, в которой содержались бы дочерние элементы, возможно, сделав каждый спрайт с дочерними отображаемыми объектами, вы можете легко получить высоту группы (развернутую или свернутую) и рассматривать ее как единое целое. Когда группа расширяется, дочерние объекты добавляются в группу (используя addChild), а когда она свернута, они удаляются (removeChild).

Создав новый класс, представляющий строку контрольного списка, это поможет вам сохранить инкапсуляцию этих элементов в меньшем объеме, чтобы легче было работать с пакетами, чтобы вы не перемещались по меткам и флажкам повсюду, а просто в одну строку пункт / группа. Эта группа может содержать список объектов позиций, которые, в свою очередь, могут содержать больше списков. Функциональность остается более или менее одинаковой, независимо от того, сколько уровней она проходит.

Я понимаю, что все это скорее введение в объектно-ориентированное программирование, чем прямой ответ, но изучение этого материала окупится в значительной степени. Подводя итог, можно сказать, что код, который вы разместили, пытается заставить эти объекты занимать определенные позиции в зависимости от конкретных случаев, и я думаю, что ответ заключается в том, чтобы попытаться создать объекты, которые могут адаптироваться к ситуации на основе установленных вами правил.