XML node value in the AS Script Block

Question

Hello, okay I'm hoping this isn't to lame of question but I have honestly given up on searching the net for any clear example of how to do this.

Here is the end result goal: I simply want to display the value of an xml node which is a url in the htmlText property.

My approach is simple, get the mx:XML source and with a XMLListCollection reference the source to display the link in the text property as htmlText="{myDisp.selectedItem.@link}" This shows up just fine. So then I tried to pull that same value in the AS script block so I can then concatenate the value of the link and the string literal as one value to display in the htmlText property.

Like so... "Experience The App";

My hang up is, I can't figure out how to get the simple value in the AS so I can get past this simple headache. :)

Answer 1

Can you post a bit of code to illustrate what you are doing? So you can't just reference the htmlText property of the component? - have you assigned an id to the component that you want to reference, ie myComponent.htmlText ? Cheers, Caspar

Answer 2

Hello Caspar! Thank you very much for answering my post! Actually, I figured it out the day after I posted the question. I'll post the code here in hopes that maybe I spread the joy.. :)

Code --

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  
 <mx:Script>
  <![CDATA[
   import mx.controls.Text;
   import mx.events.ListEvent;



   //New declarations: Get the link value from the database to display 
   //the link as hyperlink 

   // set the binding expression so it can be called as the link //
   [Bindable]
   public var myLink:String = link;
   public var link:String;

   public function getMyLink(event:Event):void 
   {
    var link:String = flashDisp.selectedItem.@link;
    getTheURL(link);
    var myLink:String = link;
   }

// get the link and assign it as the 'Friendly' URL //
public function getTheURL(link:String):void
{
link = "<a href=\"" + link + "\"target=\"_blank\">Visit the web site</a>";
myLink = link;
}
]]>
</mx:Script>
<mx:XML id="xml" source="data/galleryflash.xml" />
<mx:XMLListCollection id="myData" source="{xml.image}" />
<mx:TileList id="flashDisp"
  dataProvider="{myData}"
  itemRenderer="titleItemRenderer"
  columnCount="2"
  rowCount="4"
  width="200"
  color="#FEFFFF" 
  <!-- this is the trick to call the function -->
  change="getMyLink(event)">
</mx:TileList>
<mx:Panel width="725" height="600" layout="absolute">   
   <mx:Image x="10" y="10" width="685" height="470"   source="flashDisp.selectedItem.@fullImage}" scaleContent="false" 
visible="{flashDisp.selectedItem}"/>
<mx:Text x="10" y="488"

<!-- this is the magic way to call the new dynamic link which is updated by selectedItem call and then displays it back as html-->
 htmlText="{myLink}" 
color="#FFFFFF" fontFamily="Arial" fontSize="14" condenseWhite="true">
</mx:Text>
</mx:Panel>

My XML looks like this.

<gallery>
<image title ="My Title"
thumbnails = "imgs/thumbs/mylittlethumb.gif"
fullImage = "imgs/myFullImage.jpg"
link = "testLink1.html"/>
</gallery>

To make the itemRenderer, you'll need something like this. A file called titleItemRenderer.mxml (you can create this as a 'new component'.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
  horizontalAlign="center"
  verticalAlign="middle">

 <mx:Image source="{data.@thumbnailImage}"  />

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


</mx:VBox>

Have a great day! ~Waxed