Problema al intentar crear dinámicamente una navegación por pestañas con texto dinámico

Question

Hola a todos, estoy creando una navegación por pestañas de un archivo XML. Sin embargo, por alguna razón mi bucle sólo crea campos de texto para la pestaña activa y la última pestaña (en este caso la cuarta pestaña).

> Usted puede ver mi Flash aquí. < (Me di fronteras TextField en)

Mis Problemas: Read 1. la pestaña activa (luz lengüeta de color) no se basa correctamente el tamaño de la anchura del campo de texto
2. Mi bucle por alguna razón se salta las 2 lengüetas de en medio, pero establece correctamente la pestaña cuarto.

títulos ficha XML:

• Esta es la primera pestaña
  
• segunda Tab
  
• La tercera Tab
  
• La cuarta y última pestaña
  

Parece que las 2ª y 3ª pestañas obtener el tamaño correcto, pero como se ve más adelante, me sale un error al intentar trazar el texto de la segunda y tercera pestaña.

♥ Actualización: toda clase Añadido TabMenu con la esperanza de conseguir esto resuelto:) Ahora creo que aquí es donde radica mi problema:

// tabNamer creates the active & default textfields
tabNamer(tabNameActive,  Fonts.ActiveTabText,  tabData[0].id); // for ActiveTab
tabNamer(tabNameDefault, Fonts.DefaultTabText, tabData[i].id); // for DefaultTabs

tabNamer es una función que contiene solo un campo de texto, y creo que sigo anulando la última textField hecho, es por eso que sólo el cuarto y último textField muestra de texto. ¿Hay una manera de nombrar de forma dinámica mis textFeilds se me bucle?

TabMenu.as (clase entera)

