Question

I have an app build with Flex AIR that supports desktop and mobile devices.

Using an Item Renderer for a List components. Have some very common features, the only difference between desktop and mobile clients are the delete button gets triggered differently.

On Mobile I’m listening to a TransformGestureEvent.GESTURE_SWIPE event

On Desktop, I will show a delete X mark when mouse hover over the item.

Everything else are the same, it just the way it handle those two actions differently. I don’t want to have one Item Rendered for both desktop and mobile, that will cause unnecessary overhead for mobile devices. Hence if have item renderer for each platform then it will cause extra overhead for redundant code in both item renderers.

Any way to avoid the redundant code ?

Answer 1

This is untested, but it should work. This just uses a ternary to choose between the two classes using the Capabilities class.

<s:List itemRenderer="{ ( Capabilitiles.os.toLowerCase().indexOf( 'ios' ) != -1 || Capabilities.os.toLowerCase().indexOf( 'android' ) != -1 ) ? MOBILECLASS : DESKTOPCLASS }" />

Alternatively, you could set it in AS3.

private function creationCompleteHandler( e:Event ):void {
    if ( Capabilitiles.os.toLowerCase().indexOf( 'ios' ) != -1 || Capabilities.os.toLowerCase().indexOf( 'android' ) != -1 ) {
        list.itemRenderer = MobileClass;
    }
    else {
        list.itemRenderer = DesktopClass;
    }
}

Again, that is untested. I know I have experienced some odd issues when trying to set the itemRenderer property, so it may not like this. Worth a shot, though.