Question

I’m coding a image viewer application for tablets using Adobe Flex 4.5. Basically, I have a list with a custom item renderer that renders the images in the list. I have set up the image size to be the width/height of the tablet device in portrait (600×1024). This way, only one image can be seen at one time. The problem is that when the device orients to landscape, this design obviously screws up. My question is how can I get it to change the width/height of my images automatically when the orientation changes such that only one image is shown at a time? Or, is there a better way of approaching this?

This is my list:

<s:List width="600" height="1024"
        id="imageList" dataProvider="{data}" itemRenderer="{inlineRenderer}"  click="imageList_clickHandler(event)"
        verticalScrollPolicy="off" useVirtualLayout="true">
    <s:layout>
        <s:HorizontalLayout columnWidth="600"/>
    </s:layout>
</s:List>

This is the item renderer:

<s:Scroller width="600" height="1024">
                <s:Group>
                    <s:Image source="{data.imageurl}" width="600" height="1024"
                                   contentLoader="{FlexGlobals.topLevelApplication.imageCache}"/>
                </s:Group> </s:Scroller>             

Answer 1

Here is an example of how to create an image only item renderer that handles orientation changes automatically:

<s:List id="list" width="100%" height="100%">
    <s:dataProvider>
        <s:ArrayList>
            <fx:String>http://www.google.com/images/logos/ps_logo2.png</fx:String>
            <fx:String>http://www.google.com/images/logos/ps_logo2.png</fx:String>
            <fx:String>http://www.google.com/images/logos/ps_logo2.png</fx:String>
            <fx:String>http://www.google.com/images/logos/ps_logo2.png</fx:String>
            <fx:String>http://www.google.com/images/logos/ps_logo2.png</fx:String>
        </s:ArrayList>
    </s:dataProvider>
    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer width="{outerDocument.list.width}" 
                            height="{outerDocument.list.height}">
                <fx:Script>
                    <![CDATA[
                        import spark.core.ContentCache;
                        [Bindable]
                        public static var imageCache:ContentCache = new ContentCache();

                        override public function set data(value:Object):void {
                            super.data = value;
                            bitmapImage.source = data;
                        }
                    ]]>
                </fx:Script>
                <s:BitmapImage id="bitmapImage" contentLoader="{imageCache}" width="100%" height="100%" />
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:List>

This renderer should perform pretty well even tho it is written in MXML because it follows some simple optimization rules (see http://flexponential.com/2011/04/20/flex-performance-tips-tricks/), but you’ll want to test it in your application to make sure it feels ok.

In general Adobe recommends writing item renderers in ActionScript by extending LabelItemRenderer or IconItemRenderer for best performance. If the renderer above isn’t fast enough for you then you might want to check out https://bugs.adobe.com/jira/browse/SDK-30043 for a discussion on the current problem and workaround to doing this with IconItemRenderer.