Data binding with XML help. Flex 3

[coolcourt]

Hello I am currently trying to create an array of pages [items] (images) and place them in sections called chapters and call upon these arrays and load the data in a component.

Here is some of my source.


private var resultObj:Object;

[Bindable]
private var myBook:Book= new Book();

private function init():void {
HTTPService_openXMLfile();
}



private function HTTPService_openXMLfile():void{
// Création du HTTPService
var myHTTPService:HTTPService = new HTTPService();
myHTTPService.url="XML/dynamicbook.xml";
myHTTPService.resultFormat="object";
myHTTPService.addEventListener(ResultEvent.RESULT, HTTPService_makeBook);
myHTTPService.addEventListener(FaultEvent.FAULT, HTTPService_fault);

myHTTPService.send();
}


// CREATION DU LIVRE
private function HTTPService_makeBook(evt:ResultEvent):void {
var i:int; // variable pour les boucles for

// FAIRE QUELQUECHOSE EN ATTENDANT => faire patienter l'utilisateur

resultObj = evt.result; // Récupère l'objet XML

// Modification du canvas application
if(resultObj.BOOK.APPLICATION.BACKGROUNDCOLOR) {
if(resultObj.BOOK.APPLICATION.BACKGROUNDCOLOR != "") {
application.setStyle("backgroundColor",resultObj.BOOK.APPLICATION.BACKGROUNDCOLOR);
}
}


// Création des pages
if(resultObj.BOOK.PAGE) {
var myPAGElength:int = resultObj.BOOK.PAGE.length;
for(i=0;i<myPAGElength;i++) {
CreateNewPage(resultObj.BOOK.PAGE[i]);
}
}

// Ajouter le livre au canvas
monCanvas.addChild(myBook);

private function CreateNewPage(XMLobj:Object):void{
var j:int;
var myPage:Page = new Page();

if(XMLobj.BACKGROUNDCOLOR) {
myPage.setStyle("backgroundColor", XMLobj.BACKGROUNDCOLOR);
}

if(XMLobj.BACKGROUNDALPHA) {
myPage.setStyle("backgroundAlpha", XMLobj.BACKGROUNDALPHA);
}


// Si il existe des images
if(XMLobj.IMAGE) {
var ImageLength:int = XMLobj.IMAGE.length;
if(ImageLength > 1) {
for(j=0;j<ImageLength;j++) {
addImage(XMLobj.IMAGE[j],myPage);
}
}
else {
addImage(XMLobj.IMAGE,myPage);
}
}



// Insérer la page dans le livre
myBook.addChild(myPage);
}

private function getCurrentPage(book_local:Book):int{
if (book_local == null){
return 0;
}
else{
return book_local.currentPage;
}
}
</mx:Script>



This code here simply displays the book.



<mx:Canvas id="monCanvas" visible="true"/>



The documentation is here..

http://www.rubenswieringa.com/code/as3/flex/Book/docs/

Is there any simple way to create chapters or sections for the book and have the chapters loaded through a menu thats linked or defined in the XML document?

At this point my time is almost running out and I would like to start the new year off with a new project... So any resources, links, hints emails would be greatly appreciated.

The main problem that I would like to solve or love to complete is having the dynamic book with more than one chapter. After that I believe I could work on getting things to look a little nicer and cleaner.

Also I enclosed the xml structure to maybe give someone who knows what they are looking at something to get an idea where i am trying to go with this.

Thanks in advance again Court [coolcourt at gmail com]


<BOOK>
<APPLICATION>
<BACKGROUNDCOLOR>#ffffff</BACKGROUNDCOLOR>
</APPLICATION>


<CANVASNAVIGATION>
<TOP></TOP>
<BOTTOM>65</BOTTOM>
<LEFT></LEFT>
<RIGHT></RIGHT>
<HORIZONTALCENTER></HORIZONTALCENTER>
<VERTICALCENTER></VERTICALCENTER>
</CANVASNAVIGATION>
<BTNGOTOPAGE>
<LABEL>Goto page</LABEL>
<TOGGLE>false</TOGGLE>
<SELECTED>false</SELECTED>
<VISIBLE>true</VISIBLE>
<ENABLED>true</ENABLED>
<TOP></TOP>
<BOTTOM>45</BOTTOM>
<LEFT>50</LEFT>
<RIGHT></RIGHT>
<HORIZONTALCENTER>1</HORIZONTALCENTER>
<VERTICALCENTER></VERTICALCENTER>
</BTNGOTOPAGE>
<BTNPRECEDENT>
<LABEL></LABEL>
<TOGGLE>false</TOGGLE>
<SELECTED>false</SELECTED>
<VISIBLE>true</VISIBLE>
<ENABLED>true</ENABLED>
<TOP></TOP>
<BOTTOM></BOTTOM>
<LEFT>0</LEFT>
<RIGHT></RIGHT>
<HORIZONTALCENTER></HORIZONTALCENTER>
<VERTICALCENTER></VERTICALCENTER>
</BTNPRECEDENT>
<BTNSUIVANT>
<LABEL></LABEL>
<TOGGLE>false</TOGGLE>
<SELECTED>false</SELECTED>
<VISIBLE>true</VISIBLE>
<ENABLED>true</ENABLED>
<TOP></TOP>
<BOTTOM></BOTTOM>
<LEFT>150</LEFT>
<RIGHT></RIGHT>
<HORIZONTALCENTER></HORIZONTALCENTER>
<VERTICALCENTER></VERTICALCENTER>
</BTNSUIVANT>
<INPUTTEXTPAGETOGO>
<VISIBLE>true</VISIBLE>
<EDITABLE>true</EDITABLE>
<MAXCHARS>3</MAXCHARS>
<TEXTALIGN>center</TEXTALIGN>
<TOP>25</TOP>
<BOTTOM></BOTTOM>
<LEFT>120</LEFT>
<RIGHT></RIGHT>
<HORIZONTALCENTER>1</HORIZONTALCENTER>
<VERTICALCENTER>1</VERTICALCENTER>
</INPUTTEXTPAGETOGO>
<PAGE>
<BACKGROUNDCOLOR>white</BACKGROUNDCOLOR>
<BACKGROUNDALPHA>1</BACKGROUNDALPHA>
<LABEL>
<SELECTABLE>false</SELECTABLE>
<TEXT></TEXT>
<COLOR>red</COLOR>
<TOP>10</TOP>
<BOTTOM></BOTTOM>
<LEFT></LEFT>
<RIGHT></RIGHT>
<HORIZONTALCENTER>0</HORIZONTALCENTER>
<VERTICALCENTER></VERTICALCENTER>
</LABEL>
<IMAGE>
<SOURCE>basics.jpg</SOURCE>
<IMGLOADING>true</IMGLOADING>
<TOP></TOP>
<BOTTOM></BOTTOM>
<LEFT></LEFT>
<RIGHT></RIGHT>
<HORIZONTALCENTER></HORIZONTALCENTER>
<VERTICALCENTER></VERTICALCENTER>
</IMAGE>
</PAGE>
<PAGE>
<BACKGROUNDCOLOR>white</BACKGROUNDCOLOR>
<BACKGROUNDALPHA>1</BACKGROUNDALPHA>
<IMAGE>
<SOURCE>image1.jpg</SOURCE>
<IMGLOADING>true</IMGLOADING>
<TOP></TOP>
<BOTTOM></BOTTOM>
<LEFT></LEFT>
<RIGHT></RIGHT>
<HORIZONTALCENTER>0</HORIZONTALCENTER>
<VERTICALCENTER>0</VERTICALCENTER>
</IMAGE>
<IMAGE>
<SOURCE>image2.jpg</SOURCE>
<IMGLOADING>true</IMGLOADING>
<TOP></TOP>
<BOTTOM></BOTTOM>
<LEFT></LEFT>
<RIGHT></RIGHT>
<HORIZONTALCENTER>0</HORIZONTALCENTER>
<VERTICALCENTER>0</VERTICALCENTER>
</IMAGE>
</PAGE>
<PAGE>
<BACKGROUNDCOLOR>white</BACKGROUNDCOLOR>
<BACKGROUNDALPHA>1</BACKGROUNDALPHA>
<IMAGE>
<SOURCE>image3.jpg</SOURCE>
<IMGLOADING>true</IMGLOADING>
<TOP></TOP>
<BOTTOM></BOTTOM>
<LEFT></LEFT>
<RIGHT></RIGHT>
<HORIZONTALCENTER>0</HORIZONTALCENTER>
<VERTICALCENTER>0</VERTICALCENTER>
</IMAGE>
<IMAGE>
<SOURCE>image4.jpg</SOURCE>
<IMGLOADING>true</IMGLOADING>
<TOP></TOP>
<BOTTOM></BOTTOM>
<LEFT></LEFT>
<RIGHT></RIGHT>
<HORIZONTALCENTER>0</HORIZONTALCENTER>
<VERTICALCENTER>0</VERTICALCENTER>
</IMAGE>
</PAGE>

</BOOK>