Archive for the ‘Mobile’ Category

Flex 4.6 Mobile Running on Web (desktop browser)

Wednesday, December 14th, 2011

For those who have not yet tried out the Flex 4.6 mobile components, I have put together a collection of samples from the Adobe Help website that are runnable from a desktop web browser. I think the SplitViewNavigator looks really cool. Links to the code snippets used in the examples are below. View Source enabled!

Enjoy!

Flex 4.6 Mobile UI Running on Web (view source enabled)

Note:

Holly Schinsky has a good tutorial on getting mobile components running inĀ  a Flex web app or desktop Air app.

Code Snippet Links:

Multiple Panes in a Mobile Application – Adobe Help

Date Spinners – Adobe Help

Spinner List with Embedded Images – Adobe Help

Flex 4.5 Mobile Paged/Stepper List

Thursday, October 13th, 2011

This mobile component converts a regular Flex mobile Horizontal List into a stepped/paged list.

It uses a custom skin for the list and a custom skin for the list’s scrollbar. The previous and next buttons are seperate from the list, and trigger the custom scrollbar’s changeValueByPage() function to move up and down the list. The two lists are use double binding as a visual aid for demo purposes, and I have used the lists ensureIndexIsVisible() function to ensure the selected index is always visible (now that’s intuitive function naming Mr. Adobe).

The paged list also employs the gestureSwipe event, but this cant be seen on the online demo. Thanks to Steven from Flexponential for his brilliant post that I based this component on. If you see any ways to improve it, please let me know.

Note: the demo runs just as it would on a mobile phone, as I have embedded mobilecomponents.swc and imported the mobile theme (see prev post to see how this is achieved).

Click the image below to view the mobile demo online! (right click for View Source)

Mobile Paged/Stepper Horizontal List (click to run demo)

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>