Uso de arrayCollection, insertar valores con addItem y addItemAt mostrados en un ComboBox con Adobe Flex

Bienvenidos a Ver-Tutoriales.com, en esta ocasión os voy a explicar como asignar valores un ArrayCollection y este una vez con datos lo insertaremos en un combo, algo muy sencillo y util que para los que están empezando con Flex puede ser de gran ayuda.

Para empezar vamos a declarar el array:

[Bindable] public var arrTutoriales:ArrayCollection;

Y a continuación voy a exponer dos maneras, la primera es que le insertemos al array los datos de la siguiente manera con la propiedad addItem():

arrTutoriales.addItem({NOMBRE:”Adobe FLEX”});
arrTutoriales.addItem({NOMBRE:”Visual Basic 6″});
arrTutoriales.addItem({NOMBRE:”PHP”});
arrTutoriales.addItem({NOMBRE:”MySQL”});

addItem(), añade secuencialmente y en la última posición del array el item que le digamos.

En el caso expuesto anteriormente, le decimos que el array tiene un campo llamado NOMBRE y el valor a continuación de los “:”.

Además como suele ocurrir, puede hacer falta insertar un dato en una posición que no ha de ser la última, voy a insertar ahora un nuevo con la propiedad de los ArrayCollection, addItemAt(), sería de esta otra manera:

arrTutoriales.addItemAt ({NOMBRE:”Seleccione un Tutorial…”},0);

Podemos ver que a diferencia de addItem(), addItemAt() recibe un parametro más, el primer parametro sigue siendo el item, el segundo parametro es la posición o el índice dentro del array, siendo 0 la primera posición.

Ya para terminar, quedaría mostrar esa información dentro de un combobox, es de esta manera tan sencilla:

<mx:ComboBox x=”100″ y=”100″ dataProvider=”{arrTutoriales}” labelField=”NOMBRE” width=”162″ id=”cbTutorialFlex”/>

Fijarse que le asignamos en el dataProvider el ArrayCollection que con anterioridad habiamos declarado y rellenado con datos, pero además utilizamos la propiedad labelField para decirle que campo es el que vamos a utilizar, en nuestro ejemplo, arrTutoriales, solo tenía un solo campo, pero podríamos haber utilizado una estructura más  compleja. Os pongo unos ejemplos para que os aclare si fuera con más campos.

Primero la declaración del ArrayCollection que sería igual:

[Bindable] public var arrTutoriales:ArrayCollection;

Ahora la asignación de valores

arrTutoriales.addItem({NOMBRE:”Adobe FLEX”, nivel:1});
arrTutoriales.addItem({NOMBRE:”Visual Basic 6″, nivel:2});
arrTutoriales.addItem({NOMBRE:”PHP”, nivel:5});
arrTutoriales.addItem({NOMBRE:”MySQL”, nivel:4});

En este caso, podemos ver que el añadir no se complica mucho, simplemente añadiendo un segundo parametro separado por la , tendríamos un ArrayCollection con dos campos y sus respectivos valores, en este caso NOMBRE y nivel.

Siguiendo con el ejemplo primero, vamos a añadir un valor en la primera posición utilizando addItemAt de la siguiente manera:

arrTutoriales.addItemAt ({NOMBRE:”Seleccione un Tutorial…”,nivel:0},0);

Y ahora sí, para terminar definitivamente con el artículo sobre uso de ArrayCollection y la asignación al ComboBox, veamos:

<mx:ComboBox x=”100″ y=”100″ dataProvider=”{arrTutoriales}” labelField=”NOMBRE” width=”162″  id=”cbTutorialFlex”/>

Sí, es exactamente igual, podríamos utilizar como labelField el campo nivel del array, solo con cambiar el valor en la propiedad. La ventaja es que seguiremos teniendo en el ComboBox, ambos valores relacionados, así que si  seleccionamos el nombre, podremos retornar el nivel.

Pues no se me ocurre por ahora más que explicar. Espero que os sea util toda la información. Si teneis alguna duda podeis exponerla y os la contestaré gustosamente.

Un saludo!

Te puede interesar:

8 comentarios

  • Christian commented on 23 agosto, 2010 Reply

    Hola

    Si quisiera mostrar un dato del arrayCollection en un texto o label como lo llamas?
    – {arrTutoriales.NOMBRE}
    – {arrTutoriales[NOMBRE]}

    Asi no me funciona, como rescato el dato?

    Si fuera un httpservice se puede asi, servicioHttp.lastResult.datoXml
    pero no me sirve con el arrayCollection

    me puedes ayudar?

    • VideoTutoriales commented on 23 agosto, 2010 Reply

      Buenas Christian,

      Es sencillo, adaptalo a tus necesidades:

      arrTutoriales.getItemAt(numerodelitemporejemplo0).NOMBRE

      Esto devolvería el item en la posición que quisieras, la columna que seleccionaras.

      Espero que te sirva! Un saludo!

  • prospero commented on 17 septiembre, 2010 Reply

    Hola!!
    …necesito llenar un arraycollection con los datos que entro en un textinpud para luego mostrarlos en un list!

    ..seguí los pasos que muestras arriba pero no me funciona!
    …tienes alguna sugerencia??

  • Jorge commented on 16 febrero, 2011 Reply

    Saludos.

    Necesito insertar en una base de datos mysql los elementos de un datragrid.

    El datagrid recibe los datos de un archivo csv, pero no se como guardar todo el datagrid en la base de datos, se como actualizar, insertar items, pero no como hacerlo con el datagrid completo.

    Podrías ayudarme?

    Gracias.

  • Frank commented on 7 julio, 2011 Reply

    Buenos Días.
    Tengo un problema, quiero llenar los datos en una columna especifica del datagrid (digamos la columna 3 llamada reserva) y al terminar de llenar los datos necesito hacer click en un boton y q se guarden los datos de esa columna en un arrayCollection, si hay como hacer eso?
    nota: los datos de esa columna no vienen en el dataProvider del datagrid x lo que no puedo trabajar con el arraycollection del dataProvider, y todo esto esta hecho en eclipse flex

  • Oscar commented on 26 julio, 2012 Reply

    hola buen día
    soy algo inexperto en flex
    tengo un problema si tengo dos ArrayCollection, y con el segundo quiero modificar el primero con “.addItemAt”, como puedo hacer para no sobreescribir todo lo que tiene el segundo array en el primo, y solo modificar una parte

    Ej.

    este es el primer array
    [Bindable]
    private var arraycImage:ArrayCollection = new ArrayCollection([
    {label:”icono_entrar”},
    {label:”logo”},
    ]);

    en este segundo array solo quiero modificar la parte de “source” y dejar el “label” del primer array

    arrayauxiliar = new ArrayCollection([
    {source:”Imagenes/icono_entrar.png”, label:”icono_entrar2″},
    {source:”Imagenes/icono_entrar2.png”, label:”logo2″},
    ])

    gracias espero puedan ayudarme 🙂

    • VideoTutoriales commented on 26 julio, 2012 Reply

      Buenas Oscar

      Tomalos como un array que son, así que simplemente tendrás que igualar las duplas que quieras en este caso solo label

      array[x][label] = array2[x][label];

      No sé si me expliqué con el ejemplo, sino lo hice, comentamelo y lo vemos juntos.

      Un saludo!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *