Flex Mobile Device Back Button – Approach 1

In my previous post, Flex Mobile Action Bar Back Buttons, I provided a brief overview of the history of “Back” buttons for Android and Apple devices.

Approach 1 uses the Dynamic UI Pattern approach described in the previous article. In essence, I need to toggle the button to be displayed based on which device the code is currently running. This detection occurs in the ViewActivate portion of the life cycle creation of a view.


In addition, for the Android device I need to take into account the dpi of each device. For android devices, I need to add a multi DPI bitmap approach so the icons do not appear pixelated.

In my gui detail view, I added code in the declarations section of the view.

The Declarations node contained the following:

<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>

In the declaration section, I created a button to be used in an Apple device creatively called “backButtonIos” and for an Android device called “backButtonAndroid”. Note for the android device, I included a MultiDPIBitmapSource to be used based on the dpi of the device. The appropriate icon for a device should be selected based on the dpi of the device. This should prevent the pixelation of the icon on a device.

I then updated the method called by the ViewActivate Event during the view life cycle to create the correct button based on the device which was detected as illustrated below:

protected function view1_viewActivateHandler(event:ViewNavigatorEvent):void
			{
				trace("entered view activate method");
				
				//trace("os is " + flash.system.Capabilities.version.substr(0,3));
				//only on android device, back button uses icons
				//on ios, back button uses labels
				
				if (flash.system.Capabilities.version.substr(0,3) != "AND"){
					// create the button on the action bar in the view, then set the label
					this.navigationContent = [backButtonIos];
					this.backButtonIos.label ="Back";
					
				} else {
					//this is what is displayed on android device
					this.navigationContent = [backButtonAndroid];
					
				}
				
			}

From the corresponding ViewActivate handler method, the appropriate button can be dynamically added to the action bar based on the currently detected device.

This code provided the basic behavior that I wanted but the swapping in and out of the text and icon in the respective buttons was visible to the user. This is because the ViewActivate event is called once the view is visible. It was disconcerting to me to be able to see the information being injected on a visible screen view so it also would be disconcerting to the user as well.

The next approach I took was to try states and have the states be set based on the device type, Apple or Android.

Advertisements

2 Responses to Flex Mobile Device Back Button – Approach 1

  1. […] my previous post, Flex Mobile Device Back Button – Approach 1, I provided a brief overview of the ViewActivate approach to the button creation process which […]

  2. […] Add device based Back button after detecting device in ViewActivate method for view […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: