Y3K-it | Solution Builders

Y3K-it | Solution Builders

viernes, 25 de marzo de 2011

Spark ComboBox en Flex 4

Como ustedes saben empezamos el proyecto de Sipco para Gefco (http://www.gefco.com.ar/), empresa de logística francesa.
El frontend del sistema lo estamos haciendo en Flex 4 y el backend en JBoos. Debido a que el sistema es uno de los más importantes de la compañia, y, es de uso común para Chile, Argentina y Brasil, el volumen de información es muy grande, de ahí que todos los ComboBox de la aplicación deben permitir búsquedas tipo autocomplete o lookahead.
El ComboBox de Spark que viene con Flex 4 permite tener esta funcionalidad y trabajar con Objects pero si bindeamos el selectedItem a una variable y el dataProvider es una lista de objectos cuando el usuario ingresa un valor String el sistema explota por problemas de bindeo.

Para replicar el error creamos un proyecto Flex nuevo y agregamos un PruebaCombo.mxml en el mismo agregamos un ComboBox de spark




Como se ve en el código necesitamos agregar una clase de ActionScript, por lo tanto agregamos el archivo Persona.as con la clase Persona con las propiedades id y descripcion. Recuerden agregar algunas instancias de personas al dataProvider en el creationComplete de PruebaCombo.mxml.

Finalmente ejecutamos el sistema, si seleccionamos un item existente queda la variable persona instanciada con el item de la lista, perso si ingresamos texto que no cumpla un match, por ejemplo "fff" el error es:

TypeError: Error #1034: Error de conversión forzada: no se puede convertir "fff" en com.y3k.Persona.


La solución más sencilla para evitar este tipo de error es implementar labelToItemFunction, esto lo debemos repetir cada vez que usemos un ComboBox con objetos complejos. La solución propuesta es hacer nuestro ComboBox que herede del Spark e implemente su propia labelToItemFunction para evitar que nos seleccionen elementos que no existan:

Para eso agregamos una clase Y3KComboBox.as con el siguiente código:


package com.gefco.view
{
 import spark.components.ComboBox;


 public class Y3KComboBox extends ComboBox
 {
  // Indica que nuestra implmentación de de labelToItemFunction
  // es idLabelToItemFunction
  public function Y3KComboBox() {
    super.labelToItemFunction = idLabelToItemFunction;
  }


  // Para evitar que seleccionen algo que no exista y romper el
  // doble bindeo seleccionamos el primero de la lista
  private function idLabelToItemFunction(input:String):* {
    var item:Object;


    if(super.caretIndex <= 0 && super.dataProvider.length>0) {
        item = super.dataProvider.getItemAt(0);
    }
    return item;
  }
 }
}

Ahora, en lugar de usar deberemos usar <s:ComboBox> deberemos usar <view:ComboBox>

Para más información dirigirse a http://www.y3k-it.com/ o escribir a info@y3k-it.com

No hay comentarios:

Publicar un comentario