package com.leongaban.TEN.ui
{
import flash.display.DisplayObject;
import flash.display.LineScaleMode;
import flash.display.JointStyle;
import flash.display.MovieClip;
import flash.display.Graphics;
import flash.display.Sprite;
import flash.display.Shape;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.utils.Timer;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.events.TimerEvent;

import com.leongaban.TEN.ui.*;
import com.leongaban.TEN.Global;
import com.leongaban.TEN.model.*;

public class TabMenu extends Sprite
{

    private const position    :Number    = 0;

    private var tabNameDefault:TextField = new TextField();
    private var tabNameActive :TextField = new TextField();
    private var backing       :Shape     = new Shape();
    private var tabData       :Array     = [];
    private var tabArray      :Array     = [];
    private var bgColor       :uint      = 0xF6F6F6; //0xE8E7E7;
    private var borderColor   :uint      = 0xCCCCCC;
    private var borderSize    :uint      = 1;
    private var sizeW         :uint;
    private var sizeH         :uint;
    private var topShadow     :MovieClip;
    private var tileShadow    :MovieClip;
    private var sideShadowL   :MovieClip;
    private var sideShadowR   :MovieClip;


    public function TabMenu():void
    {
        if (stage) init();
        else addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(e:Event = null):void {

        removeEventListener(Event.ADDED_TO_STAGE, init);

        addChild(backing);
        addChild(topShadow);
    }

    public function drawTabMenu(w, h, color, videoHDiff, ypos):void
    {           
        for (var i in Global.xml..tab) {
            tabData.push( {
                           id:Global.xml..tab[i].@id, 
                           video:Global.xml..tab[i].vid, 
                           title:Global.xml..tab[i].title} );

            //trace("TAB TITLES: "+tabData[i].id);
        }
        //trace("FIRST TAB DATA : "+tabData[0].id[0]+"\n"+tabData[0].video);

        sizeW = w;
        sizeH = h;

        topShadow = new EmptyMov();
        tileShadow = new TileShadow();
        sideShadowL = new SideShadowL();
        sideShadowR = new SideShadowR();
        sideShadowR.x = (sizeW-16) - sideShadowR.width;

        tileShadow.width = sizeW-16;

        topShadow.addChild(tileShadow);
        topShadow.addChild(sideShadowL);
        topShadow.addChild(sideShadowR);

        backing.graphics.beginFill(bgColor);
        backing.graphics.lineStyle(borderSize, borderColor);
        backing.graphics.drawRect(position, position, sizeW-17, videoHDiff);
        backing.graphics.endFill();
        backing.y = tileShadow.height - 1;


        //DRAW THE TABS -------------
        for (i in tabData) 
        {
            //trace("TAB TITLES: "+tabData[i].id);

            var tab    :MovieClip = new TabDefault();
            var active :MovieClip = new TabActive();

            tabArray.push(tab);
            //tab.video = tabData[i].video;
            //tab.title = tabData[i].title;
            tab.addChild(active); // add active tab movieclip to default tab movieclip

            // tabNamer creates the active & default textfields
            tabNamer(tabNameActive,  Fonts.ActiveTabText,  tabData[0].id); // for ActiveTab
            tabNamer(tabNameDefault, Fonts.DefaultTabText, tabData[i].id); // for DefaultTabs

            i < 1 ? active.visible = true : active.visible = false;
            //i < 1 ? tab.addChild(tabNameActive) : tab.addChild(tabNameDefault);
            i < 1 ? tabArray[0].addChild(tabNameActive) : tabArray[i].addChildAt(tabNameDefault,2);

            //tabArray[i].addChildAt(tabNameDefault,2);
            //tab.addChild(tabNameDefault);
            //if (i < 1) { tab.addChild(tabNameActive) }

            trace("i = "+i);
            trace("tabArray["+i+"].getChildAt(2) = "+tabArray[i].getChildAt(2).text);
            trace("tabNameDefault.text = "+tabNameDefault.text);

            // resize the tab background to textfield
            tab.y      =         topShadow.y + 5;
            //     if first size to active textfield + 10    : if not size to default textfield + 10
            tab.width  = i < 1 ? tabNameActive.width + 10    : tabNameDefault.width + 10;
            tab.x      = i < 1 ? 10                          : tabArray[(i-1)].x + (tabArray[(i-1)].width + 3);
            //tab.active = i < 1 ? tab.active = true           : tab.active = false;

            topShadow.addChild(tab);

            tab.mouseChildren = false;
            tab.buttonMode    = true;
            tab.addEventListener(MouseEvent.CLICK, tabClick);
        }

        // set default thumbnails here
        //trace("tabData[0].id : "+tabData[0].id.@id+"\r");
        //trace("tabData[0].video: "+"\r"+tabData[0].video+"\r");
        //trace("tabData[0].titles : "+tabData[0].titles+"\r");
    }

    private function tabNamer(textfield, textFormat, tabText):void
    {
        //trace("TabNamer called");
        textfield.defaultTextFormat = textFormat;
        textfield.border            = false;
        textfield.embedFonts        = false;
        textfield.gridFitType       = "SUBPIXEL";
        textfield.sharpness         = 100;
        textfield.antiAliasType     = flash.text.AntiAliasType.ADVANCED;
        textfield.autoSize          = TextFieldAutoSize.CENTER;
        textfield.selectable        = false;
        textfield.mouseEnabled      = false;
        textfield.x                 = 10;
        textfield.y                 = 4;
        textfield.text              = tabText;
    }

    private function tabClick(e:MouseEvent = null):void
    {
        for (var i in tabArray) {
                //tabArray[i].active = false;
                tabArray[i].getChildAt(1).visible = false;
        }

        //e.target.active = true;
        e.target.getChildAt(1).visible = true;
        trace("Text for button clicked: "+e.target.getChildAt(2).text+"\r");

        //trace("THUMBNAILS FOR TAB: " + e.target.video);
        // pass the video data to the thumbnail class
    }

}

}

función tabNamer

private function tabNamer(textfield, textFormat, tabText):void
{
    //trace("TabNamer called");
    textfield.defaultTextFormat = textFormat;
    textfield.border            = true;
    textfield.embedFonts        = false;
    textfield.gridFitType       = "SUBPIXEL";
    textfield.sharpness         = 100;
    textfield.antiAliasType     = flash.text.AntiAliasType.ADVANCED;
    textfield.autoSize          = TextFieldAutoSize.CENTER;
    textfield.selectable        = false;
    textfield.mouseEnabled      = false;
    textfield.x                 = 10;
    textfield.y                 = 4;
    textfield.text              = tabText;
}

función tabClick

private function tabClick(e:MouseEvent = null):void
    {
        for (var i in tabArray) {
                //tabArray[i].active = false;
                tabArray[i].getChildAt(1).visible = false;
        }

        //e.target.active = true;
        e.target.getChildAt(1).visible = true;
        trace("Text for button clicked: "+e.target.getChildAt(2).text+"\r");

        //trace("THUMBNAILS FOR TAB: " + e.target.video);
        // pass the video data to the thumbnail class
    }

Estas son las huellas de la función de crear fichas (función de clase)

i = 0
tabArray[0].getChildAt(2) = This is first tab
tabNameDefault.text = This is first tab
i = 1
tabArray[1].getChildAt(2) = 2nd Tab
tabNameDefault.text = 2nd Tab
i = 2
tabArray[2].getChildAt(2) = The 3rd Tab
tabNameDefault.text = The 3rd Tab
i = 3
tabArray[3].getChildAt(2) = The 4th and last tab
tabNameDefault.text = The 4th and last tab

Estos son los rastros que recibo cuando hago clic en las pestañas (Estoy tratando de encontrar la 2ª y 3ª campos de texto)

//Clicked Tab 1
Text for button clicked: This is first tab

//Clicked Tab 2
RangeError: Error #2006: The supplied index is out of bounds.
at flash.display::DisplayObjectContainer/getChildAt()
at com.leongaban.ui::TabMenu/tabClick()

//Clicked Tab 3
RangeError: Error #2006: The supplied index is out of bounds.
at flash.display::DisplayObjectContainer/getChildAt()
at com.leongaban.ui::TabMenu/tabClick()

//Clicked Tab 4
Text for button clicked: The 4th and last tab

Been rastrillar mi cerebro durante todo el día :( con la esperanza de algún consejo, consejo o tipo es por eso:!)

Answer 1

El problema es que va a reutilizar el campo de texto. tabNameActive hace referencia el mismo campo de texto a cabo a través del bucle.

Mi conjetura es que su campo de texto 'tabNameActive' está en el escenario. Si ese es el caso, es necesario hacer lo siguiente:

1) Eliminar el tabNameActive desde la etapa

