10 Replies Latest reply on May 14, 2012 4:37 AM by VivD

    Scrollable Image Grid on Mobile

    VivD Level 1

      I am new to Flex and have been going through whatever tutorials I've managed to find in the past wek or so. I was thinking of creating a mobile app as a test project to hone my skills .

       

      I have a couple of questions:-

       

      1. I want to create a scrollable grid of images for mobile. Maybe 1 column or multi column. The source of the images could be an API call or to keep it simple an arraycollection of objects containing the image title and image url. Can anyone please post an example.

       

      <s:ArrayCollection id="imageList">

       

                                    <fx:Object imageTitle="Test 1" imageURL="resources/1.jpg"/>

                                    <fx:Object imageTitle="Test 2" imageURL="resources/2.jpg"/>

                                    <fx:Object imageTitle="Test 3" imageURL="resources/3.jpg"/>

                                    <fx:Object imageTitle="Test 4" imageURL="resources/4.jpg"/>

                                    <fx:Object imageTitle="Test 5" imageURL="resources/5.jpg"/>

                                    <fx:Object imageTitle="Test 6" imageURL="resources/6.jpg"/>

                                    <fx:Object imageTitle="Test 7" imageURL="resources/7.jpg"/>

                                    <fx:Object imageTitle="Test 8" imageURL="resources/8.jpg"/>

                                    <fx:Object imageTitle="Test 9" imageURL="resources/9.jpg"/>

       

                          </s:ArrayCollection>

       

       

      2. What resources (websites/books) would you recommend so I can seriously pursue Flex mobile programming ensuring my foundations are good.

        • 2. Re: Scrollable Image Grid on Mobile
          VivD Level 1

          Thanks.

           

          I was mainly struggling with displaying multiple images in a row i.e. a grid.

           

          I evntually did it this way

           

          <s:List id="list" width="100%" height="100%" dataProvider="imageList">

                           

                              <s:layout>

                                             <s:TileLayout requestedColumnCount="2" />

                              </s:layout>

           

                              <s:itemRenderer>

                                             <fx:Component>

                                                            <s:ItemRenderer>

                                                                           <s:VGroup width="100%">

                                                                                          <s:BitmapImage source="imageURL"/>

                                                                           </s:VGroup>

                                                            </s:ItemRenderer>

                                             </fx:Component>

                              </s:itemRenderer>

           

                    </s:List>

           

          Is this implementation ideal for mobile?

          • 3. Re: Scrollable Image Grid on Mobile
            Shongrunden Adobe Employee

            You can optimize your renderer a little further.  For example get rid of the excess VGroup:

             

                                               <fx:Component>

                                                              <s:ItemRenderer>

                                                                             <s:layout><s:VerticalLayout /></s:layout>

                                                                             <s:BitmapImage source="imageURL"/>

                                                              </s:ItemRenderer>

                                               </fx:Component>

            You'll probably want to look into image caching as well.  See this post for more information on optimizing MXML item renderers for mobile: http://flexponential.com/2011/10/05/performance-tuning-mobile-flex-applications/

             

            In fact if you just have an icon in your renderer you should consider using IconItemRenderer with labelField=""

            1 person found this helpful
            • 4. Re: Scrollable Image Grid on Mobile
              VivD Level 1

              Thanks so much. I did feel the need for performance improvements as the app did seem a little slow.

               

              Regarding the renderer, I am displaying images (140/140 px) in a grid style so don't think the icon renderer is an option but I will give it a try to see if it produces the same effect as a itemrenderer with a bitmap.

              • 5. Re: Scrollable Image Grid on Mobile
                Shongrunden Adobe Employee

                IconItemRenderer should be able to accomplish this use case, for example:

                 

                <s:List id="list" width="100%" height="100%">

                    <s:ArrayList>

                        <s:DataItem myIconField="assets/logo_android.png" />

                        <s:DataItem myIconField="assets/logo_android.png" />

                        <s:DataItem myIconField="assets/logo_android.png" />

                        <s:DataItem myIconField="assets/logo_android.png" />

                    </s:ArrayList>

                    <s:layout>

                        <s:TileLayout horizontalGap="1" verticalGap="1" requestedColumnCount="2" />

                    </s:layout>

                    <s:itemRenderer>

                        <fx:Component>

                            <s:IconItemRenderer paddingLeft="0" paddingTop="0" paddingBottom="0" paddingRight="0"

                                                labelField=""

                                                iconField="myIconField" iconWidth="140" iconHeight="140"/>

                        </fx:Component>

                    </s:itemRenderer>

                </s:List>

                 

                Note that you might want to extend IconItemRenderer and override drawBackground() to change how the separators/borders are drawn.  This will be a little bit easier in 4.6 with the introduction of the drawBorders() method per SDK-27737.

                • 6. Re: Scrollable Image Grid on Mobile
                  VivD Level 1

                  Thanks so much for those tips. I tried out the IconItemRender method and made performance improvements based on the link you provided.

                   

                  The performance optimized version seemed to perform better that IconItemRenderer based on the code below.

                   

                  PERFORMANCE OPTIMIZED VERSION

                  <s:ItemRenderer opaqueBackground="#000000" cacheAsBitmap="true" autoDrawBackground="false">

                       <fx:Script>

                                                                                   <![CDATA[

                                                                                                            import spark.core.ContentCache;

                   

                                                                                                            static public const s_cache:ContentCache = new ContentCache();

                                                                                   ]]>

                                                                    </fx:Script>

                                                                         <s:BitmapImage  source="{data.image_url}"                                                                                  

                                                                                                                                   smooth="true"                                                                                            

                                                                                                                                   height="140" width="140"

                                                                                                                                   contentLoader="{s_cache}"/>

                  </s:ItemRenderer>

                   

                  Extended ICON ITEM RENDERER with drawBackground() overridden

                  <components:MyIconItemRenderer paddingLeft="0" paddingTop="0" paddingBottom="0" paddingRight="0"

                                                                                                                                                               labelField=""

                                                                                                                                                               iconField="image_url" iconWidth="140" iconHeight="140"/>

                   

                   

                   

                  override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void

                  {

                   

                       graphics.beginFill(0x000000,0);

                   

                  }

                   

                   

                  Am I doing something wrong with the IconItemRenderer. It is supposed to perform better isn't it?

                   

                  Note: I didn't really do any scientific tests as such to say one peformed better than the other but just stating based on my usage. Images seemed to load a little faster with the performance optimized version. Scrolling performance seemed same for both on slow scrolling and large throw.

                  • 7. Re: Scrollable Image Grid on Mobile
                    Shongrunden Adobe Employee

                    Your optimized MXML version and IconItemRenderer will probably have pretty comparable performance in most cases.  One difference is the IconItemRenderer has a little more sophisticated image loading and caching strategy.

                     

                    IconItemRenderer waits 100ms before loading an image.  You can customize this by changing the iconDelay style of IconItemRenderer.  You can also specify an embedded "loading icon" via the iconPlaceholder property if you're interested.

                     

                    I believe this 100ms delay was put in to maximize scrolling performance by not loading every image when they come into view.  For example if you do a large throw scroll you might not want to try to load every image along the way if they won't be in view for more than a split second.

                    • 8. Re: Scrollable Image Grid on Mobile
                      VivD Level 1

                      Made some modifications based on your comments and it works great now. Thanks.

                      • 9. Re: Scrollable Image Grid on Mobile
                        uno.monteiro

                        VivD wrote:

                         

                        Made some modifications based on your comments and it works great now. Thanks.

                        I'm having performance problems also what modifications did you made?

                        • 10. Re: Scrollable Image Grid on Mobile
                          VivD Level 1

                          It's been a while since I've worked on my code so don't quite remember all the changes.

                           

                          I basically did everything that was mentioned in the post below.

                          http://flexponential.com/2011/10/05/performance-tuning-mobile-flex-applications/

                           

                          Check out my app called "Pix" (http://goo.gl/rTulH) in the Android market and see if the performance of my scrollable image grid/gallery is better that yours or not. I can try and dig up some more and find out what other changes I made if it is indeed better. Very busy currently as I'm relocating but I'd certainly help out as much as I can.