Actionscript 3 Designer Toolkit

More design, less programming

Actionscript 3 Designer Toolkit header image 2
«   Improving the ImageRollover Class, Again: Tweening the Rollover Drawing a dot-filled rectangle: DottedField Class   »

Traversing XML and the for each.. Loop

November 12th, 2009 · 2 Comments · Tutorials

This post is an expansion of the November 8 post on getting data stored in a XML file into Actionscript 3 based on the ECMAScript E4X standards.

In the code below the XML data is included within the Actionscript rather than presented as an external file. To accomplish this, a new variable photos of type XML is declared and set to the XML data (without the declaration). In line 14, a trace of the variable photos displays the entire tree including the opening and closing gallery nodes. If we traverse one more step, we see in line 16 a trace of photos.images displays the node and its subchildren. Continuing on, a trace of photos.images.image displays all the image nodes. To get a single node, we use photos.images.image[n] where n is the index of the desired node (line 20). A shorthand can be used to define the XML as shown in line 22.

To get the value of an attribute, the notation photos.images.image[0].@url is used, lines 24, 26. The length() function is used to get the number of nodes, line 28. In line 33, an attribute is defined as a variable.

To process all subchildren of the images node, the for each.. loop is used. In the first example, line 33, the for each. is set to process a nodal value – the image titles – while the second processes the values of a nodal attribute.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

 
// xml declared within Actionscript file rather than as an external file: (easier to refer to)
var photos:XML = <gallery>
	<images>
                <image id="0" url='facade-with-green.jpg' width='640' height='480'>Facade with green</image>   
		<image id="1" url='fenced-driveway.jpg' width='640' height='480'>Driveway</image>
		<image id="2" url='gray-garage.jpg' width='640' height='480'>Gray Garage</image>
		<image id="3" url='facade-with-awning.jpg' width='640' height='480'>2930</image>
		<image id="4" url='entrance-with-sculpture.jpg' width='480' height='640'>Entrance with sculpture</image>
		<image id="5" url='entrance-with-radial-gate.jpg' width='480' height='640'>Entrance with radial gate</image>
	</images>
</gallery>;
 
trace( photos );  // displays parent ie entire xml
 
trace( photos.images ); // display child <images> and all subchildren
 
trace( photos.images.image );  // displays all image nodes
 
trace( photos.images.image[0] );  // displays first subchild - remember 1st node is 0
 
trace( photos..image[1] );  // displays 2nd subchild node value ie title
 
trace( photos.images.image[0].@url );  // displays 1st subchild attribute url value
 
trace( photos..image[0].@url );  // displays same as previous
 
trace( photos..image.length() );  // displays number of subchild - image - nodes
 
var attr:String = "url";
 
// attribute defined as a variable
trace( photos.images.image[2].@[attr] );  // displays 3rd subchild url value
 
trace('IMAGE TITLES:');
 
// use for each.. to loop through node values
for each ( var imgTitle:XML in photos.images.image ) {
 
	// display each image node value ie the image title
	trace( imgTitle );                           
}
 
trace('IMAGE URLs:');
 
 
// use for each.. to loop through subchildren attribute value
for each ( var imgURL:XML in photos..@url ) {
 
	// display each image attribute value ie image url
	trace( imgURL  );                           
}

Your comments and suggestions are welcomed.

If you found this posting helpful, please consider a Retweet. Thanks…

Post to Twitter

Tags: ·

2 Comments so far ↓

Leave a Comment

Spam Protection by WP-SpamFree