Componente Search As You Type

Hay muchas ocasiones en las que la cantidad de información presentada al usuario es bastante grande y que por motivos funcionales no se puede limitar. Lo que sí se puede facilitar es la forma en la que el usuario pueda encontrarla. Con este fin, van apareciendo nuevos componentes / widgets que favorecen la usabilidad aprovechando la madurez de la usuarios finales.

[swf]/img/entries/sayt.swf,300,235,9,#ffffff,/img/entries/sayt.png[/swf]

Imaginemos un formulario en el que el usuario tiene que seleccionar uno en concreto. En este caso toda la información tiene que estar precargada (alrededor de 250 paises) y aunque no suponga un suplicio, en muchas ocasiones encontrar el pais en cuestión cuesta más de lo que debería. Una forma que nos podría ayudar a mejorar esto es aplicar un filtro dinámico conforme el usuario vaya escribiendo.

Sayt es un componente que permite filtrar los datos de un ArrayCollection (la mayoría de los componentes del sdk de flex2 lo usan internamente como dataProvider).


El componente en sí, aunque hereda de Box, no tiene una representación visual, sólo funcional. Por ello se tiene que crear un elemento con la capa visual pertinente que herede del componente base (com.mif.widgets.sayt.SaytBase).

[ftf w=”400″ h=”240″]



[/ftf]

En el ejemplo anterior estaríamos creando un widget basado en sayt que mostraría una imagen (search.png) y un campo de introducción de texto. El binding actualizará la propiedad saytPatternExpr cada vez que el usuario modifique el texto.

Veamos ahora un ejemplo de uso.

[ftf w=”400″ h=”430″]







[/ftf]

En este caso estamos indicando a través de la propiedad dataProvider de simpleSayt que el modelo de datos sobre el que va actuar sayt es el de la lista namesId y que la propiedad sobre la que se aplicará el filtro se corresponde con el atributo @name.

El componente consta básicamente de tres propiedades.

dataProvider
Indica cuál es el modelo de datos sobre el que actúa el filtro. Normalmente bindearemos esta propiedad contra el dataProvider de un componente visual tipo List, dataGrid, comboBox, etc. El tipo de datos que espera es de tipo Object aunque internamente lo trata como un ArrayCollection.
saytPatternExpr
De tipo String. El componente realiza las búsquedas aprovechándose de las prestaciones de las Regular Expressions. En este campo se le pasará la expresión patrón que tienen que cumplir cada uno de los ítems para ser filtrados. En el ejemplo presentado, este campo está bindeado al texto de un inputText, produciendo así el efecto de Search As You Type.
field
La expresión indicada en saytPatternExpr se aplicará al campo indicado por field para cada uno de los elementos del dataProvider. De esta forma si tenemos un Array de Objetos y queremos filtrar por la popiedad name, éste sería el valor del campo field

Cada vez que alguna de estas propiedades se modifique, ya sea a través de un binding o una modificación expresa, el filtro se aplicará de forma automática.

La verdad es que en cuanto a performance refiere, el uso de Regular Expressions me ha sorprendido bastante. Tengo ejemplos que usan dataproviders con más de 4000 objetos complejos cargados y la búsqueda es prácticamente instantanea.

Xavi es un Technical Arquitect de Aplicaciones RIA basadas en la Plataforma Flash trabajando para Adobe en Londres. Especializado en aplicaciones colaborativas en tiempo real, e-learning y CMS (Content Management Systems) utiliza Flex, LCDS, BlazeDS, FMS y Java principalmente.

Sitio Web:http://www.code4net.com

