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);