Archive for September, 2011

Mobile Flex: Tabs (tabbar) Moves Up With Soft/Virtual Keyboard

Thursday, September 22nd, 2011

This is an annoying problem. The tabs in the tabbar in a TabbedViewNavigatorApplication move up and stay above the virtual keyboard (aka soft keyboard) in a Flex mobile application.

Some suggest disabling scrolling, eh no…. so this works better… on an application level, listen to the keyboard activate and deactivate events, and hide/display the tabs as needed:

<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
								  xmlns:s="library://ns.adobe.com/flex/spark" initialize="tabbedviewnavigatorapplication1_initializeHandler(event)" >
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			protected function tabbedviewnavigatorapplication1_initializeHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
				this.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATING, softKeyboardActivating);
				this.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, softKeyboardDeactivate);
			}
			
			private function softKeyboardActivating(event:SoftKeyboardEvent):void{
				tabbedNavigator.tabBar.visible = false;
			}
				
			private function softKeyboardDeactivate(event:SoftKeyboardEvent):void{
				tabbedNavigator.tabBar.visible = true;
			}
			
		]]>
	</fx:Script>
	
	<s:ViewNavigator label="UserInput" width="100%" height="100%" firstView="views.UserInputView"/>
	<s:ViewNavigator label="Second" width="100%" height="100%" firstView="views.SecondView"/>
	
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
</s:TabbedViewNavigatorApplication>

Flex 4.5 Mobile Alert Box & Always Visible Scrollbars (with Mobile App in Browser Demo!)

Tuesday, September 6th, 2011

I created a nice Flex Mobile Alert popup based on a DevGirl.org tutorial, but improved it so that it can be called from anywhere in the code, and will popup centered in the currently active view (in the web demo it will be off centre, but on a mobile device its fine). I have also added functionality (based on Flexponential.com article) so that the text area of the Alert will have scrollbars that are always visible (a dumb-ass limitation of the current Flex 4.5.1 SDK build – now fixed in Flex 6).

Always Visible ScrollBar

Check out the Mobile App demo (click picture below) – its the Flex mobile app running in the browser (use Firefox/Chrome – doesnt look quite right in IE yet) – this was based on a brilliant post by riagora.com. Will upload the source at some point, but the AlertBox code is in the full article, along with direct links to the tutorials.

Mobile App in Browser (Click to run Demo)

Read the rest of this article…………….