ActivityIndicator & TextInput - interactive search field

In asynchronous world there is often a need to show user, that application is doing something in the background, and it is not hang. When we can determine amount of time needed to perform some action, we should use ProgressBar controll, when there is no such possibility we should use ActivityIndicator.

ActivityIndictator class does not have many usefull functions,  the most interesting function one is animate(doAnimate:boolean). It starts (or stops) animation of indicator, this is used to produce impression that application is working on something.

We will create simple search field with appriopriate icon and indicator. Let's start from TextInput:

with(textInput) {
   x = 50;
   y = 50;
   width = 200;
   
   leftIcon = searchImage;
   leftIconMode = TextInputIconMode.ALWAYS;
   rightIcon = activityIndicator;
   rightIconMode = TextInputIconMode.NEVER;                
}

We are using here the most usefull feature of TextInput control: left and right icon. These icons are inserted in the text input and does not hide text inserted. The only limitation (maybe bug) is that the right icon is not correctly showed when clear icon is present (they are in the same position). That's why we are showing search button on left side of the controll. Above code will result in creation of this piece of interface:

When user press the search icon, we should start animation and start doing background operations.

protected function startSearch(event:Event) : void 
{
    //disable search box and start animation
    textInput.enabled = false;
    textInput.rightIconMode = TextInputIconMode.ALWAYS;
    textInput.leftIconMode = TextInputIconMode.NEVER;
    activityIndicator.animate(true);

    //start background job
    setTimeout(stopSearch, 5000, textInput.text);

    //visual improvement
    textInput.text = "Searching...";
    resultLabel.text = "";
}

We are hiding search icon, show and start animation, and do some background operations - here it is simulated by few seconds of delay before the results will be displayed.

Field is disabled, so user cannot change inserted text additonally we may change background of disabled controll by changing it's skin. When background job is finished, we should enable it for user input:

protected function stopSearch(text:String):void
{
   //display results
   resultLabel.text = "Sorry, nothing has been found for \"" + text + "\".";
   textInput.text = "";

   //enable search box for user
   textInput.enabled = true;
   textInput.rightIconMode = TextInputIconMode.NEVER;
   textInput.leftIconMode = TextInputIconMode.ALWAYS;
   activityIndicator.animate(false);
}

ActivityIndicator animation can be changed by skin, with it we are able to create consistent activitiy indication in whole application. TextInput icons placeholders can be used in many ways, for validation indication, type hinting, help and many other non crutial items. Inserting them in text input box will keep interface small and clear.