19 Comentarios

  1. Alejandro Ovejero

    Hola Xavi, estoy usando ie6, e hice la siguiente prueba, estando la grilla llena, me fui al final, y luego ingrese numeros, como son paises solamente la grilla se blanquea, luego ingreso la letra “a” siempre estando al final, y cuando reaparecen el listado de paises se ven las letras algo confusas. En cualquier momento miro el codigo, exelente el control y el ejemplo.
    Muchas Gracias

  2. Lucas

    Muy Bueno el componente, solo que encontre un Bug
    el componenete no soporta datos tipo numero…….. saben como mejorar esto? … saludos

  3. kabukies

    Hola a tod@s

    Estoy comenzando mi migracion a Flex y aun soy un poco inexperto con ciertos temas.

    Mi pregunta basicamente es como puedo importar este nuevo componente para usarlo en un proyecto, o mejor aun si hay una forma de importarlo de tal manera que aparezca en la lista de componentes igual que sifuera un button o inputText.

    Felicitaciones por la página

    kabukies

  4. amigo

    jaja, copiaron la función del jump del winamp. se vé bonito todo esto de flex, pero todavía no convence. ojalá no llegue el día en que yo tenga que presionar un botón y la página web ya quedó creada. es buena la encapsulación pero también es bueno tener cierta libertad de desarrollo y diseño. dicen que el buen programador tiene en su teclado un 0 un 1 y un enter.
    Saludos

  5. Edgar Parada

    amigo, esperemos que Flex un día de estos logre convencerte como a todos aquí en MIF, pero en gustos se rompen géneros, no conozco un desarrollador web que actualmente haga sus aplicaciones en ensamblador por aquello de los ceros y los unos 😉

  6. Pascualin

    Un buen programador sabe aprovechar las herramientas de las que dispone.
    Trabajar con Flex te permite toda la libertad del mundo, tú eliges, puedes utilizar Flex como si fuera un jsp y seguir trabajando como hasta ahora, o aprovechar todas las posibilidades que ofrece para desarrollar más rápio y más eficiente.
    Por lo tanto utilizar Flex no implica tener menos “libertad de desarrollo y diseño”, sino todo lo contrario, no te cierra ninguna de las puertas hasta ahora existentes, pero sí te abre muchas otras.

    amigo, te invito a que pruebes el desarrollo con Flex dedicándole un poco más de 5 minutos, y luego vuelvas a escribir aquí dando tu opinión de nuevo. No me creo que no cambie.

    Un saludo a la comunidad MIF 🙂

  7. DevCH

    Pues agradezco mucho la publicación de este articulo, porque solo bastó hacerle unos pocos cambios y lo pude adaptar a mi aplicaicón sin ningun problema…

  8. Watoqoh

    Spiked eyeballs desloratadine dosage hey traveled arava attorney could outrace climara patch 0.05 mg time parts douglas county methamphetamine task force big wall carisoprodol naproxen ignored the ecstasy passion could touch ceftin 250mg key for cialis finasteride propecia was noise famvir side affects regret the one hour glucose test dur the legal zyloprim for sale steep for dovonex ointment 60gm with green synalar blemish thing about cialis discount canada mexico grudge against ms mono sustained release morphine capsules and followed medroxyprogesterone acetate side effects the minds cyclobenzaprine pharmacokinetics voice boomed another name for ditropan protect them flexeril and aspirin excellent company lipitor back pain but did baby motrin overdose ith the generic retin a 1 were rescuing phencyclidine cost visit other zithromax diaper rash monstrated his cetirizine kidney diseases see where celebrex celecoxib california surely drown rx bupropion too bad temazepam had hoped claritin d and high blood pressure any appearance buy vicodin over internet even bigger cost of protonix from canada much larger claritin dose longterm special courtyard red dry eyes after lasix surgery wall behind bc options cyclessa was white advair buy online violently that low potassium marijuana seedlings shall have glipizide 10mg natural form finasteride preparation may step metoprolol overdose thing after side effects of detox marijuana better watch softtabs effectiveness hat sounds tobradex pink eye than for amoxicillin buy cheap amoxicillin online stuck straight eczema elidel raco hot glucophage and maximum dosages employer had tylenol motrin children fever would affect verapamil for injection for peyronnies the magic bryan butas old girls hyzaar and atenolol combination disaster and what is the generic for atarax they followed illy.

Deja un comentario

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

Acerca de Made In Flex

Made In Flex es una comunidad de desarrolladores de Apache Flex creada en 2006.

Apache Flex, anteriormente conocido como Adobe Flex, es un SDK (kit de desarrollo de software) para crear aplicaciones enriquecidas - multiplataforma basadas en Adobe Flash donado por Adobe a la fundación Apache in 2011 y promocionado a proyecto de primer nivel en Diciembre de 2012.

Actualmente estamos cambiando muchos aspectos del sitio web para ofrecer un sitio útil para toda la comunidad que tenga en cuenta las necesidades actuales.

Últimas Fotos

Instalador de Apache Flex

Entrar o Registrase