4 Replies Latest reply on Apr 25, 2008 7:40 PM by Jaguar280

    Trouble with HorizontalList and using hyperlink

    Jaguar280
      Hello everyone,

      im fairly new to flex and im looking for help coding this project. its a fairly simple project, im just trying to learn how flex functions currently. i've looked all over the documentation and searched google but i still cannot solve my problem. what im trying to do is create a horizontal list that allows you to click on one of the images and take you to a specific website. below i have inserted my code. so far, i have been able to successfully create the horizontal list and link to a url once you click on one of the images. what i would like to do is have every image target a different url. I tried just inserting the navigatetourl method (seen directly below) within the object but that did not work.

      <mx:Object label="March 12, 2008&#13;Detroit, MI" icon="{event2}"click="navigateToURL(new URLRequest(' http://www.google.com/'+photo), '_blank')"/>

      i also tried adding a variable to the end of the url and when you click, changing the variable. once again that did not work. is there an easier way to have each object hyperlink to a different website? thank you so much in advance!!




      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="392" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
      <mx:Script>
      <![CDATA[

      [Bindable]
      [Embed(source="event1.png")]
      public var event1:Class;

      [Bindable]
      [Embed(source="event2.png")]
      public var event2:Class;

      [Bindable]
      [Embed(source="event3.png")]
      public var event3:Class;

      [Bindable]
      [Embed(source="event4.png")]
      public var event4:Class;

      [Bindable]
      [Embed(source="event5.png")]
      public var event5:Class;

      public var photo:String="test";


      public function selectPhoto():void {
      var photo:String="test2";
      }


      ]]>
      </mx:Script>

      <mx:Panel title="Upcoming Events: Click on the flyers below to enlarge." height="392" width="600"
      paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0" borderColor="#006BFC" themeColor="#009DFF" cornerRadius="20" alpha="1.0">

      <!--<mx:Label width="100%" color="blue"
      text="Click on one of the images to enlarge."/>-->

      <mx:HorizontalList id="PosterSelect" height="352" columnCount="3" columnWidth="200" width="580" rollOverColor="#ff3344" themeColor="#DC240B" click="navigateToURL(new URLRequest(' http://www.google.com/'+photo), '_blank')">
      <mx:dataProvider>
      <mx:Array>
      <mx:Object label="March 12, 2008&#13;Detroit, MI" icon="{event1}" click="selectPhoto()"/>
      <mx:Object label="March 12, 2008&#13;Detroit, MI" icon="{event2}"/>
      <mx:Object label="March 12, 2008&#13;Detroit, MI" icon="{event3}"/>
      <mx:Object label="March 12, 2008&#13;Detroit, MI" icon="{event4}"/>
      <mx:Object label="March 12, 2008&#13;Detroit, MI" icon="{event5}"/>
      </mx:Array>
      </mx:dataProvider>
      </mx:HorizontalList>

      </mx:Panel>

      </mx:Application>
        • 1. Re: Trouble with HorizontalList and using hyperlink
          atta707 Level 2
          1) you might want to use itemClick event for the list instead of click event as the former gives you row and column indices. although it doesn't matter in this case.
          2) use the selectedItem property to uniquely identify the row clicked. Use some property of the current row, like e.g. I've used the icon property, add it to the URL string and use nagivateTo method.

          <mx:HorizontalList id="PosterSelect" height="352" columnCount="3" columnWidth="200"
          width="580" rollOverColor="#ff3344" themeColor="#DC240B"
          itemClick="itemClicked(event)">

          private function itemClicked(event:ListEvent) : void {
          var icon:Object = this.PosterSelect.selectedItem.icon;
          var url:String = ' http://www.google.com/' + icon;
          Alert.show(url);
          // navigateToURL(new URLRequest(url), '_blank');
          }

          hope this helps.

          • 2. Trouble with HorizontalList and using hyperlink
            Jaguar280 Level 1
            thx for the help atta

            i switched up the code as you suggested but i ran into a small issue... when i select an image... the hyperlink comes up as this...

            http://www.google.com/%5Bclass%20PosterViewer_event1%5D

            i tried to target the label but the label property is used to title the image so i would not be able to set it to whatever i want. is there a different property that i can set within the objects for it to call? Could I personalize what each object brings up (i.e. by using something to the tune of defining another variable when click). what would be the easiest thing that would allow me to insert custom entries into the url for each object?

            thx so much for the help!

            update: i figured out that i could use the data property for each object to set whatever i want

            <mx:Object label="March 12, 2008&#13;Detroit, MI" icon="{event1}" data="events"/>

            links to http://www.google.com/events

            seems to work fine... is this the best way? also, what would be the best thing to read to learn how to insert external data (for example from an xml file) so that i can change both the label and whatever i have in the data field to variables... i would like to eventually make it so that someone can just edit info in an xml file so that they can change the pictures/labels/data rather than having to go in and edit the project each time. THANK U!
            • 3. Re: Trouble with HorizontalList and using hyperlink
              atta707 Level 2
              when you're writing a line like:
              <mx:Object label="March 12, 2008&#13;Detroit, MI" icon="{event1}" data="events"/>

              you are actually create an object class Object and all the class in AS3 are dynamic by default; that is you can add properties to a class on the fly much like a hash map. So, feel free to add any property such as:

              <mx:Object label="March 12, 2008&#13;Detroit, MI" icon="{event1}" queryString="blah" p1="foo" p2="bar"/>

              The selctedItem property returns you the instance of this object that's used to make the element in the list. so you can easily say:

              this.PosterSelect.selectedItem.queryString
              this.PosterSelect.selectedItem.p1
              this.PosterSelect.selectedItem.p2

              So what you've done is correct.

              Sure you should use XML and XMLCollection classes to set the dataProvider and you'll have all the children of XML element available thru selectedItem property that you would use to build dynamic URLs.
              • 4. Trouble with HorizontalList and using hyperlink
                Jaguar280 Level 1
                i got a hang of creating the hyperlink for each item... THX!!!! i tried to read up on some of the xml documentation for flex but its still not working correctly. first, i tried to use the httpservice method to access my external xml file but everytime the program ran it would say that it cannot access the local file. any thoughts? anyways, instead i tried to just code some xml directly into the project. then i tried to assign some data in the xml to a variable and use that for the icon property of each object (code below). i am not getting any errors but its not rendering the pictures. what could be the problem???? THANK YOU SO MUCH!!!! still trying to learn flex.. its very interesting :-)

                p.s. i removed the states and transitions part to make the code smaller..

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="600" backgroundGradientAlphas="[1.0, 1.0]"
                backgroundGradientColors="[#FFFFFF, #FFFFFF]" initialize="initializeHandler();">


                <mx:Script>
                <![CDATA[
                import mx.events.ListEvent;
                import mx.controls.Alert;

                [Bindable]
                [Embed(source="../assets/event1.png")]
                public var event1:Class;

                [Bindable]
                [Embed(source="../assets/event2.png")]
                public var event2:Class;

                [Bindable]
                [Embed(source="../assets/event3.png")]
                public var event3:Class;

                [Bindable]
                [Embed(source="../assets/event4.png")]
                public var event4:Class;

                [Bindable]
                [Embed(source="../assets/event5.png")]
                public var event5:Class;

                [Bindable]
                [Embed(source="../assets/event6.png")]
                public var event6:Class;

                [Bindable]
                private var myEvents:XML =
                <events>
                <images>
                <image>event1.png</image>
                <image>event2.png</image>
                <image>event3.png</image>
                </images>
                </events>

                private function initializeHandler():void {
                object1.icon = myEvents.events.images.image[0];
                object2.icon = myEvents.events.images.image[1];
                }

                private function itemClicked(event:ListEvent):void {
                var icon:Object = this.PosterSelect.selectedItem.data;
                var url:String = ' http://www.google.com/' + icon + ".png";
                // Alert.show(url);
                navigateToURL(new URLRequest(url), '_blank');
                }


                ]]>
                </mx:Script>


                <mx:Panel id="FirstPanel" title="Upcoming Events: Click on the flyers below to enlarge."
                paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0" borderColor="#006BFC" themeColor="#009DFF" cornerRadius="20" alpha="1.0">

                <!--<mx:Label width="100%" color="blue"
                text="Click on one of the images to enlarge."/>-->

                <mx:HorizontalList id="PosterSelect" height="352" columnCount="3" columnWidth="200" width="580"
                rollOverColor="#ff3344" themeColor="#DC240B" itemClick="itemClicked(event)">
                <mx:dataProvider>
                <mx:Array>
                <mx:Object id="object1" label="March 12, 2008&#13;Detroit, MI" data="events"/>
                <mx:Object id="object2" label="March 12, 2008&#13;Detroit, MI" data="events"/>
                <mx:Object label="March 12, 2008&#13;Detroit, MI" icon="{event3}" data="events"/>
                <mx:Object label="March 12, 2008&#13;Detroit, MI" icon="{event4}" data="events"/>
                <mx:Object label="March 12, 2008&#13;Detroit, MI" icon="{event5}" data="events"/>
                </mx:Array>
                </mx:dataProvider>
                </mx:HorizontalList>
                <mx:ControlBar>
                <mx:LinkButton id="BottomButton" label="Click here to change view!"/>
                <mx:Spacer width="100%" id="spacer1"/>
                <mx:Button label="Change View" id="TiledButton" click="currentState='Tiled'"/>
                </mx:ControlBar>
                </mx:Panel>

                </mx:Application>