7 Replies Latest reply on Jun 5, 2007 1:36 PM by JabbyPandaUA

    Horizontal list and images

    nathanAz
      The code shows that I am loading two .png's. When the application is run the two image tags show the images however the horizontal list does not show the images. In the images place are that standard placeholder when images are not available. Does anyone see what I am doing wrong. Note that since the image tags show the images it seems to me the HorizontalList should be able to show the images.

      I have tried using the same ArrayCollection as the Images use and get the same result. The method that is shown below was from the example in the flex documentation.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
      <mx:Script>
      <![CDATA[
      import mx.controls.Image;
      import mx.collections.ArrayCollection;
      import mx.collections.ListCollectionView;
      [Bindable]
      [Embed(source="C:/Documents and Settings/nathan/My Documents/Flex Builder 2/nmx/com/golfclubadmin/assets/encoder.png")]
      public var encoderClass:Class;
      [Bindable]
      [Embed(source="C:/Documents and Settings/nathan/My Documents/Flex Builder 2/nmx/com/golfclubadmin/assets/audio.png")]
      public var audioClass:Class;
      [Bindable]
      private var graphicList:ArrayCollection;
      public static var cat:Array;

      public function init():void {
      cat = [new audioClass(), new encoderClass()];
      graphicList = new ArrayCollection(cat);
      /* hl.dataProvider = graphicList; */
      }

      ]]>
      </mx:Script>
      <mx:Panel title="HorizontalList Control Example" height="75%" width="75%"
      paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
      <mx:HorizontalList columnWidth="100" rowHeight="100" id="hl" x="10" y="30" >
      <mx:dataProvider>
      <mx:Array>
      <mx:Object label="audio Source" icon="{audioClass}"/>
      <mx:Object label="Encoder" icon="{encoderClass}"/>
      </mx:Array>
      </mx:dataProvider>
      <mx:itemRenderer>
      <mx:Component>
      <mx:Image width="50" height="50"/>
      </mx:Component>
      </mx:itemRenderer>
      </mx:HorizontalList>
      <mx:Image id="aud" x="0" y="100" width="50" height="50" source="{graphicList.getItemAt(0)}"/>
      <mx:Image id="enc" x="0" y="160" source="{graphicList.getItemAt(1)}"/>
      </mx:Panel>
      </mx:Application>
        • 1. Re: Horizontal list and images
          JabbyPandaUA Level 3
          Are you 100% certain that paths to images are correct?

          Do you really need to use <mx:HorizontalList> or <mx:HBox> would be more than fine for you?


          Please move <mx:Image> tags out of <mx:HorizontalList> and test whether you can simple display an embedded external image inside your Flex app
          • 2. Re: Horizontal list and images
            nathanAz Level 1
            Hi JabbyPandaUA,

            As you see in the code, I have two image tags that are outside of the HorizontalList that display the images. I will take your advice and use HBox as the source of the images. That will work in my case. I just thought this to be an issue that is easily solved and I am one that treats these issues as puzzles until I figure them out. In this case I have spent too much time trying to solve it and thought that it was time for this group to solve the puzzle. I hate not having the solution because it makes me worry that FLEX is not ready for primetime or that I am not ready for primetime. Either one of these results is upsetting to me as you can well recognize.

            _Nathan
            • 3. Re: Horizontal list and images
              JabbyPandaUA Level 3
              Flex is ready for primetime, the new developers just have to put a little bit of effort to learn MXML and ActionScript 3 :)

              http://livedocs.adobe.com/flex/2/docs/00000972.html
              Does this sample code work with your image paths?
              • 4. Re: Horizontal list and images
                nathanAz Level 1
                Hi JabbyPandaUA,

                Thank you for your reply. There is no need to run that sample code because it works using an HBox component by just replacing the HorizontalList as you suggested. If you think running that sample code is still useful I can run it but the paths are good because now my code looks like the following and the images show.

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
                <mx:Script>
                <![CDATA[
                import mx.controls.Image;
                import mx.collections.ArrayCollection;
                import mx.collections.ListCollectionView;
                [Bindable]
                [Embed(source="C:/Documents and Settings/nathan/My Documents/Flex Builder 2/nmx/com/golfclubadmin/assets/encoder.png")]
                public var encoderClass:Class;
                [Bindable]
                [Embed(source="C:/Documents and Settings/nathan/My Documents/Flex Builder 2/nmx/com/golfclubadmin/assets/audio.png")]
                public var audioClass:Class;
                [Bindable]
                private var graphicList:ArrayCollection;
                public static var cat:Array;

                public function init():void {
                cat = [new audioClass(), new encoderClass()];
                graphicList = new ArrayCollection(cat);
                /* hl.dataProvider = graphicList; */
                }

                ]]>
                </mx:Script>
                <mx:Panel title="HorizontalList Control Example" height="75%" width="75%"
                paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
                <mx:HBox id="hb" x="10" y="30" borderColor="#333" borderStyle="solid" borderThickness="2" dr>
                <mx:Image id="aud" x="0" y="100" width="50" height="50" source="{graphicList.getItemAt(0)}"/>
                <mx:Image id="enc" x="0" y="160" width="50" height="50" source="{graphicList.getItemAt(1)}"/>
                </mx:HBox>

                </mx:Panel>
                </mx:Application>
                • 5. Re: Horizontal list and images
                  JabbyPandaUA Level 3
                  Nice to hear that.
                  So I guess we are all set now.
                  • 6. Re: Horizontal list and images
                    nathanAz Level 1
                    Hi JabbyPandaUA,

                    Not really set. Although I can make them images show on HBox control, if I substitute in HorizontalList then I get the place holders. I do not need to use the HorizontalList but I wonder why it does not work?

                    _Nathan
                    • 7. Re: Horizontal list and images
                      JabbyPandaUA Level 3
                      In the reference code you had submitted at the very start of this conversation you had made an error.

                      ..

                      <mx:HorizontalList columnWidth="100" rowHeight="100" id="hl" x="10" y="30" >
                      <mx:dataProvider>
                      <mx:Array>
                      <mx:Object label="audio Source" icon="{audioClass}"/>
                      <mx:Object label="Encoder" icon="{encoderClass}"/>
                      </mx:Array>
                      </mx:dataProvider>
                      <mx:itemRenderer>
                      <mx:Component>
                      <mx:Image width="50" height="50"/>
                      </mx:Component>
                      </mx:itemRenderer>
                      </mx:HorizontalList>

                      .. WRONG
                      <mx:Image id="aud" x="0" y="100" width="50" height="50" source="{graphicList.getItemAt(0)}"/>

                      <mx:Image id="enc" x="0" y="160" source="{graphicList.getItemAt(1)}"/>

                      ...WRONG


                      You should directly assign source attribute of <mx:Image> inside item renderer for <mx:HorizontalList>