We  have been testing our Flex SDK 4 based projects that are under development on Flash Player for mobile Android operating system. I must say, with Flash Player support, Android OS has filled a huge hole for our increased, yet un-answered expectations of smart-phone experience.

As Flash support is in its primitive stages for mobile devices, we know that Adobe is going to enhance the user experience of both standard and lite version support for mobile devices.

Since we have upgraded our SDK’s to version 4 of Adobe Flex (Adobe Flash Builder), we have been using Spark components, with a sense of joy, I might add. Spark’s development is an on-going effort by Adobe. One of the major reasons of its existence is told to be the support for mobile devices with its light-weight nature and natively better look and feel.

Problem at Hand:

Our shiny applications, upon focus of related form input components are failing to invoke the native keyboard on HTC brand Google Nexus One phones. But this problem is not limited to this brand.

If you access this page via your Android Browser (w/ Flash Player support, of course), you will see that the input areas do not invoke the Android keyboard. Since the browsers do not have support of opening the keyboard with functional button, your users will not be able to login to or fill out a form on your application. This is unfortunately due to Spark component.

The application code of the above example is:

<?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"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="100%"
			   height="100%">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:VGroup id="myHorizontalGroup"
			  verticalAlign="middle"
			  horizontalAlign="center">

		<mx:Form id="mxForm">
			<s:Label text="Spark Components on MX Form"
					 fontWeight="bold"/>
			<s:Label text="Text Input Label:"/>
			<s:TextInput id="myTextInput"
						 width="200"/>
			<mx:Spacer height="2"/>
			<s:Label text="Text Area Label:"/>
			<s:TextArea id="myTextArea"
						width="200"
						heightInLines="3"/>
			<s:Button id="myButton"
					  label="Submit"/>
		</mx:Form>
	</s:VGroup>
</s:Application>

The below example is pure of MX components. As you may see, unlike Spark components, MX input components can invoke the native keyboard on Android.

You may find the code for MX component usage below. The reason I am adding these codes is to show that both of the applications are bare and none of the properties that may effect the experience of the users are implemented. So feel free to experiment on your own.

<?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"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="100%"
			   height="100%">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:VGroup id="myHorizontalGroup"
			  verticalAlign="middle"
			  horizontalAlign="center">
		<mx:Form id="mxForm">
			<mx:Label text="MX Components on MX Form"
					  fontWeight="bold"/>
			<mx:Label text="Text Input Label:"/>
			<mx:TextInput id="myTextInput"
						  width="200"/>
			<mx:Spacer height="2"/>
			<mx:Label text="Text Area Label:"/>
			<mx:TextArea id="myTextArea"
						 width="200"
						 height="40"/>
			<mx:Button id="myButton"
					   label="Submit"/>
		</mx:Form>
	</s:VGroup>
</s:Application>

Is there a solution?

Hopefully yes, but we could not yet figure it out. All I can suggest is that if you plan to span your application use to Android users, you may want to consider sticking to MX components for your text input interactivity that actually requires keyboard inputs. One other solution may be to use virtual keyboards, but I am sure that Adobe is going to come up with a fix sooner or later with their Flex 4 and Spark component enhancements.