9 Replies Latest reply on May 3, 2008 4:08 PM by Jaguar280

    Linking to javascript using dynamic a href link

    Jaguar280
      Hello everyone,

      ive been coding with flex for a little bit now to make this project but i've run into another road block. i finally figured out how to get an xml file into the project which was frustrating :-). so far, i've created a horizontal list that loads images and descriptions from the xml file. right now, i have it so that whenever you click on one of the images, it goes to a website. what i would like to do is have it go to a javascript link. the code i used in my html page to link to the javascript app (lightbox) is <a href="content/image.png" rel="lightbox" title="this is my caption">asd</a>

      that is what i need to link to in flex. the other problem is, that instead of always going to one link, i would like to make it dynamic so that for example, instead of always going to content/image.png it will go to image2.png, image3.png, etc (depending on which image you click)

      before i figured out the xml inside each object i created a data field that i called in the url function

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

      but now since im using xml i cannot create the data field. i would greatly appreciate any help you can provide. im really excited to get this project done!! below is the code and the xml




      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="946" height="380" borderColor="#149CEA" borderStyle="none" borderThickness="1"
      backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" creationComplete="getXML.send()">

      <!--<mx:Model id="eventinfo" source="posters/eventinfo.xml"/>-->
      <mx:XML id="eventinfo"/>

      <mx:HTTPService id="getXML" url="posters/eventinfo.xml" resultFormat="e4x" result="eventinfo = XML(getXML.lastResult);" />

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

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



      <mx:Button x="598" y="5" label="Tiled View" color="#000000" id="ChangeToTiled"/>
      <mx:Button x="476" y="5" label="Horizontal View" color="#000000" id="ChangeToHoriz"/>
      <mx:Label x="11" y="7" text="Zamora Entertainment Upcoming Events" color="#000000" fontFamily="Arial" fontSize="14" fontWeight="bold" id="ProgramTitleText"/>
      <mx:HorizontalList id="HorizontalCanvas" height="337" columnWidth="180" width="672"
      rollOverColor="#ff3344" themeColor="#DC240B" itemClick="itemClicked(event)" x="10" y="33" borderStyle="solid" dataProvider="{eventinfo.events}" borderColor="#000000">
      <mx:itemRenderer>
      <mx:Component>
      <mx:VBox
      width="100%" height="350"

      horizontalAlign="center"
      >
      <mx:Image source="{data.icon}"/>

      <mx:Label text="{data.label}"/>

      </mx:VBox>
      </mx:Component>
      </mx:itemRenderer>
      </mx:HorizontalList>

      </mx:Application>


      XML CODE (i would like to use the link field for the dynamic content)

      <eventinfo>
      <events>
      <label>March 12, 2008&#13;March 13,2008</label>
      <icon>posters/event1.png</icon>
      <link>event1</link>
      </events>
      <events>
      <label>March 12, 2008&#13;March 13,2008</label>
      <icon>posters/event2.png</icon>
      <link>event2</link>
      </events>
      <events>
      <label>March 12, 2008&#13;March 13,2008/label>
      <icon>posters/event3.png</icon>
      <link>event3</link>
      </events>
      <events>
      <label>March 12, 2008&#13;March 13,2008</label>
      <icon>posters/event4.png</icon>
      <link>event4</link>
      </events>
      <events>
      <label>March 12, 2008&#13;March 13,2008</label>
      <icon>posters/event5.png</icon>
      <link>event5</link>
      </events>
      <events>
      <label>March 12, 2008&#13;March 13,2008</label>
      <icon>posters/event6.png</icon>
      <link>event6</link>
      </events>
      </eventinfo>

        • 1. Linking to javascript using dynamic a href link
          Jaguar280 Level 1
          oh and p.s. does anyone know how to insert a new line that flex will read within the xml code... i tried both <label>March 12, 2008&#13;March 13,2008</label> and <label>March 12, 2008 /n March 13,2008</label> but neither worked :-/

          <mx:Object label="March 12, 2008&#13;Detroit, MI" icon="{event1}" data="events"/> worked when i was not using the xml
          • 2. Re: Linking to javascript using dynamic a href link
            ntsiii Level 3
            The last question first:
            If you want to create a new "row", you must add an entire new "item" "label" is just a property of the item. When you were working with a collection of objects, you creted a whlole new Object, with all the required properties. Do the same with xml:

            var xmlNewItem:XML =
            <events>
            <label>My New Label</label>
            <icon>whatever/whateverevent5.png</icon>
            <link>myLink</link>
            </events>

            Note, you do not need the <mx:XML> tag. Just use an istance variable, typed as XML. But what you have will work.

            Also, "lastResult" is intended for binding expressions, do NOT use it in AS expressions. Use event.result:
            result="eventinfo = XML(event.result);"

            One more thing, handling the result in-line is not very flexible. I advise creating a result handler function instead.

            Why do you say, "...since im using xml i cannot create the data field..."? You can.

            Now, I do not understand the rest of your goal, can you explain further?

            Tracy
            • 3. Re: Linking to javascript using dynamic a href link
              slaingod Level 1
              Try &#xa; for the newline. Not sure it helps in this sitatuion, but thats what Flex uses in mx:Text components for instance.
              • 4. Linking to javascript using dynamic a href link
                Jaguar280 Level 1
                hey guys,

                thx for your help. i really appreciate it... wouldnt be able to get this done without it. after reading through my original post i realize it isnt very clear :-). ill give it another shot. so, what im trying to do is create a hyperlink in flex that allows me to use the 'rel' attribute. im using the lightbox javascript app and in html, you must use the link <a href="content/image.png" rel="lightbox">here is my text</a> to initialize the lightbox. the rel attribute is what links to the javascript. so far, ive created a normal hyperlink so that when i click one of the objects in my horizontal list, it goes to a url. the problem is i cannot figure out how to include the rel attribute so it points to the javascript.

                in addition to that, what i need to do is make it so that the hyperlink is dynamic. in other words, instead of always going to content/image.png, it will go to content/image2.png, content/image3.png, etc. i need to make it so that the file name is called from the external xml file (i imagine as a variable).

                before i implemented the xml, i just created several objects for the horizontal list with a data attribute (i just made it up). i used the data attribute as a variable within my hyperlink as below.

                <mx:Object label="March 12, 2008&#13;March 13" icon="{event3}" data="eventimage1"/>

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

                once clicked it would go to content/eventimage1.png. i tried to input the "data" into the item renderer but it kept saying that it could not resolve the component

                <mx:itemRenderer>
                <mx:Component>
                <mx:VBox width="100%" height="350" horizontalAlign="center">
                <mx:Image source="{data.icon}"/>
                <mx:Label text="{data.label}"/>
                <mx:Data source="{data.link}"/>
                </mx:VBox>
                </mx:Component>
                </mx:itemRenderer>

                so what i need is to grab the data attribute (which is now the link attribute in the xml file) from the xml file and link it to each object in the horizontal list so that when an object is clicked, it uses the data attribute within the hyperlink. and of course, i need to somehow include the rel attribute within the hyperlink... thx a million guys... let me know if this still is not clear

                p.s. i made the changes u suggested for the xml code... works great!!! i still cannot get the new line though... i tried the characters but no luck. all i want to do is insert a link break in the label attribute... if my xml code is

                <eventinfo>
                <events>
                <label>March 12, 2008agfdafdsfafdsadfdfdwafdsa</label>

                the text in the label part will continue to far off the flex panel and it will create a scroll bar since its so long. before the xml i just used <mx:Object label="March 12, 2008&#13;city name here blah blah" icon="{event1}" data="events"/> and the &#13; character would insert a new line so it was two lines instead of one.
                • 5. Linking to javascript using dynamic a href link
                  Jaguar280 Level 1
                  i found this forum post about a guy who is running into the same issue i think... it seems that i might have to call a javascript function that is in my html page... is that correct... how would i got about that?

                  http://www.actionscript.org/forums/showthread.php3?t=134162&highlight=rel
                  • 6. Re: Linking to javascript using dynamic a href link
                    slaingod Level 1
                    Yiou would use the ExternalInterface class to call javascript.
                    • 7. Re: Linking to javascript using dynamic a href link
                      Jaguar280 Level 1
                      would u be able to lead me in the right direction as far as coding?? im not to familiar with that method :-/!! THX!
                      • 8. Re: Linking to javascript using dynamic a href link
                        slaingod Level 1
                        The ExternalInterface docs should point you in the right direction.

                        Basically you do ExternalInterface.call("MyJavascriptMethod", ...args...);

                        where args is any number of args you need to pass to match the javascript function signature.

                        function MyJavascriptMethod(arg1, arg2) {
                        //do something
                        }
                        ExternalInterface.call("MyJavascriptMethod", "Test", "Test2");


                        • 9. Linking to javascript using dynamic a href link
                          Jaguar280 Level 1
                          :-)

                          thank you so much! i think i was able to get it to work... i created this small little program that runs the javascript.

                          <mx:Script>
                          <![CDATA[

                          private function callJavaScript():void {
                          var captions:String = "caption for thickbox";
                          var images:String = "content/myimage.png";
                          ExternalInterface.call("tb_show",captions,images);
                          }

                          ]]>
                          </mx:Script>

                          <mx:Button label="Say 'Hello World'" click="callJavaScript();" />

                          turns out there was a function (tb_show) within the javascript app that i could call. how would i go about making it so that the function uses the image attribute (the one taken from the xml file) from the object i selected for the third parameter to make it dynamic so that when i dont have to write a new function for every image.

                          would it be easier to just call the externalinterface function directly on the each itemclick such as
                          <mx:HorizontalList id="HorizontalCanvas" itemClick="ExternalInterface.call('tb_show','caption here','content/brazeros.png')" dataProvider="{eventinfo.events}">

                          oh and do you have any other suggestions for inserting a line break to the label attribute of the object? i tried inserting those characters in the xml file but it didnt work. THANK YOU!!!!