Preventing ViewStack from Changing Index

Question

I have a ViewStack, with a bunch of NavigatorContainers in. Each NavigatorContainer contains a different category of settings for the application.

I would like to be able to display a popup prompting the user if they try to leave the current NavigatorContainer without saving the changes they have made to the container's settings.

What would be ideal is something like the 'changing' event in the List component, whereby you are able to cancel or defer the event. Calling preventDefault() on the change event in ViewStack doesn't prevent the index change from happening.

Is there a way of doing this with a minimum of hoop-jumping?

Thanks

Answer 1

It depends what is changing your viewstack. For example if you have ButtonBar as view changer, then you can easily write like this:

        protected function btnBar_changingHandler(event:IndexChangeEvent):void
        {
            event.preventDefault();
            //enter code here
        }

and

    <s:VGroup width="100%" height="100%" horizontalAlign="center">
            <s:ButtonBar id="btnBar" dataProvider="{viewStack}" requireSelection="true" changing="btnBar_changingHandler(event)">
                <s:layout>
                    <s:ButtonBarHorizontalLayout gap="2" />
                </s:layout>
            </s:ButtonBar>
            <mx:ViewStack id="viewStack" width="100%" height="100%">
                <s:NavigatorContent width="100%" height="100%" label="First View">
                    <comp:FirstView/>
                </s:NavigatorContent>
                <s:NavigatorContent width="100%" height="100%" label="Second View">
                    <comp:SecondView/>
                </s:NavigatorContent>
            </mx:ViewStack>
    </s:VGroup>