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:
size of a mobile item renderer tends to be larger than for a desktop
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:
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.
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.
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
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.