24 Replies Latest reply on Oct 20, 2010 1:38 PM by Priscilla194

    LinkButton navigate to list of URLs in xml file

    Priscilla194

      Hi,

       

      I have a list of urls in an external xml file.  When a user clicks on my linkbutton, I want a new tab to open up with the urls from the xml file.  I don't know how to save the xml file in my mxml component so that I'm able to reference the urls in the xml.

       

      This is how my xml is formatted:


      <xml>
      <link>http://www.google.com</link>
      </xml>

       

      This is how my linkbutton code looks:

       

              <mx:itemRenderer>
                 <mx:Component>
                    <mx:LinkButton label="hyperlink" textDecoration="underline" color="#FF9900" fontSize="11" />         
                 </mx:Component>
             </mx:itemRenderer>

      Thanks!

        • 1. Re: LinkButton navigate to list of URLs in xml file
          rtalton Level 4

          A DataGrid can easily handle and display your XML by using it as a dataProvider.

          • 2. Re: LinkButton navigate to list of URLs in xml file
            Priscilla194 Level 1

            Sorry, I forgot to mention that I currently have a datagrid but I want each column to link to a different URL. I included the linkButton to attempt to do this in my datagrid.  Is using a LinkButton the best way to accomplish this or is there a better approach?

            • 3. Re: LinkButton navigate to list of URLs in xml file
              rtalton Level 4

              A simple way would be to display each url in a row, then when you click on that row, use the itemClick event to read the url (using dataGrid.selectedItem, or event.target.selectedItem), and then make a call to the navigateToURL() function to open the URL in a new window.

              • 4. Re: LinkButton navigate to list of URLs in xml file
                Priscilla194 Level 1

                I want a specific column to have a different link when clicked on. I don't

                want the entire row to have the same url.  I essentially want a hyperlink on

                one column of the datagrid and the url coming from an xml file.  I currently

                have a column as a hyperlink using the LinkButton, but I am unable to grab

                the URLs from the external xml file I have.  All the examples I find online,

                show how to populate the LinkButton with urls directly in the mxml, but

                that's not what I want either.

                • 5. Re: LinkButton navigate to list of URLs in xml file
                  rtalton Level 4

                  Are you saying that your XML data is NOT to be display in the data grid? Sorry if I misunderstood. What data (if any) are you displaying in the data grid?

                  • 6. Re: LinkButton navigate to list of URLs in xml file
                    Priscilla194 Level 1

                    I'm so sorry if I'm not explaining myself clearly.  In my datagrid, I want

                    one column to display, for example, "link" and for the xml to contain a

                    and for the "link" column in the datagrid to go to

                    www.google.com when clicked on.

                    • 7. Re: LinkButton navigate to list of URLs in xml file
                      rtalton Level 4

                      What other data would be displayed? How many columns? All this will go into the xml file. You don't have to display the url in a column, but it must be associated with the data in the other column(s). This way, when you click anywhere on that row, the url can be accessed from the itemClick handler, and open the link.

                       

                      Here is some code I've used; I cut out lots of stuff particular to my app, so you may get an error or two, but this is how you could get started:

                       

                      ******* XML data file ************
                      <?xml version="1.0" encoding="utf-8"?>
                      <links>
                        <link description="Google" url="http://www.google.com" target="_blank" />
                        <link description="Microsoft" url="http://www.microsoft.com" target="_blank" />
                        <link description="Adobe" url="http://www.adobe.com" target="_blank" />
                      </links>

                       

                      *******application************

                      ******* Script Block************

                      <!--data source for content. Call on CreationComplete event of the app-->
                      <mx:HTTPService id="linksService" url="data/links.xml" result="linksServiceResult(event)" resultFormat="e4x"/>

                      //handle service result:
                      public function linksServiceResult(event:ResultEvent):void{
                      linksxml = event.result as XML;
                      }

                      public function gotoLink(event:ListEvent):void{
                      navigateToURL(new URLRequest(dgLinks.dataProvider[event.rowIndex].@url),'_blank');
                      }


                      ******* UI ************

                      <mx:DataGrid id="dgLinks" itemClick="gotoLink(event)" showHeaders="false" width="100%" height="100%" dataProvider="{linksxml.link}" borderStyle="none" selectionColor="0x9eb8fa" rollOverColor="#F1AF3C" rowHeight="28" >
                        <mx:columns>
                         <mx:DataGridColumn dataField="@description">
                           <mx:itemRenderer>
                            <mx:Component>
                             <mx:Text htmlText="{data.@description}"/>
                            </mx:Component>
                           </mx:itemRenderer>  
                         </mx:DataGridColumn>
                         <mx:DataGridColumn dataField="@url" visible="false"/>
                        </mx:columns>
                      </mx:DataGrid>

                      • 8. Re: LinkButton navigate to list of URLs in xml file
                        Priscilla194 Level 1

                        I know the URL won't have to be displayed in the column. What I want for my datagrid to be able to do is have several columns in the same row link to different URLs. This is why I'm using the LinkButton to create a hyperlink in the datagrid. I do not want the entire row of the datagrid to be the same URL. I hope I'm explaining myself correctly.  Does that make sense?

                        • 9. Re: LinkButton navigate to list of URLs in xml file
                          rtalton Level 4

                          Then I think you want to structure your xml like this:

                          <?xml version="1.0" encoding="utf-8"?>
                          <dataroot>
                            <links url1="http://www.google.com" url2="http://www.microsoft.com" url3="http://www.adobe.com"/>
                          </dataroot>

                          • 10. Re: LinkButton navigate to list of URLs in xml file
                            Priscilla194 Level 1

                            My problem is I don't know how to reference my xml file or where to reference it so that the LinkButton can see it.

                            • 11. Re: LinkButton navigate to list of URLs in xml file
                              rtalton Level 4

                              Ok, here is a sample showing you how to use your xml in a DataGrid. It sets up the XML object, assigns it to an XMLListCollection, which in turn is a DataGrid's dataProvider. To get all your links on one XML node, I put them in as attributes, so you reference an attribute using the "@" sign in the data grid columns. You can insert your own LinkButton item renderers in the columns, and code their behavior as you see fit. But, this sample app is what you need to get started understanding the very basics of using an XML data source. Please read up on XML processing in the help docs. This is fundamental in many Flex applications and you'll probably need to create XML files often.

                               

                               

                              <?xml version="1.0" encoding="utf-8"?>
                              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                                  layout="absolute">

                               

                                  <mx:XML id="xmlURL">
                                      <dataroot>
                                          <links url1="http://www.google.com"
                                              url2="http://www.microsoft.com"
                                              url3="http://www.adobe.com"/>
                                      </dataroot>
                                  </mx:XML>

                               

                                  <mx:XMLListCollection
                                      id="XCLinks"
                                      source="{xmlURL.links as XMLList}"/>

                               

                                  <mx:DataGrid
                                      id="dgLinks"
                                      dataProvider="{XCLinks}"
                                      y="73"
                                      x="49">
                                      <mx:columns>
                                          <mx:DataGridColumn dataField="@url1"
                                              headerText="Link 1"/>
                                          <mx:DataGridColumn dataField="@url2"
                                              headerText="Link 2"/>
                                          <mx:DataGridColumn dataField="@url3"
                                              headerText="Link 3"/>
                                      </mx:columns>
                                  </mx:DataGrid>

                               

                              </mx:Application>

                               

                              HTH

                              1 person found this helpful
                              • 12. Re: LinkButton navigate to list of URLs in xml file
                                Priscilla194 Level 1

                                Thank you!  Let me try this out, hopefully I get it working!  =o)

                                • 13. Re: LinkButton navigate to list of URLs in xml file
                                  Priscilla194 Level 1

                                  I tried doing it the way you suggested and I'm getting an error in this line of code:

                                   

                                  <mx:XMLListCollection id="XCLinks" source="{xmlURL.urls as XMLList}"/>

                                   

                                  1120:Access of undefined property xmlURL.

                                   

                                  I'm not sure if this makes a difference, but my XML file is in another folder within the project.

                                   

                                   

                                  I also tried adding that line of code within

                                  <mx:Vbox>

                                       <mx:Canvas>

                                             <mx:XMLListCollection id="XCLinks" source="{xmlURL.urls as XMLList}"/>

                                                 <mx:DataGrid ...>

                                   

                                  and I got an error saying "Component declarations are not allowed here. (Note: visual children must implement mx.core.IUIComponent)

                                   

                                  I'm assuming I have to add that line of code outside of the VBox, but I'm getting the access of undefined property xmlURL error.  Is there something else I have to include to access the XML file?  Thanks!

                                  • 14. Re: LinkButton navigate to list of URLs in xml file
                                    rtalton Level 4

                                    If you copy and paste the code I supplied into a new MXML app, it will work.

                                     

                                    You have changed the code:

                                    <mx:XMLListCollection id="XCLinks" source="{xmlURL.urls as  XMLList}"/>

                                    This will not work with the XML I gave you.

                                     

                                    A XMLListCollection cannot be the child of a visual component, like a Canvas or VBox.

                                    1 person found this helpful
                                    • 15. Re: LinkButton navigate to list of URLs in xml file
                                      Priscilla194 Level 1

                                      Haha I'm sorry, I forgot to mention that I changed the names of the xml to urls..  but anyway, I changed everything back to the way you wrote it, copied and pasted the code and the xml and I'm still getting that error.

                                      • 16. Re: LinkButton navigate to list of URLs in xml file
                                        rtalton Level 4

                                        Please paste the exact error message (you have two errors listed above).

                                        I pasted the code into a new app, and I don't get any errors.

                                        • 17. Re: LinkButton navigate to list of URLs in xml file
                                          Priscilla194 Level 1

                                          I'm getting the '1120: access of undefined property xmlURL.' error.  Btw,

                                          thank you so much for helping out

                                          • 18. Re: LinkButton navigate to list of URLs in xml file
                                            rtalton Level 4

                                            I'm stumped. In the code example, the XML model is:

                                             

                                             

                                             

                                            <mx:XML id="xmlURL">

                                            <dataroot>

                                            <links url1="http://www.google.com"

                                            url2="http://www.microsoft.com"

                                            url3="http://www.adobe.com"/>

                                            </dataroot>

                                             

                                            </mx:XML>

                                             

                                            And yet you are getting an error indicating it is not there.

                                            Are you sure the data model I gave you is included in your application? Are you changing it somehow, or using a different XML data model?

                                            • 19. Re: LinkButton navigate to list of URLs in xml file
                                              Priscilla194 Level 1

                                              The XML file is not included in the application, it's in a different folder

                                              in a separate file.  Is that the issue with this code?  Is it possible to

                                              work on an external XML file, not included in the flex application?

                                              • 20. Re: LinkButton navigate to list of URLs in xml file
                                                rtalton Level 4

                                                Yes you can work with an external XML file. Look in the docs for how to do this; it's very simple. You could use HTTPService to load it at run time.

                                                • 21. Re: LinkButton navigate to list of URLs in xml file
                                                  Priscilla194 Level 1

                                                  Hi,

                                                   

                                                  I'm not sure what I'm missing in my code, but when I run this, my datagrid

                                                  is blank.  This is my code using HTTPService:

                                                   

                                                  <mx:HTTPService  id="xmlURL" url="..\data\xmlfiles\xmlURL.xml"  />

                                                   

                                                  <mx:DataGrid id="xmlURL" color="#FF9900" dataProvider=""   >

                                                                <mx:columns>

                                                                  <mx:DataGridColumn dataField="@link1" headerText="column

                                                  1"/>

                                                                  <mx:DataGridColumn dataField="@link2" headerText="column 2"

                                                  />

                                                  Should my datagrid be written similar to how it's written using

                                                  XMLListCollection (the code you posted above)?

                                                  • 22. Re: LinkButton navigate to list of URLs in xml file
                                                    rtalton Level 4

                                                    Are you using a ResultEvent handler for the HTTPService? Can you post that code?

                                                    You could just use the lastResult object, but some people consider that bad form as it can change over the life of the application.

                                                    Don't want to cheap you out here, but I think you should read up on HTTPService and the Result/Fault events to properly handle the data. It is necessary to understand them to properly handle your data, especially when something goes wrong with the service call.

                                                    • 23. Re: LinkButton navigate to list of URLs in xml file
                                                      Priscilla194 Level 1

                                                      Hi rtalton,

                                                       

                                                      Here's the code I have so far with HTTPService, I am using the ResultEvent handler

                                                       

                                                         <mx:HTTPService  id="data" url="..\data\data.xml" result="resultHandlerData(event)" />      

                                                       


                                                        <mx:VBox height="100%" width="100%"
                                                        creationComplete="{data.send();}">
                                                          
                                                            <mx:HBox width="100%" verticalAlign="middle" >
                                                              <mx:Text width="100%"  text="DATA" color="#992222" fontWeight="bold"/>
                                                            <mx:LinkBar dataProvider="{dataList}" horizontalAlign="left" right="10"/>    
                                                        </mx:HBox>
                                                            
                                                        <mx:ViewStack id="dataList" width="100%" height="100%" >
                                                          <mx:Canvas label="Label" width="100%" height="100%" >
                                                         
                                                            <mx:DataGrid id="dgData" color="#FF9900" dataProvider="{arrayData}" width="100%" height="100%" headerColors="#992222" alternatingItemColors="[#FFFFFF,#DDDDDD]" click="followLink(dgData);" >    
                                                                    <mx:columns>       
                                                                      <mx:DataGridColumn dataField="name" headerText="Column 1"/>       
                                                                      <mx:DataGridColumn dataField="date" headerText="Column 2" width="110"/>
                                                                   <mx:DataGridColumn dataField="presenter" headerText="Column 3" width="200"/>
                                                                   </mx:columns>      
                                                                  </mx:DataGrid>
                                                                </mx:Canvas>

                                                      • 24. Re: LinkButton navigate to list of URLs in xml file
                                                        Priscilla194 Level 1

                                                        thanks for all your help!  I finally figured it out..  here's the code I have.  The "Register" and "Presentation" columns are clickable and take you to different links. This is the format I have for my xml:

                                                         

                                                        <course>
                                                        <topic>Webinars</topic>
                                                        <type>recording</type>
                                                        <name>Introduction to Cloud Computing</name> 
                                                        <Link>www.google.com</Link>
                                                        <presentationLink>http://www.yahoo.com</presentationLink>
                                                        <date>8 October 2010</date>
                                                        <duration>40 min</duration>
                                                        <presenter>Joe Smith</presenter> 
                                                        </course>

                                                         

                                                         

                                                         

                                                          public function gotoLinkUsingTags(event:ListEvent, dg:DataGrid):void{
                                                           if (event.columnIndex==3) {
                                                            navigateToURL(new URLRequest(dg.dataProvider[event.rowIndex].Link),'_blank');
                                                           } else if (event.columnIndex==4) {
                                                            navigateToURL(new URLRequest(dg.dataProvider[event.rowIndex].presentationLink),'_blank');
                                                           }
                                                          }

                                                         

                                                        <mx:HTTPService  id="webinarsLive"
                                                             url="..\data\developerCentre\training\webinarsLive.xml"
                                                             result="resultHandlerWebinarsLive(event)"
                                                            />    

                                                         

                                                         


                                                            <mx:Canvas label="Sessions" width="100%" height="100%" >
                                                              <mx:DataGrid id="dgWebinarsLive" dataProvider="{arrayWebinarsLive}" itemClick="gotoLinkUsingTags(event, dgWebinarsLive)" ]">    
                                                                      <mx:columns>       
                                                                        <mx:DataGridColumn dataField="name" headerText="Topic" />       
                                                                        <mx:DataGridColumn dataField="date" headerText="Date" width="110"/>
                                                                     <mx:DataGridColumn dataField="presenter" headerText="Presenters" width="125" />
                                                                        <mx:DataGridColumn headerText="Action" width="60">
                                                                             <mx:itemRenderer>
                                                                  <mx:Component>
                                                                   <mx:Text htmlText="Register"/>
                                                                  </mx:Component>
                                                                 </mx:itemRenderer>  
                                                             </mx:DataGridColumn>
                                                                     <mx:DataGridColumn headerText="Files" width="75">
                                                                             <mx:itemRenderer>
                                                                  <mx:Component>
                                                                   <mx:Text htmlText="Presentation"/>
                                                                  </mx:Component>
                                                                 </mx:itemRenderer>  
                                                            </mx:DataGridColumn>
                                                                     </mx:columns>
                                                                    </mx:DataGrid>
                                                                  </mx:Canvas>