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!
Comments
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?
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!
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??
Has sido respondido en
http://forohtml5.com/index.php?topic=11.0
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.
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
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 🙂
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!