Loading XML via AJAX into Adobe Edge

This is a post to show you how to load and display XML content in Adobe Edge using a simple AJAX request. It requires Adobe Edge Preview 3.

This came about because I’d been asked to create a Christmas card for a client in Flash and also a version that worked on an iPad.

There was an existing framework/XML structure to work with so this is why this tutorial uses this format (shown below). For the purposes of brevity we’ll only use the <fromname>, <toname> and <message> tags.

<?xml version=”1.0” encoding=”utf-8” ?>
<greeting>
<fromname>Chris Gannon</fromname>
<fromemail>youremail@yourdomain.com</fromemail>
<toname>Edge users</toname>
<toemail>email@yourdomain.com</toemail>
<message>I hope this tutorial has helped open up the possibilities of getting XML into Edge!</message>
<cardtype>seasonal</cardtype>
<messageid>e6b9f923-8f22-4618-883f-3e8f48351884</messageid>
</greeting>

My background is Flash and I don’t purport to be a JS or AJAX or jQuery expert – I just do a lot of Googling, a lot of tests and a lot of experiments until stuff works. If anyone sees any potential issues or improvements with this then please chime in.

If you come from an ActionScript background you may well find the syntax and general structure of jQuery/AJAX calls to be fairly recognisable.

Also, this is not an animation tutorial – animation in Edge is pretty straight forward – I’m currently more interested creating more dynamic stuff. Oh ok then, we’ll animate it at the end if you’re that bothered!

See the final version here.

Download the source files here.

Ok so here goes.

1. Open Adobe Edge.

2. Create a text field with the ‘T’ text tool.

3. Name it xmlOutput. See below.

Image

4. Open the ‘Stage Actions’ script panel.

Image

5. When this panel opens you are presented with a list of event types on which the code should execute. In other words, should it execute on a click, a scroll, a keydown? In this instance we will execute the XML call on ‘loaded’ meaning as soon as the page has finished loading we’ll grab the XML data.

Image

6. Next up we’ll declare some variable names for the XML tags we’re going to use. These will be used to create the final message string to be displayed in the ‘xmlOutput’ text field.

var fromName;

var toName; 

var messageField;

Image

7. Next we create a reference to the ‘xmlOutput’ text field using Edge’s ‘lookupSelector’ syntax.

outputField = $(this.lookupSelector(“xmlOutput”));

8. Next we’ll add a variable name for the final message string.

var messageString;

This is how it should look so far:

Image

9. Time for the AJAX call. This requires you to have an XML file called ‘sampleoutput.xml’ in the same folder as your Edge project. I was pleasantly surprised to find that Edge did not require me to add/import any extra JS scripts – it just added them automatically.

