Flex Mobile Device Back Button – Approach 2

In 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 dynamically adds the correct “Back” button based on the device where the code was running.

Approach 2 will use states to render the appropriate button on the device.

First I added the following to the mxml file:

<s:states>
		<s:State name="iosDevice" />
		<s:State name="androidDevice" />
	</s:states>
	<s:navigationContent>
		<s:Button id="backButtonIos" 
				  includeIn="iosDevice"
				  click="returnToList(event)">
		</s:Button>
		<s:Button id="backButtonAndroid" includeIn="androidDevice"
				  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>
	</s:navigationContent>

From the code, you can see that there are two states defined:

  1. iosDevice
  2. androidDevice

Then in the navigatorContent node I placed both the button for apple devices(id=”backButtonIos”) and the button for the android devices(id=”backButtonAndroid”). I then set the includeIn attribute for both of these buttons.

backButtonAndroid will be included when the currentState=”androidDevice”
backButtonIos will be included when the currentState=”iosDevice”

I then updated the method called by the ViewActivate Event during the view life cycle to detect the device type and set the current state based on this type as illustrated below:

protected function view1_viewActivateHandler(event:ViewNavigatorEvent):void
			{
				trace("entered view activate method");
				
				//only on android device, back button uses icons
				//on ios, back button uses labels				
				if (flash.system.Capabilities.version.substr(0,3) != "AND"){
					
					this.currentState = "iosDevice";
					this.backButtonIos.label = "Back";
					
					
				} else {
					//set the button state for android device
					
					this.currentState = "androidDevice";
					
				}
				
			}

This method worked well in rendering the button for both devices. The button transition was very smooth without the jerkiness of the previous approach. The problem was the view rendered very slowly because of all the baggage associated with changing state.

This caused me to review the life cycle diagrams for the rendering of a flex view at Define Views in a Mobile Application and see what some alternative events that could possibly used. It appeared that the creation complete event would work, since the view should be created but just not visible to the user.

Advertisements

2 Responses to Flex Mobile Device Back Button – Approach 2

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

  2. […] Add device based Back buttons using states – detecting device in view activiate method […]

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: