Adobe Flex 4: Mobile Apps: destructionPolicy and popView()

Adobe Flex 4 provides us a feature for handling the data while view transitions “destructionPolicy”. This feature is functional in case we are poping a view off the stack, that is, the current view is removed and the view just below it gets activated.

When we navigate from 1st view to 2nd view using pushView(SecondView), what actually happens is that a new view with the name “SecondView” gets created and is pushed to the top of View Stack. By default we have destructionPolicy = “auto“, which destroys the state of previous view, that is when we require to navigate to the previous view again using popView(), then it will be created from scratch.

In case we have large data loading on our view, recreation of view will hamper the application performance. In order to overcome this situation, we can set destructionPolicy = “never”, which will cache the state of the previous view and then navigating back using popView(), do not require to create the previous view from scratch.

But this feature also have some issues to be targeted. While developing an appliaction for iOS device using split view navigator, I notice that using popView() and destructionPolicy =”never”, few UI settings that differ in the two Views remain unchanged.

Working on this ahead, I figured out, that as we are not recreating the view or any of its components, the code snippet in creationComplete, initialize and show handler will not work.

A solution to this issue is to have the code snippet, which includes the changes in UI as when the view activated, to be included in the viewActivate handler. Below is a simple code to demostrate this.

SampleProject1.mxml (Main App MXML File)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                            xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:ViewNavigator firstView="views.FirstView" id="ViewNavigator">
        <s:titleContent>
            <s:Label id="myLabel" color="#FFFFFF" fontSize="18" fontWeight="bold" text="View 1">
            </s:Label>
        </s:titleContent>
    </s:ViewNavigator>
   </s:Application>

FirstView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" creationComplete="view1_creationCompleteHandler(event)"
        xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView" destructionPolicy="never">
    
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            protected function button1_clickHandler(event:MouseEvent):void
            {
                navigator.pushView(SecondView);
            }          
            protected function view1_creationCompleteHandler(event:FlexEvent):void
            {
                (this.parentDocument as SampleProject1).myLabel.text = "First View";
            }
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <s:actionContent>
        <s:Button label="Next" click="button1_clickHandler(event)"/>
    </s:actionContent>
</s:View>

SecondView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" creationComplete="view1_creationCompleteHandler(event)"
        xmlns:s="library://ns.adobe.com/flex/spark" title="SecondView" destructionPolicy="never">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            protected function view1_creationCompleteHandler(event:FlexEvent):void
            {
                (this.parentDocument as SampleProject1).myLabel.text = "Second View";
            }
              protected function button1_clickHandler(event:MouseEvent):void
            {
                navigator.popView();
            }
            
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:navigationContent>
        <s:Button label="Back" click="button1_clickHandler(event)">
            
        </s:Button>
    </s:navigationContent>
</s:View>

Output

First View:

Second View:

Second View to First View:

Now changing the code in First View to this:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView" destructionPolicy="never"
        viewActivate="view1_viewActivateHandler(event)">
     <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import spark.events.ViewNavigatorEvent;
            protected function button1_clickHandler(event:MouseEvent):void
            {
                navigator.pushView(SecondView);
            }
            protected function view1_viewActivateHandler(event:ViewNavigatorEvent):void
            {
                (this.parentDocument as SampleProject1).myLabel.text = "First View";
            }
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:actionContent>
        <s:Button label="Next" click="button1_clickHandler(event)"/>
    </s:actionContent>
</s:View>

Now the three Screens look as:

Thanks and Have a nice day!