$.ajax({

type: “GET”,

url: “sampleoutput.xml”,

dataType: “xml”,

success: function(xml) {

fromName = $(xml).find(‘fromname’).text();

toName = $(xml).find(‘toname’).text();

messageField = $(xml).find(‘message’).text();

messageString = “Hi ” + toName + “<br>” + messageField + “<br> Lots of love from ” +fromName;

outputField.html(messageString);

});

Let’s break it down:

The AJAX call takes an object with the parameters ‘type’, ‘url’, ‘dataType’ and a ‘success’ function that bubbles up the xml object as its event object.

The ‘type’ property is the HTTP request type – we’re GETTING data so we use GET.

The ‘url’ is self explanatory.

The ‘dataType’ is also self explanatory – here we’re loading XML.

The ‘success’ function is called when you successfully load the XML and it’s ready to be parsed.

The next bits of syntax pull out the text you want from the XML tags and assign them to the variables you declared at the top.

fromName  =  $(xml).find(‘fromname’).text();

toName = $(xml).find(‘toname’).text();

messageField = $(xml).find(‘message’).text();

Pretty simple stuff, right?

The next bit just takes those and makes them into a nice readable string with a few HTML tags to add line breaks etc.

messageString = “Hi ” + toName + “<br>” + messageField + “<br> Lots of love from ” + fromName;

And finally we output the ‘messageString’ to the ‘xmlOutput’ field.

outputField.html(messageString);

So your final ‘loaded’ code panel should look like this:

Image

// insert code for loaded event here
var fromName;
var toName;
var messageField;
var outputField = $(this.lookupSelector(“xmlOutput”));
var messageString;

$.ajax({

type: “GET”,
url: “sampleoutput.xml”,
dataType: “xml”,
success: function(xml) {

fromName = $(xml).find(‘fromname’).text();
toName = $(xml).find(‘toname’).text();
messageField = $(xml).find(‘message’).text();
messageString = “Hi ” + toName + “<br>” + messageField + “<br> Lots of love from ” +fromName;
outputField.html(messageString);

}
});

If you run that now you’ll see it working (hopefully!).

10. Now we can add a simple timeline animation to fade it in (and give it a scale bounce – I know, bounces on text look naff but people seem to like them).

With ‘Auto-Keyframes Properties’ enabled, the playhead at 0 and ‘xmlOutput’ selected, drop its alpha to 0 and its scale to 20%.

Image

Image

11. Next drag the timeline head to 0:02.

12. With the ‘xmlOutput’ field still selected make its alpha 100 and its scale 100%. It should look like this.

Image

13. Now to give the scale a bounce, simple select the ‘scale’ bars only…

Image

14. This will show the easing properties to the left – choose ‘easeOutBounce’…

Image

15. Save it and run it in a browser and quietly congratulate yourself on your new AJAX and Adobe Edge integration powers etc. 🙂

Download the source files here

26 thoughts on “Loading XML via AJAX into Adobe Edge

    1. $(xml).find(‘node_to_find’).each(function(){
      var atrribute_name = $(this).attr(‘your_attribute_name’);
      });

  1. Thanks Chris! I am attempting to create a banner with several sliding bookends, with a number of dynamically-loaded JPG tiles behind each, controlled by a master XML file. I want each JPG tile to have several attributes such as audience, nextURL when clicked, dates active, etc. I am having a lot of trouble finding good references – yours has helped a lot already. I’ll upload and send an example later on if you’re interested.

  2. Hello Chris, thanks for your tutorial
    Just a question, I would like to acces a specific child like : $(xml).childnode[1].find(“Nom”).text();
    but it doesn’t work, Have you a solution for that ? thanks !

      1. Thanks Chris for you help !! 🙂
        I find a solution so i share it with you :

        My Xml :

        News_6
        image
        6000

        Th code to acces the ‘Name’ value of a node :

        $(‘Nom’, xml)[1];

        🙂

  3. I mean if i have one xml file but i put inside xml many elements this mean like more then one elements in xml which is in your example start with greeting- because i will used for mouseover for each part to loading same xml but different elements ?

  4. There is problem with corss-domain loading, therefore I rather use YQL:

    site = ‘http://external_domain.com/file.xml’;

    var yql = ‘http://query.yahooapis.com/v1/public/yql?q=’ + encodeURIComponent(‘select * from xml where url=”‘ + site + ‘”‘) + ‘&format=xml&callback=?’;

    // Request that YSQL string, and run a callback function.
    // Pass a defined function to prevent cache-busting.
    $.getJSON(yql, function(data){
    console.log(data.results[0]);
    });

  5. Awesome Thank you.
    Is it possible to read a (single line) txt tile instead of an xml?

    test.txt
    this is the only line in the txt file.

  6. Hi Chris, thanks for this great tutorial. However when I run the files locally it only pull the xml through in Chrome. when I launch it from this site it works well in Chrome, IE and FF. From what I read it seems like it needs to launch from an server and not local. Could you explain this a bit?

    Further I am a Flash/ActionScript developer and are required by my employer to migrate to HTML5. Would Adobe Edge Animate be the way to go? I believe a new version of Flash to be released in 2016 by the name of Adobe Animate CC. Do you know if this is a combination of Edge and Flash professional?

    Many thanks,
    Jan

    1. XML, JSON and most other data types must be run on a server because the request to load the data can only work over HTTP (not the file system). Them’s the rules 🙂

      In terms of which way to jump from your Flash career, it’s hard to say given I don’t know your experience and what you want to output. What I would say is that Edge Animate has been dropped by Adobe – they are now concentrating on Flash’s new incarnation, Adobe Animate CC.

      I would also say that when you decide to go with proprietary software like Edge Animate or Adobe Animate or anything else, you are somewhat at the mercy of Adobe’s decisions on the future of that software. You may be comfortable in an IDE like Flash which means Adobe Animate (AA) would be the obvious choice for you and I completely understand that – however, and I speak personally of course, I think learning how to build things in a more raw format (like a text editor or something like CodePen) is a safer and ultimately less dependent and more powerful and sustainable way to progress.
      This way takes longer and may be less familiar and more difficult but if Adobe decides to drop AA in the future for some reason you can still carry on as normal in your job because you understand how to create projects without an IDE or any other bespoke software.

      I invested a lot of time and energy into Edge Animate (EA) and whilst I don’t regret that for one moment (after all it was fundamental in my transition from Flash to HTML5) I could easily have ended up being stranded again had I not further progressed from EA to building projects in SublimeText and ensuring I understood the guts of what EA created.

      As I said your decision will depend on what sort of dev you are, your experience and what you want to do in the future – just bear in mind that what you have to work with now may not be here in the future (we all learned that lesson from Flash!).

  7. Does somebody know how to get these values… im sitting here for 6hours and now im totally lost…

    I want to put “svb” in the hometeam on the stage… But i cant get it to work. My client has only this version XML for me and can not provide a svb version 😦

    Please help!

  8. Sorry man… i cant past my XML

    xml version=”1.0″ encoding=”utf-8″
    -competitions-
    -game competition=”Eredivisie” hometeam=”SC Cambuur Leeuwarden1″ outteam=”SC Cambuur Leeuwarden2″ hometeamimage=”1a.png” outteamimage=”11a.png” matchday=”Donderdag om 16:45 uur” –
    -/competitions-

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s