ActionScript3:Importing XML into Dynamic Textboxes

From virtualMV2015wiki
Jump to: navigation, search
 Home  Flash10 (CS4) | Flash11 (CS5) <

Introduction

Use ActionScript 3 to import external data and display in dynamic Textboxes, using the same XML file used in the ActionScript 2 example of the same name.

Icon Objective.png

Objective

By the end of this exercise you should:

  • Import and manipulate XML data in a Flash Movie.

Creating the XML file

Create an XML file. For the purpose of this exercise, copy the one below, or copy and paste into a text editor.

<?xml version="1.0"?>
<people>
 
<person>
<name>Michael Verhaart</name>
<comment>Owner of the VMV Wiki, Tutor Extraordinaire</comment>
</person>
 
<person>
<name>Year One Student</name>
<comment>Seeker of Knowledge </comment>
</person>
 
<person>
<name>George of the Jungle</name>
<comment>Swings from Trees and friendly to apes.</comment>
</person>
 
</people>

Save in a folder as people.xml.

Load the XML

The first thing to do is to check that the XML file that you have created is accessible and can be loaded. The easiest way to do this is to have a message display in the output panel confirming all is well. Create a new ActionScript 3 FLA. Save it. Change the XML_URL string path to people.xml if necessary to reflect your own filing system. At this point, nothing needs to be added to the stage, so create an actions layer, click into frame One, open the Actions panel and add the following ActionScript:

import flash.events.Event; 
import flash.net.*;
 
var myXML:XML = new XML();
var XML_URL:String = "people/people.xml";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded);
 
function xmlLoaded(event:Event):void
{
    myXML = XML(myLoader.data);
    trace("Great!  Your data is loaded and ready to be used");
}

Test the movie, you should get the trace statement in the output window. At this stage we have only imported the data, we haven't set up any variables or used the information in any way. We also ensure that all the data is loaded before any further action takes place.

Return each XML elements contents to the output panel

The next stage involves setting up a variable to hold the information and trace back to the output panel all the information contained in the XML file. Once we can see its all there, we can build our stage with some textboxes and display the information. Remove the previous trace statement and replace with a for each statement that will display each of the XML entries into the output panel:

import flash.events.Event; 
import flash.net.*;
 
var myXML:XML = new XML();
var XML_URL:String = "people/people.xml";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded);
 
function xmlLoaded(event:Event):void
{
    myXML = XML(myLoader.data);
    for each (var person:XML in myXML.person){
	trace(person.name);
	trace(person.comment);
	}
 
}

The output panel should now show something like this:

Sd AS3xmloutput.png

Return the contents of a XML node to a Text Box

Now comes the fun part...showing this data on stage in some text boxes. Create a dynamic multiline text box on stage and call in myTextBox. Remove all the "trace" statements from the above example as we have verified that the XML data is accessible (or comment them out if you want to keep them for reference). Replace with the following:

import flash.events.Event; 
import flash.net.*;
 
var myXML:XML = new XML();
var XML_URL:String = "people/people.xml";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded);
 
function xmlLoaded(event:Event):void{
    myXML = XML(myLoader.data);
    fnPeople(myXML);
}
 
function fnPeople(peopleList:XML):void{
myTextBox.text = peopleList.person.name.text()[0] + "\n" + peopleList.person.comment.text()[0];
}

Sd hottipicon.png HOT TIP! ActionScript 3 no longer supports "newline" use "\n" instead.


Accessing the information in AS3 is fairly straightforward. We have created a new function fnPeople, the xmlLoaded function has changed to call the fnPeople method with our myXML XML object sent as the argument. Now all that is left to do is to return the information to myTextBox. Following the XML documents hierarchy; PeopleList > person > name, we can access the information of the XML element. Use the text() functions to return only the contents (not the element itself) and specify the index position of the element contents you wish to access, in this case [0], or the first element.

Add a component button to the stage, Change the label and name it showBtn. Change the myLoader.addEventListener("complete", xmlLoaded); line to read showBtn.addEventListener(MouseEvent.CLICK, xmlLoaded); and you will now be able to display the data by clicking the button.

Sd displayxmlAS3.png

Next up: Looping through the entries.

Using the button to advance through the XML data

With a small alteration to the existing code, you can keep track of the number of entries in your XML file, and advance through the entries and display consecutively in the text box up to the number of entries determined by the total number of person entries.

import flash.events.Event; 
import flash.net.*;
 
var myXML:XML = new XML();
var XML_URL:String = "people/people.xml";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
var i:int;
 
function xmlLoaded(event:Event):void{	
    myXML = XML(myLoader.data);
    fnPeople(myXML);
}
 
function fnPeople(peopleList:XML):void{
    if (i < peopleList.person.length()){
    myTextBox.text = peopleList.person.name.text()[i] + "\n" + peopleList.person.comment.text()[i];
    i++;
    }
}	
showBtn.addEventListener(MouseEvent.CLICK, xmlLoaded);

Next up:

Scrolling forward and back using buttons

Like everything, there is more than one way to achieve an end! So, after much research, trial and error, the following code forms a basis to using buttons to move through your XML file and display the contents in text boxes. Set up the stage as shown in the screenshot below, name your buttons next_btn and prev_btn. There are several ways to set up your variables at the start too, note the slight changes in this example. (Results are the same). This ActionScript 3 example performs in exactly the same way as the ActionScript 2 Example of the same name, but is achieved with less lines of code.

var myXMLURL:URLRequest = new URLRequest("people.xml");
var myLoader:URLLoader = new URLLoader();
var myXML:XML;
var currentPerson:int = 0;
 
myLoader.addEventListener(Event.COMPLETE, loaded);
 
function loaded(e:Event)
{
    myXML = new XML (e.target.data);
}
 
myLoader.load(myXMLURL);
 
function nextPerson(e:Event)
{
    if (currentPerson < myXML.person.length())
    {
        currentPerson +=1;
    }    
    myTextBox.text = myXML.person.name[currentPerson -1]  + "\n"  + myXML.person.comment[currentPerson-1];
}
 
function prevPerson(e:Event)
{    
    if (currentPerson >1)
    {
        currentPerson -=1;
    }    
    myTextBox.text = myXML.person.name[currentPerson -1]+ "\n" + myXML.person.comment[currentPerson -1];	
}
 
next_btn.addEventListener(MouseEvent.MOUSE_DOWN, nextPerson);
prev_btn.addEventListener(MouseEvent.MOUSE_DOWN, prevPerson);


Sd fdandbkAS3.png

Resources

Icon References.png References


 

Day, S. (2010). ActionScript3:Importing XML into Dynamic Textboxes. Retrieved January 19, 2018, from http://www.virtualmv.com/wiki/index.php?title=ActionScript3%3AImporting_XML_into_Dynamic_Textboxes