Flex Mobile Device Back Button – Approach 3

In my previous post, Flex Mobile Device Back Button – Approach 2, I provided a brief overview of using states to dynamically display the appropriate device based “Back” button. I was not happy with this approach because the view ran like a dog. The responsiveness was very slow. At the end of the this post, I realized that the creation complete event would allow us to inject the child component before the view becomes visible to the user.

Despite the discussion in this post Air Mobile Performance Tip Using Flex about not recommending using creation complete event because it causes your view to render slowly, I found that this event actually provided me with the behavior I desired. The action bar “Back” button was injected before the view was made visible and the view rendering was very fast as well.

Approach 3 will copy the method used in the first approach, but will replace the ViewActivate method handler with a CreationComplete method handler.

Using the same code in the declaration node section of the code used in Approach 1, as illustrated below:

<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<s:Button id="backButtonIos"
				  click="returnToList(event)">
		</s:Button>
		<s:Button id="backButtonAndroid"
				  click="returnToList(event)">
			<s:icon>
				<s:MultiDPIBitmapSource id="backIcon"
										source160dpi="@Embed('../icons/NIMNotesIconCaret24.png')"
										source240dpi="@Embed('../icons/NIMNotesIconCaret32.png')"
										source320dpi="@Embed('../icons/NIMNotesIconCaret48.png')"/>
			</s:icon>
			
		</s:Button>
		
	</fx:Declarations>

I then added a creation complete handler to the view, which used the same code that was used in the view activate handler method in Approach 1. The code is displayed below:

//this method is called when view is complete but not visible
			//this made the button visibility better than using view activate
			protected function view1_creationCompleteHandler(event:FlexEvent):void
			{
				
				trace("Entered creation complete method");
				if (flash.system.Capabilities.version.substr(0,3) != "AND"){
					//*/
					this.navigationContent = [backButtonIos];
					this.backButtonIos.label ="Back";
					
				} else {
					//this is what is displayed on android device
					this.navigationContent = [backButtonAndroid];
				}
			}

The result was exactly what I desired. The appropriate button was made visible without the user being able to detect the dynamic rendering of the appropriate device based button. In addition, the view came up very fast and without any of the slowness of the previous state method. Perhaps this view rendering behavior had no noticeable effect because the button is injected into the view after it has been created in both Approach 1 and 3.