What happens when you add / remove children from a ViewStack?
My schedule got "Full" and I ended up editing a podcast last night instead of writing a post here. Tune in for free 360Flex tickets.
I was recently talking to a client about creating a scheduling application. They wanted to display a Calendar-type data, either displaying a day's worth of data, a weeks worth of data, or a month's worth of data. They wanted to allow the user to be able to transition between days. The transition they were interested in was the FlexBook component.
I appears to me that FlexBook is very similar to a ViewStack. All the samples appear to provide a static number of pages, with each child of the viewStack representing a page. This implementation reminded me of a ViewStack and the project got me thinking.
In my development, I've always used ViewStacks with a static number of views. Based on what I've seen this is the common approach. However, with a ViewStacks, nothing prevents you from creating or removing new views views (AKA Children) on the stack on the fly with ActionScript. How does the ViewStack handle such situations? What happens to the SelectedIndex as you remove or add children? What happens to effects on the ViewStack when you remove or add children?
I decided to run some tests to figure it out. Here they are ( Or click full screen and the source view ):
The ViewStack is on the left. It has four elements. They are differentiated with the label name "View 0, View 1, View 2, View 3". On the right is shown the ViewStack's selected Index and the Selected Child. There are also a lot of buttons to let you modify the children of the ViewStack.
First click the show buttons. You can see that each element of the View. This code is just:
private function showViewStackChild(displayIndex:int):void{
viewStack.selectedIndex = displayIndex
}
Pretty simple stuff.
The list of buttons on the right will move the first number (child) into the second number's (Child's) spot. It does not use any code to retain the selectedIndex. As you add or remove children, the selectedIndex changes and stays with the displayed view. There is no transition in this case. However, there is a change if you move the item at the selectedIndex. Honestly that shouldn't be a surprise. If you remove the selected Item from a ViewStack, it makes sense that the selectedIndex will now point to a new item. And as that item is shown, the transition effect occurs. These buttons are implemented like this:
private function MoveViewStackChildrenSaveIndex(sourceIndex:int, destinationIndex:int):void{
var sourceComponent : DisplayObject = viewStack.getChildAt(sourceIndex);
viewStack.removeChildAt(sourceIndex);
viewStack.addChildAt(sourceComponent,destinationIndex);
}
The function accepts the 'source' and the destination. It creates a reference to the child, removes it from the old location and then adds it back in to the new location.
The list of buttons on the left act just like the 'right' buttons, but they have some extra code to modify the selected Index so it stays wherever the selected view ends up. Every once in a while I get an odd display bug, where it looks like two of the ViewStack's children are on top of each other. Sometimes this triggers the effect sometimes not. Every once in a while I Get an error, so the code must be buggy somewhere (but I'm not seeing it tonight).. ( Update: I fixed this error and updated the code )
private function MoveViewStackChildren(sourceIndex:int, destinationIndex:int):void{
var sourceComponent : DisplayObject = viewStack.getChildAt(sourceIndex);
var oldSourceIndex : int = viewStack.selectedIndex;
viewStack.removeChildAt(sourceIndex);
viewStack.addChildAt(sourceComponent,destinationIndex);
if((oldSourceIndex == sourceIndex) ||
(oldSourceIndex == viewStack.numChildren-1)){
viewStack.selectedIndex = destinationIndex;
} else if(oldSourceIndex > sourceIndex){
viewStack.selectedIndex += 1;
} else {
viewStack.selectedIndex -= 1;
}
}
I suspect that the first approach would be work in the 'unlimited day' situation. Create a set number of day displays, and swap them around so that you always have 2 pages number displayed before and after the two currently displayed pages. Load more data as needed and just recycle day displays.
However, will this approach I used with ViewStack work with FlexBook? I'm not sure. Maybe that can be a project for another day.
var vs:ViewStack= new ViewStack;
addChild(somecontainer);
addChild(nextcontainter);
addchild(vs);
I receive "The supplied index is out of bounds
Thanks
-Luis
I've never created a ViewStack using AS3, so I can't say I've experienced it.
The error you quote is not an error I'd expect to see using addChild. ( addChildAt perhaps, but not addChild ).
Without more code, it's hard to diagnose what may be the issue. In the code I see you are adding children to an "unknown" parent. Is it a ViewStack? The ViewStack you're creating dynanmically has no children. Could that be part of the problem? It's hard to tell from that code snippet.