Logo de islavisual
Logo de islavisual IslaVisual
imagen de sección

Ultima revisión 01/11/2010

Localización de elementos y objetos en Flex (getElementById)

Hola amigos, hoy les voy a dejar la solución para un problema, que sin duda, ha traido cola. Se trata de la función de javascript getElementById de Javascript en Flex.

Esta función como tal, no existe, y por tanto debemos crearla nosotros. Lo primero que pensé es en crear un array de elementos pero claro, eso era una soberana tontería porque, no vas a estar creando elemento y metiendolos en un array. Así que empecé por la idea de recorrer un contenedor dado e ir preguntando por su id. El problema era que no todos los objetos de Flex tienen la propiedad children así que creé un array con todos los contenedores de Flex y si estaba en ese array recorría dicho contenedor "hijo".

Mas tarde pensé en que porque no buscar de forma parcial, es decir, muchas veces ocurre que tenemos distintas plantillas para cosas idénticas estructuralmente pero con contenidos distintos y porqué no buscar parcialmente...

La siguiente función necesita 3 paámetros y, claro, es recursiva. El único problema de este método es que si el elemento a buscar está muy por debajo del contenedor inicial proporcionado, la busqueda de muchos objetos puede tardar bastante.


/*************************************************************************************************************************
* Función para encontrar objevtos por Id en un contenedor dado
* id        = Es el ID del objecto a encontrar
* cont    = Es el contenedor dónde se encuentra
* parcial    = Indica si hay que buscar por id completo o por coincidencia parcial comenzando por el id y su longitud.
* ************************************************************************************************************************
**/

private function getElementById(id:String, cont:Object, parcial:Boolean = false):Object{
    var enco:Boolean = false;
    var objAux:Object;
    var Tipo:String = "";
    var TipoArrComps: String = "";
    var ArrCompsStr:String = "SuperPanel,Panel,HBox,VBox,Box,Canvas,ViewStack,DividedBox,ControlBar,Form,FormItem";
    var ArrComps:Array = ArrCompsStr.split(",");

    for each( var item:Object in cont.getChildren()){
        if (!enco){
            // Si no lo habíamos encontrado, preguntamos por él
            if(item['id'] != null && item['id'] != "" ){
                if((!parcial && item['id'] == id) || (parcial && item['id'].toString().substr(0, id.length) == id) ){
                    enco = true;
                    return item as Object;
                }
            }
    
             // Si no es el elemento actual el buscado, seguimos buscando recursivamente
            var y:int = 0;
            while(y < ArrComps.length && !enco){
                Tipo = StringUtil.trim(getQualifiedClassName(item).split("::")[1].toString());
                TipoArrComps = StringUtil.trim(ArrComps[y]);
                if(Tipo == TipoArrComps){
                    objAux = getObjById(id, item, parcial);
                    if(objAux) enco = true;
                }
                y++;
            } // end while
        } // end if !enco
    } // end for each

    return objAux;
}

Después, para usarlo debéis indicar l tipo de objeto devuelto y para ello podéis usar los siguientes ejemplos


var cb1:ComboBox   = (getElementById('listTipo'        , config, true) as ComboBox);
var btn:Button = (getElementById('commit'        , config, false) as Button);

Sobre el autor

Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.