2) Vaya a la biblioteca y encontrar el la tabNameActive. Haga clic derecho y seleccione Propiedades. Marque "Exportar en primer fotograma".

3) Una ventana de muestra. Ahora dar un identificador de clase "TabNameActiveClass".

4) Volver a su código. Dentro del bucle, añadir esto a continuación las declaraciones de variables.

var tab:MovieClip = new TabDefault();
var active:MovieClip = new TabActive();
var tabNameActive:TabNameActiveClass = new TabNameActiveClass();

Este debe trabajo.

Resumen: Básicamente, usted hace su texto como clase y hacer diferentes instancia de ella en el bucle. En este momento, se acaba de volver a utilizar la instancia y que básicamente se consigue movida desde la pestaña 1 a 4 durante la creación.

EDTIED en respuesta a las observaciones siguientes:

Eliminar de su definición de clase:

private var tabNameDefault:TextField = new TextField();
private var tabNameActive :TextField = new TextField();

A continuación, añadir con su bucle:

var tab:MovieClip = new TabDefault();
var active:MovieClip = new TabActive();
var tabNameActive:TextField = new TextField();
var tabNameDefault:TextField = new TextField();

Answer 2

A mi me parece como su problema está reutilizando el tabNameDefault TextField. Esto es lo que el código está haciendo:

1. Establecer el texto de tabNameActive y tabNameDefault a los datos de la primera pestaña
2. Añadir tabNameActive como un hijo de la primera pestaña
3. Establecer el texto de tabNameActive y tabNameDefault a los datos de la segunda pestaña
4. Añadir tabNameDefault como un hijo de la segunda pestaña
5. Establecer el texto de tabNameActive y tabNameDefaultto datos de la tercera pestaña
6. Añadir tabNameDefault como un hijo de la tercera pestaña. Esto elimina de la segunda pestaña.
7. Establecer el texto de tabNameActive y tabNameDefaultto datos de la cuarta pestaña
8. Añadir tabNameDefault como un hijo de la cuarta pestaña, sacándolo de la tercera pestaña.

Answer 3

No ha mostrado todo el código. En concreto, no veo en cualquier lugar que está creando los campos de texto. Mi conjetura es que sólo crea dos campos de texto (tabNameActive y tabNameDefault). No debería ser algo así como 'new TextField ()' en alguna parte dentro de su bucle que crea las pestañas.

Por favor, corrija la sangría de código, es muy difícil de leer con él por todo el lugar. También se recomienda contra el uso del a b: c construir donde no es necesario, sobre todo en los casos en que se está utilizando para realizar declaraciones en lugar de expresiones

.