9 Replies Latest reply on Sep 17, 2009 5:33 PM by trancepriest

    spark list multiple selection with external url's

    trancepriest Level 1

      I have a data list composed solely of 3 image items that was created in Flash Catalyst. I would like when the user clicks on an image that they are directed to distinct url's for each image. I am reading up on the Spark List Specifications but what I don't understand how to do is to associate the url's with the selectedIndices. I am new to coding... enjoying what I've learned so far and hope to grow with Flex. This one thing has had me stumped. While trying to google example coding I've found nothing that matches my scenario and the little I've found... I don't understand how to customize for my needs. Any help would be truly appreciated.

       

      --- Andrae

        • 1. Re: spark list multiple selection with external url's
          Peter deHaan Level 4

          You can load external URLs in a separate browser tab/window by using the navigateToURL() method and passing it a URLRequest object:

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/halo">
              <fx:Script>
                  <![CDATA[
                      import flash.net.navigateToURL;
                      protected function btn1_clickHandler(evt:MouseEvent):void {
                          var urlReq:URLRequest = new URLRequest("http://www.adobe.com/");
                          navigateToURL(urlReq, "_blank");
                      }
                  ]]>
              </fx:Script>
              <s:Button id="btn1" label="Button 1" click="btn1_clickHandler(event);" />
          </s:Application>
          
          

           

          Peter

          • 2. Re: spark list multiple selection with external url's
            trancepriest Level 1

            Thanks for your reply... the problem is that I want to associate external url's with a spark data list. So that when the user clicks one of the images it then goes to that assigned URL. I am aware of how to associate an external url to a button... the problem is how do I associated it to a selection in a spark list?

            • 3. Re: spark list multiple selection with external url's
              David_F57 Level 5

              Hi,

               

              I don't use catalsyt so I don't know what sort of dataprovider it creates for lists but usually you would have an array, for your image list you would need to add a url item to that array so that when the image is selected you automatically have access to the url.

               

              in your code you would have something like this

               

               

                  <s:List id="myImageList">
                  <s:dataProvider id="myInfo">
                     <s:ArrayList>
                      <fx:Object ico="@Embed('image1.jpg')" theURL="web1.net"/>
                      <fx:Object ico="@Embed('image2.jpg')" theURL="web2.net" />
                      <fx:Object ico="@Embed('image3.jpg')" theURL="web3.net" />
                     </s:ArrayList>
                  </s:dataProvider>
                  </s:List>
              
              to add a url you would update the object to something like this

               

              <fx:Object ico="@Embed('image1.jpg')" theURL="www.myurl1.net"/>

               

              so to get the url its a m
              atter of using the selected item to get access to it
              
              CurrentURL = myInfo[myImageList.selectedIndex].theURL;
              

               

              there are a few ways that dataproviders can be created and used with lists this is just a simple one which will hopefully be helpful.
              David

              • 4. Re: spark list multiple selection with external url's
                Peter deHaan Level 4

                How about this:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                        xmlns:s="library://ns.adobe.com/flex/spark"
                        xmlns:mx="library://ns.adobe.com/flex/halo">
                    <fx:Script>
                        <![CDATA[
                            import spark.events.IndexChangeEvent;
                            protected function list_changeHandler(evt:IndexChangeEvent):void {
                                var targetURL:String = evt.currentTarget.selectedItem.url;
                                var urlReq:URLRequest = new URLRequest(targetURL);
                                navigateToURL(urlReq, "_blank");
                            }
                        ]]>
                    </fx:Script>
                    <s:List id="list" change="list_changeHandler(event);">
                        <s:dataProvider>
                            <s:ArrayList>
                                <fx:Object label="Adobe" url="http://www.adobe.com/" />
                                <fx:Object label="Flex.org" url="http://www.flex.org/" />
                                <fx:Object label="FlexExamples.com" url="http://blog.flexexamples.com/" />
                            </s:ArrayList>
                        </s:dataProvider>
                    </s:List>
                </s:Application>
                

                 

                Peter

                • 5. Re: spark list multiple selection with external url's
                  trancepriest Level 1

                  Thanks guys I will look into your method of doing it. I was able to get it working with the following code:

                   

                  <![CDATA[

                  import mx.events.IndexChangedEvent;

                   

                  protected function List_selectionChanged(event:IndexChangedEvent):void

                   

                   

                            {

                   

                                  var selIndices:Array = event.currentTarget.selectedIndices;

                   

                                  var numItems:Number = selIndices.length;

                   

                   

                   

                                  for (var i:Number = 0; i<numItems; i++)

                                  {

                   

                   

                                      if (selIndices[i] == 0)

                                      {

                                      navigateToURL( new URLRequest("http://facetmedia.com/portfolio/video/retribution.mov"), "_blank");

                                      }

                                      else if (selIndices[i] == 1)

                                      {

                                      navigateToURL( new URLRequest("http://facetmedia.com/portfolio/video/heinz.mov"), "_blank");

                                      }

                                      else if (selIndices[i] == 2)

                                      {

                                      navigateToURL( new URLRequest("http://facetmedia.com/portfolio/video/roughwinds.mov"), "_blank");

                                      }

                                  }

                  }

                  ]]>

                   

                  • 6. Re: spark list multiple selection with external url's
                    David_F57 Level 5

                    glad you got it working,

                     

                    It is worth investigating the methods that Peter and I provided as it is dynamic which means if you end up with a forth url you don't need to update any code.

                     

                    David

                    • 7. Re: spark list multiple selection with external url's
                      trancepriest Level 1

                      I couldn't get Peter's example to compile when testing the example... two errors were reported:

                       

                      1. Description Resource Path Location Type

                      'list': identifier and class may not have the same name. list.mxml facetmediacomp_1/src line 15 Flex Problem

                      2. Description Resource Path Location Type
                      1046: Type was not found or was not a compile-time constant: IndexChangeEvent. list.mxml facetmediacomp_1/src line 8 Flex Problem
                      For the first error I changed the list id to list1... For the second error I changed evt to event... still had an error. Anyone know whats wrong in the script?

                       

                       

                       

                      This script seems like the neat solution to this problem,... would love to get it working efficiently.

                      • 8. Re: spark list multiple selection with external url's
                        Peter deHaan Level 4

                        trancepriest,

                         

                        Do you know which version of the Flex SDK you are using? It sounds like your version may be somewhat old (7219, perhaps).

                         

                        A quick test is to just create a new application in your project and run the following code (you'll get a warning, but you can safely ignore it):

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                       xmlns:s="library://ns.adobe.com/flex/spark"
                                       xmlns:mx="library://ns.adobe.com/flex/halo">
                            <mx:Label text="{mx_internal::VERSION}" />
                        </s:Application>
                        

                         

                        You may want to try downloading a newer Flex 4 SDK build from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4 and see if that solves any of the issues you are seeing.

                         

                        Peter

                        • 9. Re: spark list multiple selection with external url's
                          trancepriest Level 1

                          Thanks, I had 4.0.0.7219 will download the newer one.