3 Replies Latest reply on Jun 28, 2011 3:58 PM by Energetic Pixels

    Controlling rendered Image size within a datagroup

    Energetic Pixels

      Ok.  I am stuck.  If I was using Halo objects, I would have programmed this:

      <mx:Panel width="250" height="457" layout="absolute" id="thumbsPanel" title="Thumbnails" horizontalCenter="-292" verticalCenter="4.5">
      
                 <mx:Tile direction="horizontal" 
                           borderStyle="none"
                       horizontalGap="10" verticalGap="10" 
                       paddingTop="5" 
                       paddingBottom="5" 
                       paddingLeft="5" 
                       paddingRight="5"  
                       width="210" height="397" 
                           verticalCenter="0" horizontalCenter="0">
               <mx:Repeater dataProvider="{galleryData.lastResult.gallery.images.img}" id="imageRepeater">
                <mx:HBox width="50" height="50" verticalAlign="middle" horizontalAlign="center">
                      <mx:Image source="{imageRepeater.currentItem}" 
                                  width="40" height="40" 
                                  click="getImage(event)"
                                  rollOverEffect="{over}"  
                                  rollOutEffect="{out}"        
                                  horizontalAlign="center" verticalAlign="middle"/>
                      </mx:HBox>
                 </mx:Repeater>
                 </mx:Tile>
           </mx:Panel>
      

       

      But I am trying to use as much Spark technology with my current project as possible. It is my first attempt at using the technology/methodology since switching to Flex 4.  In my new code below, I would like to be able to control the image (thumbnail) size within the viewport.  But when I try and follow the above idea, FB4 gives me an error.  Most of the images that the view port will display have sources that are much much bigger in size.  Any direction would "bow'd to".

       

      <s:Panel id="thumbsPanel" left="10" top="78" width="100%" maxWidth="384" title="Thumbnails">
                <s:DataGroup id="mediaGroup" dataProvider="{tempData}"
                                itemRendererFunction="rendererFunction">
                     <s:layout>
                          <s:VerticalLayout useVirtualLayout="true"/>
                     </s:layout>
                     <!--<s:Image id="previewImg" width="40" height="40" horizontalAlign="center" verticalAlign="middle" source="{mediaGroup}"/>-->
                </s:DataGroup>
                <s:VScrollBar right="0" height="100%" hasFocusableChildren="true" viewport="{mediaGroup}"/>
           </s:Panel>
      

       

       

      Tony

        • 1. Re: Controlling rendered Image size within a datagroup
          Shongrunden Adobe Employee

          What is the code in your item renderer?

          1 person found this helpful
          • 2. Re: Controlling rendered Image size within a datagroup
            Energetic Pixels Level 1

            Hey, I started down that road.

             

             

            <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                xmlns:s="library://ns.adobe.com/flex/spark" 
                                xmlns:mx="library://ns.adobe.com/flex/mx" 
                                autoDrawBackground="true">
            
                      <s:Label text="{data}"
                                 height="30" width="40"
                                 color="black" textAlign="center"
                                 verticalAlign="middle"  />
                      
                      <s:Image width="100" height="100" 
                                 source="{data.source}" 
                                 horizontalAlign="center" verticalAlign="middle" />
                 
            </s:ItemRenderer>
            

             

             

            The attachment is what I finally get.  But I notice there is a big space between the "title" of the graphic and the thumbnail picture. When I change the height setting of the Label, it starts eating my text.  I tried VGroup wrapping the Label and Image above, but the distance grows between the Label and Image.

             

            Also, notice that I have something not intended rendering.  Where did that "[object ...." come from that is behind the pictures????

            notWhatIWanted.jpg

             

            Here is the main code (panel plus AS coding).  The code above is the NameDisplay.mxml  Commented code is what I started with.

             

             

            <fx:Script>
                      <![CDATA[
                           import components.NameDisplay;
                           
                           import spark.skins.spark.DefaultComplexItemRenderer;
                           import spark.skins.spark.DefaultItemRenderer;
                           
                           private function rendererFunction(item:Object):ClassFactory {
                                return new ClassFactory(NameDisplay);
                                
                                /* if (item is String) {
                                     return new ClassFactory(NameDisplay);
                                } else {
                                     return new ClassFactory(DefaultComplexItemRenderer);
                                }*?
                           }
                      ]]>
                 </fx:Script>
            
                 <s:Panel id="thumbsPanel" left="10" top="78" width="100%" maxWidth="384" title="Thumbnails">
                      <s:DataGroup id="mediaGroup" dataProvider="{tempData}" itemRendererFunction="rendererFunction">
                           <s:layout>
                                <s:VerticalLayout useVirtualLayout="true" />
                           </s:layout>
                      </s:DataGroup>
                      <s:VScrollBar right="0" height="100%" viewport="{mediaGroup}"/>
                 </s:Panel>
            

             

             

             

            Tony

            • 3. Re: Controlling rendered Image size within a datagroup
              Energetic Pixels Level 1

              Since my original problem was controlling the rendered image size, between myself and this forum, I figured out my error, which I believe was IE cache getting in the way.

              Tony