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.
(Flash Player 9 Requerido)
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).
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.
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.
Acerca de esta entrada
Usted está leyendo “Componente Search As You Type,” una entrada de MadeInFlex
- Autor: Xavi Beumala
Xavi es un Arquitecto de Aplicaciones RIA basadas en la Plataforma Flash. Especializado en aplicaciones colaborativas en tiempo real, e-learning y CMS (Content Management Systems) utiliza Flex, FMS y Java principalmente.
- URL del Autor:
- http://www.code4net.com
- Publicada:
- 25.09.06 / 5pm
- Categorías:
- Componentes
- Entradas relacionadas:
- Flex Component Exchange
- Componente Sticky ToolTip
- Componente zoomframe
- Componente TimeEntry
- Número de visitas:
- 16713
- Imprimir esta entrada:
11 Comentarios
Ir al formulario de comentarios | rss (comentarios) [?] | trackback url [?]