actionscript-3 - List component to bring up InputText boxes

Question

I'm creating a list component with different numbers on each label ranging from 1 to 10. When clicked on a number I need it to bring up that many inputtext boxes one after another..

It's pretty much a multiplayer game that you select how many players are playing, then you input each name.. I'm so stuck it's ridiculous.. if anyone has a solution, or a different idea please help me out, thank you so much in advance.

Answer 1

There are numerous ways to accomplish this.

Flash Professional approach

Author your view on the art board of Flash Professional.

Include a list control, as well as text boxes you want to display, such as:

Give property names to your components, such as quantityList for the list as well as answer text input controls, such as answer1 inside an answerBoxes custom symbol.

In code, you could control the visibility of your answer view by adding this to the timeline:

import flash.events.Event;

quantityList.addItem({label:"1", data:1});
quantityList.addItem({label:"2", data:2});
quantityList.addItem({label:"3", data:3});
quantityList.addItem({label:"4", data:4});
quantityList.addItem({label:"5", data:5});
quantityList.addItem({label:"6", data:6});
quantityList.addItem({label:"7", data:7});
quantityList.addItem({label:"8", data:8});
quantityList.addItem({label:"9", data:9});
quantityList.addItem({label:"10", data:10});

quantityList.addEventListener(Event.CHANGE, changeHandler);

function changeHandler(event:Event):void
{
    var numberOfQuestions = event.target.selectedItem.data as int;

    answerBoxes.answer1.visible = (numberOfQuestions > 0 ? true : false);
    answerBoxes.answer2.visible = (numberOfQuestions > 1 ? true : false);
    answerBoxes.answer3.visible = (numberOfQuestions > 2 ? true : false);
    answerBoxes.answer4.visible = (numberOfQuestions > 3 ? true : false);
    answerBoxes.answer5.visible = (numberOfQuestions > 4 ? true : false);
    answerBoxes.answer6.visible = (numberOfQuestions > 5 ? true : false);
    answerBoxes.answer7.visible = (numberOfQuestions > 6 ? true : false);
    answerBoxes.answer8.visible = (numberOfQuestions > 7 ? true : false);
    answerBoxes.answer9.visible = (numberOfQuestions > 8 ? true : false);
    answerBoxes.answer10.visible = (numberOfQuestions > 9 ? true : false);
}

When you run, you can select items from the list:

Working SWF Example

Flash Pro CS5.5 FLA source code

Flex - A programmatic approach

Store quantity values in the list data provider, and on change iterate adding elements:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:HorizontalLayout />
    </s:layout>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;

            import spark.components.TextInput;
            import spark.events.IndexChangeEvent;

            protected function quantityList_changeHandler(event:IndexChangeEvent):void
            {
                textInputGroup.removeAllElements();

                for (var i:uint = 0; i < quantityList.selectedItem; i++)
                {
                    textInputGroup.addElement(new TextInput());
                }
            }
        ]]>
    </fx:Script>

    <s:List id="quantityList"
            change="quantityList_changeHandler(event)"
            dataProvider="{new ArrayList([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])}" />

    <s:VGroup id="textInputGroup" />


</s:Application>

Flex - A declarative appraoch

Using Flex state system, you could declaratively layout your view then include components in the desired states. You could also incorporate transitions between states for animation.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:HorizontalLayout />
    </s:layout>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;

            import spark.components.TextInput;
            import spark.events.IndexChangeEvent;

            protected function quantityList_changeHandler(event:IndexChangeEvent):void
            {
                currentState = "quantity" + quantityList.selectedItem.toString();
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="quantity1" />
        <s:State name="quantity2" />
        <s:State name="quantity3" />
        <s:State name="quantity4" />
        <s:State name="quantity5" />
        <s:State name="quantity6" />
        <s:State name="quantity7" />
        <s:State name="quantity8" />
        <s:State name="quantity9" />
        <s:State name="quantity10" />
    </s:states>

    <s:List id="quantityList"
            change="quantityList_changeHandler(event)"
            dataProvider="{new ArrayList([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])}" />

    <s:VGroup id="textInputGroup">
        <s:TextInput includeIn="quantity1,quantity2,quantity3,quantity4,quantity5,quantity6,quantity7,quantity8,quantity9,quantity10" />
        <s:TextInput includeIn="quantity2,quantity3,quantity4,quantity5,quantity6,quantity7,quantity8,quantity9,quantity10" />
        <s:TextInput includeIn="quantity3,quantity4,quantity5,quantity6,quantity7,quantity8,quantity9,quantity10" />
        <s:TextInput includeIn="quantity4,quantity5,quantity6,quantity7,quantity8,quantity9,quantity10" />
        <s:TextInput includeIn="quantity5,quantity6,quantity7,quantity8,quantity9,quantity10" />
        <s:TextInput includeIn="quantity6,quantity7,quantity8,quantity9,quantity10" />
        <s:TextInput includeIn="quantity7,quantity8,quantity9,quantity10" />
        <s:TextInput includeIn="quantity8,quantity9,quantity10" />
        <s:TextInput includeIn="quantity9,quantity10" />
        <s:TextInput includeIn="quantity10" />
    </s:VGroup>

</s:Application>