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.

4. Open the ‘Stage Actions’ script panel.

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.

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;

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:

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:

// 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%.

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.

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

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

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