A while ago I showed a simple "fancy search box" in Flex. In response Mark Barton suggested I create a custom component based on it, which I've since done and present for you here now.

As a recap here's what it looks like and what it does (type in the boxes and watch):

To add one of the SearchFields to your Flex app you just have to type this in:

<cs:SearchField search="doMyCustomSearch(event)"/>

As simple as that! All you need to do is tie the "search" event to your own function, which might look something like this:

import net.codestore.flex.SearchEvent;

private function doMyCustomSearch(event:SearchEvent):void{
        Alert.show("This would search for "+event.query);
}

Check it out - I wrote my own custom event! I almost feel like a real programmer ;o)

The search event happens a set amount of time after the user stops typing in the input field. By default this is 200ms but you can override that by adding a delay to the object, like so:

<cs:SearchField search="doMyCustomSearch(event)" delay="1000"/>

There are other options too. Here's the code for the second search box in the above demo:

<cs:SearchField width="220" hint="Search For.." delay="50" 
        search="doSearch2(event)" backgroundImage="@Embed(source='resources/zoom.png')"/>

Well, almost. You need to tell Flex where the SearchField class lives by defining the "cs" namespace (cs= codestore ;-). You can see how that's done in the code download.

Using The Component In Your Own Projects

I don't want to blow my own trumpet too much, but I think this is a really useful component to have. I've used it in four different applications already!

Because I created the component as a shared component I only maintain one "code stream". Any changes I make to it are inherited in all the apps that use it. How did I do that?

Creating A Shared Components Area

First you need to do is create a Flex Project Library from the File menu:

In the dialog that appears call it something like "MySharedComponent" and press Finish.

Now, assuming you want, you can start by adding my SearchField component. First, download this Flex Archive file (Zip) and leave it zipped up on your disk somewhere.

Now, find your new component project in the Flex Navigator pane, right click it and choose Import. In the next dialog choose "Archive File" and press Next.

Use the Browse button to find the Zip you just saved and then choose the files to import, as below:

Click Finish and you're done. You now have all the code you need. Feel free to take a look round and see how easy it was for me to create custom settings and events for the component.

All you need to do is tell the component project what files to include when compiling, right click it and make sure they're all ticked in the build path area, as below:

Adding the Component to An Existing Project

Now, let's say you want to add the search field to a project you're working on. Right click that project in the Navigator pane and click properties.

Add the new component library to the Flex Build Path, as below:

Next time you open a file from the project you'll see the SearchField component listed in the Components pane when in design mode. Or you can add the following code to your Applications root MXML:

<mx:Application xmlns:cs="net.codestore.flex.*"> 

Then you can add it by hand in the MXML code.

Summary

One known issue is that it doesn't work very well on anything other than a dark backgrounds, as the "hint" text colour is black.

There are probably other shortcomings but, for now, it works well and I've been using without problems in a few applications.

If nothing else it's a good demo in how to create not only shared component libraries but also your own component and how to add events and properties to it. I've enjoyed creating it. Hope you enjoy using/learning from it!