Differences between mobile and desktop item renderers

An item renderer is often designed to appear differently in a mobile application than in a desktop application. Therefore, while it is possible, you typically do not use the same item renderer in a mobile application and in a desktop application.

For example, the differences between an item renderer for a mobile and a desktop application include the following:
  • The size of a mobile item renderer tends to be larger than for a desktop item renderer.

  • An item renderer for the selected item on in a mobile application usually indicates selection with a checkmark or other icon. For a desktop application, item renderers usually show selection by changing the backgroundColor style.

  • The caret in a mobile application is usually indicated by changing the backgroundColor style. For a desktop application, the caret is usually indicated by drawing a border around the item.

The way you create item renderers can also depend on whether the application is for a desktop application or for a mobile application. You define item renderers in two ways:

  • MXML

    Use MXML to define item renderers for desktop applications. MXML item renderers are simple to implement, but do not provide the highest performance often necessary for mobile applications. You typically create an MXML item renderer as a subclass of the spark.components.ItemRenderer class.

    For a mobile application, if your component hosting the item renderer displays only has a few data items or does not support scrolling, you might be able to use an MXML item renderer.

  • ActionScript

    Use ActionScript for item renderers for applications that require the highest performance. For item renderers used in mobile applications, or for item renderers to use in both mobile and desktop applications, create them in ActionScript. For a mobile project, you typically create ActionScript item renderers as a subclass of the spark.components.LabelItemRenderer class.

Interacting with a mobile and desktop item renderer

The mx.core.UIComponent class defines the interactionMode style property that you use to configure components for the type of input used in the application. For the Halo and Spark themes, the default value is mouse to indicate that the mouse is the primary input device. For the Mobile theme, the default value is touch to indicate the primary input is the touch screen.

One important difference between item renderers for desktop and for mobile applications is the way you interact with the application. For desktop applications, you use a mouse to interact with the application. You can use the mouse to:
  • Move the mouse pointer over a data item. This is referred to as hovering over the item.

  • Select the item by clicking on it. Many Spark components let the user select multiple data items by using the Shift and Control keys in combination with the mouse.

  • Display a caret item. The caret item is the data item that currently has focus. The caret item can be the currently selected data item, or it can be a different item.

  • Drag and drop data items when enabled by the Spark control.

When you interact with an application on a mobile device, you often use a touch screen or a five-way navigation control, not a mouse. With a mobile application, the data items in a list-based control do not enter the hovered state, and you typically do not have to support drag and drop. Therefore, when implementing an item renderer for mobile applications, you do not have to worry about supporting those situations.

MXML item renderers define view states. View states provide MXML item renderers with a simple mechanism for handling the different states of the data item. In ActionScript item renderers, you do not use view states. Instead, you handle user interaction in the body of your item renderer.

Differences between down and selected item renderers in a mobile application

For mobile applications, an item renderer must distinguish between an item being in the down state and the item being in the selected state. An item is down when the user presses down on the item. An item is selected when the user releases their finger after pressing down on the item.

Note: In a desktop application, one where interactionMode is mouse, selection occurs on the mouseDown event.

When a user presses down on an item, the item renderer does not immediately enter the down state. Instead, the item renderer waits for the duration of time specified by the touchDelay property. The default delay duration specified by the touchDelay property is 100 ms.

This delay ensures that the user did not intend to initiate a scroll operation. If the item renderer immediately went to the down state, and the user intended to scroll, the item renderer would flicker from the normal state to the down state, and then back to the normal state. For more information on initiating a scroll operation in a mobile application, see Use scroll bars in a mobile application.