Accessing Mobile Device UI Components In Flash Lite: Soft Keys, Status Bar, and Progress Indicator

Using Soft Keys

Soft keys are a common feature on the majority of mobile devices that do not have a dedicated touch screen interface.

The Sony Ericsson soft key UI component contains three buttons and maps the key presses of the mobile device to the left soft key, right soft key and the enter key (or select key). It is made up of MovieClip assets and labels, which can be styled according to the state that they are in.

Figure 4-4 shows the Soft key component example running in Device Central.

Figure 4-4

Listing 4-2 (you can download the code from Wrox.com) demonstrates how you can utilize the SoftKeys component on the timeline of a .fla file. The example snippet requires that you have the soft key component in your library, with the linkage name “SoftKeys”. The example demonstrates how you can disable the left and right soft keys by first setting the text on these to a blank string “”, and by setting their enabled states _isLSKEnabled and _isRSKEnabled to false. The only enabled soft key shown in the example is the middle key, which has the text label _MSK set to “Select”. This key also has its text color value _MSKTextColor set to white 0xFFFFFF.

Listing 4-2: Using the SofyKeys UI component

this.attachMovie("SoftKeys", "softKeys", this.getNextHighestDepth());

 

softKeys._isLSKEnabled = false;

softKeys._LSK = "";

softKeys._isRSKEnabled = false;

softKeys._RSK = "";

softKeys._MSK = "Select";

softKeys._MSKTextColor = 0xFFFFFF;

 

softKeys.onSoftKeyDown = onSoftKeyDownHandler;

 

function onSoftKeyDownHandler(keySelected) {

      trace("The selected Soft Key is " + keySelected);

}

The soft key component essentially acts as a multiple button component that has one key press event handler, called onSoftKeyDown. In this example, the defined onSoftKeyDownHandler() method returns the keySelected parameter when either of the keys is pressed. This value is set to either “LSK”, “MSK”, or “RSK”. For this example only “MSK” will be returned, because the other buttons are disabled.

Using Status Bar

Using the status bar UI component allows you to simply add the status of the network connection, a battery life indicator, and the time to your applications.

Listing 4-3 demonstrates attaching the status bar component in the first frame of the timeline of a .fla file.

Listing 4-3: Using the StatusBar UI component

this.attachMovie("StatusBar", "statusBar", this.getNextHighestDepth());

 

statusBar._textColor = 0xFFF000;

statusBar._isBackgroundVisible = true;

statusBar._timeFormat = "am-pm";

statusBar._backgroundColor = 0xFFFFCC;

There are limitations on styling parts of the component; you can set the text color for the time _textColor and the background color _backgroundColor. However, you’re not able to change the color properties of the individual bars for network signal or battery indicator.

The component calls the setInterval() method to update the time, network signal, and battery capacity, making fscommand2() command calls to retrieve the signal level, power source, battery level, and the time. There may be a performance tradeoff when using this component, so use it wisely.

The background for the status bar component can be hidden by setting the _isBackgroundVisible property to false. The time format property _timeFormat can be changed so that it is displayed in either “24hr” or “am-pm” format.

Figure 4-5 shows the status bar component in Device Central.

Figure 4-5

When testing this component in Device Central, be sure to experiment with the Device Status and Network Status Panels in the emulator. Here, you can change the battery and signal level, and then see the output of the component in the device emulator.

Using Visual Indicators

Indicators provide a visual reference to something that is currently taking place during the activity of a mobile application. There are two Sony Ericsson UI components readily available that you can use in your applications, the Progress Indicator and the Wait Indicator.

The Progress Indicator

When you want to present the user with a precise representation of progression, use the progress indicator. This component should be used when you know the duration of the process taking place; for example, this could be the total number of bytes for a file download or the total length of a media track. These are definitive processes for which the progress can be measured.

NOTE: You can only use progress indicators in situations where you know the minimum and maximum values of progression.

You have the option of setting the indicators as either a bar or circle, and the component has the following events that you can create event handlers for:

  • onCompleteWhen the progress is complete.

  • onProgressWhen the progress value changes, you can notify the user.

The component has the following methods:

  • getProgress()Returns the value progress.

  • setProgress()Sets the progress and displays the new value

  • getWidth()Returns the width of the component.

  • setWidth()Sets the width of the component.

Listing 4-18 shows an example of how the progress indicator simulates a named progressBar in action using a timer setInterval() to increment the progress indicators through the setProgress() method.

Listing 4-18: Using the ProgressIndicator UI component

this.attachMovie("Title", "statusTitle", this.getNextHighestDepth());

 

statusTitle._text = "Progress Indicator";

statusTitle._textColor = 0xFFFFFF;

statusTitle._backgroundColor = 0x387796;

 

this.attachMovie("ProgressIndicator", "progressBar", this.getNextHighestDepth());

 

progressBar._x = 30;

progressBar._y = 100;

progressBar._width = 200;

progressBar._backgroundColor = 0xffffff;

progressBar._effectColor = 0x074A81;

progressBar._fillColor = 0x5FA1C2;

progressBar._hasEffect = true;

progressBar._isPercentageText = true;

progressBar._maximum = 100;

progressBar._minimum = 0;

progressBar._shape = "Bar";

 

progressBar.onComplete = onCompleteHandler;

 

function onCompleteHandler(){

      clearInterval(progressBarntervalID);

}

 

var pIntervalID:Number;

pIntervalID = setInterval(updateProgress, 100);

 

var pValue:Number = 0;

 

function updateProgress(){

      progressBar.setProgress(pValue++);

}

When you run this example, you’ll see the progress indicator incremented from 0% to 100%. This is achieved by updating the _value property and calling the setProgress() method. The _maximum property of the progress indicator is set to 100, and _minimum is set to 0.

You have the option of displaying the percentage text for the progress indicator through the _percentageText property.

The value displayed in the percentage text is determined by a calculation of the _value, _minimum, and _maximum properties of the progress indicator. If you don’t want to display the percentage text, you set the _isPercentageText value to false.

With the progress indicator you can additionally set an effect color property called _effectColor. This is only displayed when the _shape is set to “bar.” You can turn off the effect by setting _hasEffect to false.

The Wait Indicator

The wait indicator similarly presents the user with a graphical representation to indicate that a process is taking place in the application, but over an indeterminable amount of time.

You use the wait indicator instead of the progress indicator when a process in your application is taking an unknown amount of time. You cannot set the progress of the wait indicator, and it doesn’t have a _minimum or _maximum properties.

Listing 4-19 details a snippet of code that demonstrates how to attach the WaitIndicator from the library to the stage and style it as a circle.

Listing 4-19: Using the WaitIndicator UI component

this.attachMovie("WaitIndicator", "waitCircle", his.getNextHighestDepth());

 

waitCircle._x = 15;

waitCircle._y = 100;

waitCircle._backgroundColor = 0x074A81;

waitCircle._fillColor = 0x5FA1C2;

waitCircle._shape = "Circle";

Both the WaitIndicator and ProgressIndicator have the _shape property, which allows you to define whether the component appears as a “bar” or “circle.” There are no states for either type of indicator, but you can set the fill property, called _fillColor, and the background property, called _backgroundColor.

With both components you can also set and retrieve the width of the components through the setWidth() and getWidth() methods, which is especially handy when you want to limit the space the component occupies.

This article is excerpted from chapter 4 "UI Components" of the book "Professional Flash Lite Mobile Development" by J. G. Anderson (ISBN: 978-0-470-54748-9, Wrox, 2010, Copyright Wiley Publishing Inc.)

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *