Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

ActivityIndicator & TextInput - interactive search field

by Developer on ‎12-01-2010 02:08 PM (5,227 Views)

In our asynchronous world there is often a need to show the user that a BlackBerry® PlayBook™ application is doing something in the background, and did not hang. When you can determine the amount of time needed to perform an action, you should use the ProgressBar control. When there is no method to determine the time required, use the ActivityIndicator.

 

The most important function of the ActivityIndicator class is animate(doAnimate:boolean). It starts (or stops) the animation of the indicator and is used to let the user know that the application is doing something and did not hang.

 

To demonstrate the ActivityIndicator class lets simulate a real world example where you may use it.

 

We will create a simple search field with the appropriate icon and indicator. Let's start with the TextInput:

 

 

with(textInput) {
x = 50;
y = 50;
width = 200;

leftIcon = searchImage;
leftIconMode = TextInputIconMode.ALWAYS;
rightIcon = activityIndicator;
rightIconMode = TextInputIconMode.NEVER;
}

Here, we are using a very useful feature of TextInput control, the left and right icon. These icons are inserted in the text input and do not hide text inserted.  That's why we are showing the search button on left side of the control. The previous code sample will result in the creation of the following user control:

TextInput with clear and search icons

When the user presses the search icon, we should start an animation and perform the background operation.

 

 

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 = "";
}

This will result in a three step process; hiding the search icon, display and start the animation on the AcitivityIndicator and then performing the background processing.

TextInput with ActivityIndicator

 

The field is disabled so a user cannot change any of the inserted text, additionally, we may change the background of the disabled control by changing it's skin. When background process 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);
}

 

The ActivityIndicator animation can be changed by changing the skin, and with it, we are able to create consistent activitiy indication in the application. TextInput icon placeholders can be used in many ways; for validation indication, type hinting, help and many other functions. Inserting them in text input box will give your user experience an extra boost.

 

Full source code is attached to this article.

Users Online
Currently online: 4 members 1,582 guests
Please welcome our newest community members: