Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
Contributor
Posts: 15
Registered: ‎05-18-2011
My Device: Playbook
My Carrier: Rogers

dynamic page view stack

im trying to create a page view stack that will be populated with the pages read in from an xml file. im having trouble adding the pages to the stack because i cannot create the global variables for each page with unique variables. i tried to come up with a solution using an array that would populate the pageview stack but couldn't get very far.  i have my app set up such that on the main menu you pick a chapter of a book and once clicked it changes to a new view (pageView.as). pageview.as is where i would like to setup the pageviewstack and populate it with all the pages for that chapter. i tried using one sample from the community library thread but couldn't get it to work with my setup, can someone please help me figure this out.

 

thanks,

NR

Developer
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: dynamic page view stack

The basic approach (one way) would keep an array of the page components (extend UIComponent) in an array. In that array, keep an attribute that identified the page (e.g. page number). So the array is an array of objects and the object contains an id and the allocated page component. When the user select a new page, remove the existing child to the parent stack (maintain a abstract reference to that or just remove the first child in the stack if it exists) and then add the select item from the array. If you want to do transitions, then you can do it when removing the existing page, wait till it is done, and transition the new page --> depending on the type of transition you are looking for.
Contributor
Posts: 15
Registered: ‎05-18-2011
My Device: Playbook
My Carrier: Rogers

Re: dynamic page view stack

thanks for the reply jtegen but im still having some problems with my app.  just as a summary i have two views that extend sprite a homeView.as and a pageView.as.  i also have the main as class that starts the app and loads homeView at startup.  the homeView basically has a list with some clickable items. once clicked the view should change to the pageView class and displays the first page of the content. my app will need to read all its info from an xml which is adding to my confusion.  when the app starts the list of clickable items is loaded from the xml and when clicked the xml for that node should be sent to the next view and create the array of pages from the xml.  what im having problems with is sending the xml to the next view and having the content change to show differnt pages. the info you gave was useful but not sure if it will work in my case.  the pageView.as should be the default template for all pages and only the content wll be removed and new content loaded to simulate page changes. hopefully you can help me with this as i would like to have a basic app working very soon.

 

thanks,

NR

Developer
Posts: 439
Registered: ‎10-25-2010
My Device: Not Specified

Re: dynamic page view stack

[ Edited ]

Just use the concept of a Model, and all this takes care of itself.

 

A Model stores data, and a view represents the current state of the data.

 

So, you could do something like this:

1. Load all XML files at startup, and store them in an array in your model

2. When something is clicked, set model.currentPage=2 (or whatever index was clicked), and create a pageView.

3. PageView can just ask the model for the current XML page: this.xml = model.getCurrentXML();, and then render it's contents.

 

Model can be a singleton to make your life easier, or if it's simple enough maybe just a static class (depends whether you need your model to dispatch events)

Developer
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: dynamic page view stack

In homeView, when the user selects an item, you need to tell the main AS view to remove the "current" view (removeChild) and then add the pageView (addChild).  This can be done by either having a reference to the main view in both homeView and pageView and call a function to do the swapping, or you can use event handlers via a singleton class that all views would have an instance to (do search to find examples of this).

 

When you build your list in the homeView from the XML, save the items child XML structure (that will get passed to pageView) with the data provider.  For example:

 

mylist.addItem( { data : 'myuniqueid', label : 'Page 2', xml : node } );

 

where node is the XML node for this item.  Likely the 'data' and 'label' might be a node or attribute of the XML, so you can fill this in by the structure of your XML.

 

You probably have an event listener when an item is selected.  In that function, give the pageView that xml node that is cached in the data provider.  For example (and personally would do a custom event, but...): 

 

private function itemSelected( event : Event ) : void

{

  this.rootpage.setPage( this.mylist.selectedItem.xml ); 

 

In you root class:

 

public function setPage( node : XML ) : void

{

  this.removeChild( this.current_page ); 

  this.current_page = this.page_view;

  this.addChild( this.current_page );

  this.page_view.setData( node ); 

 

Where current_page is an attribute maintaining a handle reference to the current displayed page.

Where page_view is an instance of pageView

Where setData is a function in the pageView class.

 

Again, I would use events to keep things losely coupled.  The example above is a "tightly coupled" method that I personally avoid, but it is easier to show in this example. 

 

Hope this helps in someway (and of course I understand your situation).

 

Contributor
Posts: 15
Registered: ‎05-18-2011
My Device: Playbook
My Carrier: Rogers

Re: dynamic page view stack

jtegen that was some good info and i have been trying to get it to work with no luck., im hoping you can help get through this because i still can't seem to get anything to work the way i would like to.  i tried setting up with my own custom event that is added in the main.as, and is called when an item is selected from the list.  im still having trouble understanding how all this fits into my app.  how are current_page and page_view initialized and how can they be set. also maybe you can go more in depth and show me how each part fits into each class that i have. i would like to learn how this gets done the proper way and not mash something together not knowing exactly whats goign on. 

 

thanks,

NR