3 Replies Latest reply on Aug 18, 2009 1:17 AM by XTorcha

    Linking images in HorizontalList

    XTorcha

      I am trying to create a Horizontal List of images which each link to a different webpage. I have simplified my code below. The Button in the Horizontal List works correctly when moved out of the HorizontalList, so I know the functions work. The icon, however, does not display, and I'm sure the path is correct. I will be using a lot of buttons, so I need to use the Horizontal List.

       

      Where am I going wrong?

       

      ------------------------------------------------------------------------------------------ --------

      <mx:Script>
          <![CDATA[

                    [Bindable]
                   [Embed(source="reading1.jpg")]
                   public var reading1:Class;


                  public function init():void {
                  r1ID.addEventListener(MouseEvent.CLICK, reading1Link);
                  }

                  public function reading1Link(event:MouseEvent):void {
                  var r1:URLRequest = new URLRequest("http://www.google.co.uk");
                  navigateToURL(r1, "_new");

                }


          ]]>
      </mx:Script>


          <mx:HorizontalList id="ReadingFlash">               
                  <mx:dataProvider>
                      <mx:Array>
                          <mx:Button label="Label 1" id="r1ID" icon="{reading1}"/>

                       </mx:Array>
                  </mx:dataProvider>
          </mx:HorizontalList>

        • 1. Re: Linking images in HorizontalList
          Gregory Lafrance Level 6

          It could be because you are adding the button in the data provider, which is not really how it should be done.

           

          It is best to have the label and icon path in the data provider, in objects or xml, and then have am itemRenderer for the HorizontalList that generates the buttons from the data. That could be the problem.

           

          http://livedocs.adobe.com/flex/3/html/help.html?content=cellrenderer_8.html

           

          http://livedocs.adobe.com/flex/3/html/help.html?content=dpcontrols_2.html

           

          If this post answers your question or helps, please mark it as such.

          1 person found this helpful
          • 2. Re: Linking images in HorizontalList
            XTorcha Level 1

            Thanks Greg, I hadn't thought it necessary to use XML as it's a small, one-off application. I should never underestimateFlex forcing a lot of work for little result! You pointed me in the right direction anyway, I've attached the code in case anyone else has trouble with this.

             

            Having loaded the XML, and binding the 'name' and 'thumbnail' nodes, I just needed to bind the 'webpage' node. You can't bind to a URLRequest, you have to reference the node as I have below.

             

             

            <mx:Script>
                <![CDATA[
                            import flash.events.Event;
                            import flash.net.URLRequest;
                   
                            public function init():void {
                            slideList.addEventListener(MouseEvent.CLICK, init);
                            var r1:URLRequest = new URLRequest(currentImage.webpage);
                            navigateToURL(r1, "_new");}           
                ]]>
            </mx:Script>

             

              <mx:ArrayCollection id="slideAC" source="{slideModel.product}"/>
              <mx:Object id="currentImage"/>
               
                <mx:HorizontalList id="slideList" dataProvider="{slideAC}"
                  width="500" height="155" rowHeight="125" columnWidth="120"
                  change="currentImage=event.target.selectedItem" click="init()">
                  <mx:itemRenderer>
                    <mx:Component>
                      <mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
                        verticalAlign="middle" horizontalAlign="center">
                        <mx:SWFLoader source="{data.thumbnail}"/>
                        <mx:Label text="{data.name}"/>
                      </mx:VBox>
                    </mx:Component>
                  </mx:itemRenderer>
                </mx:HorizontalList>

            • 3. Re: Linking images in HorizontalList
              XTorcha Level 1

              Solution as posted by myself