4 Replies Latest reply on Nov 18, 2009 4:36 AM by frogman.pep

    Horizontal List elements not resizing properly

    frogman.pep

      Go here to see the problem in action.  There will not be much difference if your resolution is lower than 1280 x 1024.  First click on Home and then mouse over Portfolio so you can click on Illustration.  Notice the icons in the horizontal list are not fitting properly.  If you go back and click home and then follow the same process they will resize, at least the icons that are not visible.  So if you scroll to the right you'll see those guys are good and then when you scroll back to the left, the ones that were not visible have now resized as well.  If you follow the same process of clicking out and then coming back in they'll all fit properly.

       

      The project's structure goes like this.  Index is the start page which loads an xml file for the images and text, and loads the Illustration component which is where the horizontal list resides.  The Illustration component is passed the values for the xml files in an ArrayCollection from Index and uses Ill_Icon_Display as the itemRenderer for the HorizontalList's icons.  Menus.as is the actionscript file Illustration.mxml uses.  Don't think it's needed to paste the code for the Index file but if you'd like to see more let me know.

       

      Illustration.mxml

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas  xmlns:mx="http://www.adobe.com/2006/mxml"
         xmlns:comp="components.*"  
         width="100%"
         height="100%"
         verticalScrollPolicy="auto">

      <mx:Script source="../assets/as/menus.as"/>

      <mx:constraintColumns>
        <mx:ConstraintColumn id="col1" width="20%"/>
        <mx:ConstraintColumn id="col2" width="65%"/>
        <mx:ConstraintColumn id="col3" width="15%"/> 
      </mx:constraintColumns>   
      <mx:constraintRows>
        <mx:ConstraintRow id="row1" height="20%"/> 
        <mx:ConstraintRow id="row2" height="60%"/>
        <mx:ConstraintRow id="row3" height="20%"/> 
      </mx:constraintRows>

      <mx:VBox width="100%"
          height="100%"
          horizontalCenter="true"
          verticalGap="0"
          left="col1:5"
          right="col1:5"
          top="row2:10"
          bottom="row2:10"
          horizontalAlign="center">
        <mx:Label text="Notes"
           fontFamily="Agency FB"
           color="white"
           fontSize="30"/>
        <mx:TextArea fontFamily="Agency FB"
            fontSize="21"
            textAlign="center"
            color="white"
            backgroundColor="black"
            text="{descriptionText}"
            alpha=".6"
            width="100%"
            height="300"/>
      </mx:VBox>    
      <mx:Panel backgroundColor="black"      
          borderThicknessTop="-5"
          borderThicknessBottom="10"
          paddingTop="0"
          borderAlpha="1"
          borderColor="#676d76"   
          top="row2:10"
          bottom="row2:0"       
          right="col2:0"
          left="col2:0"
          height="100%"
          width="100%">
        <mx:Image id="picState"         
           scaleContent="true"
           horizontalAlign="center"
           verticalAlign="middle"       
           width="100%"
           height="100%"/>
      </mx:Panel>

      <mx:VBox    width="100%"
            height="100%"
               verticalGap="0"
               horizontalAlign="center"
               borderStyle="solid"
               cornerRadius="10"
               left="col1:10"
               right="col3:10"
               top="row3:10"     
            bottom="row3:5">

        <mx:HorizontalList  id="iconList"      
             dataProvider="{picData}"
             cornerRadius="2"                    
                width="98%" height="100%"
                columnCount="5"
                verticalAlign="middle"
                backgroundAlpha=".2"         
                change="displayIll_IconDetails(event)"
                itemRenderer="components.Ill_Icon_Display"/>
      </mx:VBox>
      </mx:Canvas>

       

      menu.as

       

       

      import flash.events.Event;
      import mx.collections.*;
      import mx.events.MenuEvent;
      import mx.resources.*;
      import mx.rpc.events.*;

      [Bindable]
      public var pic:ArrayCollection;

      [Bindable]
      public var picData:ArrayCollection;

      [Bindable]
      public var selectedPic:Object;

      [Bindable]

      public var descriptionText:String;

      [Bindable]

      public var picturenumberText:String;

      private function picHandler(event:ResultEvent):void{
      pic = event.result.pics.image;   
      }

      private function displayIll_IconDetails(event:Event):void{
      selectedPic = new Object();
      selectedPic = event.currentTarget.selectedItem;
      picState.load('galleries/Illustration/' + selectedPic.file + '.png');
      descriptionText = selectedPic.desc;
      picturenumberText = selectedPic.number;   
      }

       

       

      Ill_Icon_Display.mxml

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Image   xmlns:mx="http://www.adobe.com/2006/mxml"
        source="galleries/Illustration_Icons/{data.filename}.png"
        scaleContent="true"
        minHeight="90"
        minWidth="90"/>

       

        • 1. Re: Horizontal List elements not resizing properly
          Flex harUI Adobe Employee

          That was unreadable.  Are you using a custom renderer?  The code for that will be key.

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: Horizontal List elements not resizing properly
            frogman.pep Level 1

            Oh, I think I see what you mean, the xml file that populates the list?  If so here it is.

             

            Illustration.xml (Just pasted one element, there's like 6 or 7)

             

            <?xml version="1.0" encoding="UTF-8"?>

            <pics>

            <image filename="Illustration_Icon_Chefs" title="Chef's Logo" file="Chef's">

            <Notes_lab>true</Notes_lab>

            <Notes_ta>true</Notes_ta>

            <Programs_txt>true</Programs_txt>

            <Program1_Pan>true</Program1_Pan>

            <Program1_Pan_Source>Illustrator_CS_Icon</Program1_Pan_Source>

            <Program1_lab>true</Program1_lab>

            <Program1_lab_txt>Illustrator CS</Program1_lab_txt>

            <desc>A logo created for Chef's Kitchen Restaurant</desc>

            </image>

            </pics>

             

            If that is not what you meant I could package up the project and send it to you later.  I'm on my way out the door for several hours and if you'd like the project I'll get that out to you when I return.  Thanks for your time.

             

            • 3. Re: Horizontal List elements not resizing properly
              Flex harUI Adobe Employee

              I was able to read the code better from the website.  You've set minHeight/minWidth to 90.  You might want to use other numbers.

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

              Blog: http://blogs.adobe.com/aharui

              • 4. Re: Horizontal List elements not resizing properly
                frogman.pep Level 1

                There's more to this issue than getting the size right, or at least on my PC.  Can any one check if they are getting this same issue?  Check the

                site, set your screen resolution to 1024 x 768, click on the Portfolio - Illustration section, go out by clicking on the 'Home' button and then come back in, scroll over on the horizontal list to make sure the icons fully fit.  If not you might have to select one and then go out and come back in.  Once these icons draw to full size my menu (at the top right of the screen) is not functional.  Now if I change to Full Screen (F11) or change to a higher resolution the menu is operational again.

                 

                So the debugger in me is wondering first, why are the icons in the horizontal list not drawn to full size initially (the graphic is a 125 x 125 pixel document, this is also happening when the min height | width is not being applied) and what step makes them draw to full size on exiting that state and then re-entering it?  And now, why does the menu seem to be drawn off the stage at a lower screen resolution (as I could not get this to occur at a higher resolution or as mentioned in Full Screen) when the icons are finally drawn to full size?