Comunidad de diseño web y desarrollo en internet

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:
Variable que indica cuánto tiempo, en milisegundos, tardan en
mostrarse las sugerencias
public var showDelay:Number = 0;

Variable que indica el número mínimo de carácteres que tiene que
haber para que se muestre la sugerencia
public var minChars:int = 1;

Variable que indica si se tienen o no en cuenta las minúsculas
y mayúsculas
public var caseInsensitive : Boolean = true;

Variable que indica si se filtrarán internamente los resultados.
La mayoría del tiempo, no hay razón para no dejarla en true, pero
es posible que requieran filtrar desde el servidor y seguir
utilizando las funciones del componente
public var filterDataProvider : Boolean = true;


Clase HistoryBox extends SuggestComboBox :

Propiedades:
Nombre que debe tener el SharedObject
public var soName:String = "savedData";

Nombre del Array que contendrá
las búsquedas que hemos realizado. De esta manera se podrán usar varios
componentes con un mismo SharedObject
public var soResource:String = "myResource";


Método(s):

Esta función guardará el contenido actual de la caja de texto.
Devuelve true, si el texto se guardó, y false, si el texto
ya estaba o hubo una cadena vacía
public function saveCurrentText () : Boolean


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

¿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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate