[AS3] adding XML content to scrollPane

[Navarone]

How do I add my XML data which is a grid of squares, so that the contents get loaded into the scrollPane. Any help or suggestions appreciated.


import flash.display.*;
import flash.events.*;
import flash.geom.ColorTransform;
import flash.display.BitmapData;
import fl.containers.ScrollPane;

//set grid variables
var w:int = 60;//width of cell
var h:int = 40;//height of cell
var i:int = 3;//number of rows var
var j:int = 5;//number of columns
var space:int = 20;//space between cells
var xt:int = 0;
var yt:int = 0;

//set up XML loader
var myXML:XMLList = new XMLList();
var XML_URL:String = "XMLcolor.xml";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded, false, 0, true);

// Create the xmlLoaded function
function xmlLoaded(event:Event):void {
myXML = XMLList(myLoader.data);
var a:int=1;
var b:int=1;
// Run the "for each" loop to iterate through all of the menu items
//listed in the external XML file
for each (var ListItem:XML in myXML..ListItem) {
var listColor:String = ListItem.itemColor.toString();
var listLabel:String = ListItem.itemLabel.toString();
//trace(xt);
var rect:MovieClip = new MovieClip();
var color:Number = Number("0x"+listColor);
rect.graphics.lineStyle(1, 0x000000);
rect.graphics.beginFill(color);
rect.graphics.drawRect(10,10,w,h);
rect.graphics.endFill();
rect.x = xt;
rect.y = yt;
//this variable "myColor" added to pass color value of square into event handler below
rect.myColor = color;
// This all pertains to the text fields that give our boxes
//their labels, alter values to your liking
var myText1:TextField = new TextField();
myText1.text = listLabel;
myText1.autoSize = TextFieldAutoSize.LEFT;
//set location of text field.
myText1.x = xt+10;
myText1.y = yt+47;

//add cell
addChild(rect);
//add text of cell OVER the cell
addChild(myText1);

xt = xt+w+space;//set the spacing horizontal
b=b+1;//next column
//then changes must be done: prepare for next row
if (b>j) {
b=1;
yt = yt+h+space;//set the spacing vertically
xt = 0;
}
//add mouseEvents for squares
rect.addEventListener(MouseEvent.CLICK, getColorHandler);
rect.buttonMode = true;
}
}

function getColorHandler(event:MouseEvent):void {
trace(event.currentTarget.myColor.toString(16));
var ct:ColorTransform = floorTile.transform.colorTransform;
ct.color = uint("0x" +event.currentTarget.myColor.toString(16));
floorTile.transform.colorTransform = ct;
colorText.text = "#" +event.currentTarget.myColor.toString(16)
}

[Navarone]

Well my feeble attempt to add the XML to my scrollPane doesn't work, but of course I don't know what I am doing either.


var myScrollPane:ScrollPane = new ScrollPane();
myScrollPane.setSize(350, 200);
myScrollPane.move(12, 250);
myScrollPane.addEventListener(Event.COMPLETE, completeHandler);
addChild(myScrollPane);

function completeHandler(event:Event):void {
myScrollPane.source = XML_URL;
myScrollPane.update();
}

[Navarone]

Ok, I created a moveClip holder to put the contents of my XML data into
var mcHolder:MovieClip = new MovieClip();

However, the scrollBars on the scrollPane don't show up. What am I doing wrong?

import flash.display.*;
import flash.events.*;
import flash.geom.ColorTransform;
import flash.display.BitmapData;
import fl.containers.ScrollPane;

//set grid variables
var w:int = 60;//width of cell
var h:int = 40;//height of cell
var i:int = 3;//number of rows var
var j:int = 5;//number of columns
var space:int = 20;//space between cells
var xt:int = 0;
var yt:int = 0;

//set up XML loader
var myXML:XMLList = new XMLList();
var XML_URL:String = "XMLcolor.xml";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded, false, 0, true);

var mcHolder:MovieClip = new MovieClip();


// Create the xmlLoaded function
function xmlLoaded(event:Event):void {
myXML = XMLList(myLoader.data);
var a:int=1;
var b:int=1;
// Run the "for each" loop to iterate through all of the menu items listed in the external XML file
for each (var ListItem:XML in myXML..ListItem) {
var listColor:String = ListItem.itemColor.toString();
var listLabel:String = ListItem.itemLabel.toString();
//trace(xt);
var rect:MovieClip = new MovieClip();
var color:Number = Number("0x"+listColor);
rect.graphics.lineStyle(1, 0x000000);
rect.graphics.beginFill(color);
rect.graphics.drawRect(10,10,w,h);
rect.graphics.endFill();
rect.x = xt;
rect.y = yt;
//this variable "myColor" added to pass color value of square into event handler below
rect.myColor = color;
// This all pertains to the text fields that give our boxes their labels, alter values to your liking
var myText1:TextField = new TextField();
myText1.text = listLabel;
myText1.autoSize = TextFieldAutoSize.LEFT;
//set location of text field.
myText1.x = xt+10;
myText1.y = yt+47;

//add cell
mcHolder.addChild(rect);
//add text of cell OVER the cell
mcHolder.addChild(myText1);

xt = xt+w+space;//set the spacing horizontal
b=b+1;//next column
//then changes must be done: prepare for next row
if (b>j) {
b=1;
yt = yt+h+space;//set the spacing vertically
xt = 0;
}
//add mouseEvents for squares
rect.addEventListener(MouseEvent.CLICK, getColorHandler);
rect.buttonMode = true;

}
}

function getColorHandler(event:MouseEvent):void {
trace(event.currentTarget.myColor.toString(16));
var ct:ColorTransform = floorTile.transform.colorTransform;
ct.color = uint("0x" +event.currentTarget.myColor.toString(16));
floorTile.transform.colorTransform = ct;
colorText.text = "#" +event.currentTarget.myColor.toString(16);
}

// add scrollPane to stage and load XML grid of squares to it
var myScrollPane:ScrollPane = new ScrollPane();
myScrollPane.setSize(300, 200);
myScrollPane.move(12, 250);
myScrollPane.addEventListener(Event.COMPLETE, completeHandler);
addChild(myScrollPane);
myScrollPane.source = mcHolder;

function completeHandler(event:Event):void {
myScrollPane.update();
}

[Navarone]

I love how much help you get on the forums sometimes. :p

I figured out why the scrollbars were not showing up. (pat myself on the back)

I dont understand why it is not scrolling all the content into view. I
attached an image of what I am talking about.:confused: