Componente de Flex: ComboBox con sugerencia de palabras

¿Les gustaría tener menús desplegables inteligentes, a lo Google Suggest en sus aplicaciones de Flex? ¿Y qué tal si recuerda él solito lo que se ha escrito para volver a sugerirlo? ¿Verdad que suena bien ?

Aquí pueden ver cómo quedaría.

En el primer combo, prueben a escribir, por ejemplo, "kill zguillez". En el segundo escriban cualquier cosa y hagan click en el botón. Repitan eso varias veces y después actualicen la página, para ver cómo se conservan los registros.

Como muchos saben, Zguillez y un servidor, el Z Team, nos encontramos desarrollando un motor de búsqueda para Cristalab, y pensamos que tener este componente era una buena idea. De hecho, ya existe algo parecido, pero a mí me pareció que no merecía la pena pagar $20 por algo que ni siquiera era un ComboBox de verdad.

Así que me puse manos a la obra e hice un componente que hace esto mismo, sugerir resultados, teniendo que aplicar muy poco código mxml, más o menos así:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns="com.cristalab.controls.*" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:controls="com.cristalab.controls.*">
        <mx:Label x="10" y="10" text="Ejemplo de SuggestComboBox"/>
   <controls:SuggestComboBox  x="10" y="36">
      <controls:dataProvider>
            <mx:Array>
               <mx:String>kill zguillez</mx:String>
               <mx:String>as3 tips</mx:String>
               <mx:String>xml</mx:String>
               <mx:String>weborb</mx:String>
               <mx:String>wtf</mx:String>
               <mx:String>efecto</mx:String>
               <mx:String>nieve</mx:String>
               <mx:String>preloader</mx:String>
            </mx:Array>
         </controls:dataProvider>
   </controls:SuggestComboBox>
</mx:Application>

Además, en este pueden usar todas las propiedades y métodos de un ComboBox de Flex sin problemas.

También se me ocurrió que sería interesante extender este componente y que por medio de SharedObjects pudiera recordar lo que se había escrito. Para esto necesitamos ejecutar un método, para saber cuando tiene que guardar lo que hay en el texto, además de decirle en las propiedades el nombre del SharedObject y el nombre del array donde se guardarán y verán los registros, de modo que podemos añadir esto a nuestro ejemplo:

Código :

<controls:HistoryBox id="myHistoryBox" soName="SOPrueba" soResource="histArray10" y="142" x="10"/>
   <mx:Button x="207" y="142" label="Recordar texto" click="{myHistoryBox.saveCurrentText()}"/>
   <mx:Label x="10" y="116" text="Ejemplo de HistoryBox"/>

Para poder trabajar con estos componentes, simplemente tienen que descargar el archivo SWC. Luego lo añaden a su proyecto (Propiedades> Flex Build Path> Library Path> Add SWC). Después, en los atributos del tag <mx:Application> añaden esto: xmlns="com.cristalab.controls.*" (para que quede como en el código de arriba).

Y ahora, no tienen más que añadir el tag <controls:SuggestComboBox> para el combo que sugiere dentro de los resultados que le han pasado, y <controls:HistoryBox> para el combo que recuerda lo que escribió el usuario.

Dicho esto, aquí está el resumen de las propiedades y métodos de las dos clases (perdonen por lo bizarro, pero no consigo hacer funcionar Asdoc):

Clase SuggestComboBox extends ComboBox:
Propiedades:


Clase HistoryBox extends SuggestComboBox :

Propiedades:


Método(s):



Que los disfruten.
Además si a alguien le apetece echarle un vistazo a estos componentes y ver qué se puede mejorar, también sería de agradecer

• Descargar SWC
  
• Descargar proyecto de librería de los componentes

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.