Flex Mobile : DateField 4 Mobile

Posted: September 1, 2011 in Flex Mobile

Need: Since Adobe has not yet released a spark “mobile optimized” DateField component to replace the mx:DateField component, I needed a solution fast for a touch-friendly DateField to use in my mobile tablet apps.

FlexTex GitRDone: This is my “GitRDone” workaround for now.  No custom components, No 3rd Party components.  Simple and Easy.  SOURCE FLEX PROJECT

1. I imported the mx.swc from my Flex 4.5.1 SDK into the library path of my Flex Mobile Project.  This is a back door to using mx inside a Mobile Project, which does not include the mx.swc . I added the mx namespace in my View.

2. Then, thanks to Peter Dehaan over at http://blog.flexexamples.com/ for examples on skinning mx:DateField, I changed the style  to make it more touch-friendly.  Increased the size of the calendar icon and the next/previous month icon.  I also increased the fontSize so the dates were big enough to select with finger.

3.  I tested it on the Xoom and the Acer Iconia tablets. Works great!  Here is how it looks on Motorola Xoom.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" 
		xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
	
	<fx:Script>
		<![CDATA[	
			import mx.controls.DateChooser;
			
		]]>
	</fx:Script>
	
	
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/halo";
		@namespace components "components.*";
		
		.dfStyle
		{
			skin: Embed("calendarIcon48x48.png");
			upSkin: ClassReference(null);
			overSkin: ClassReference(null);
			downSkin: ClassReference(null);
			disabledSkin: ClassReference(null); 
		}
		
			.myDateChooserStyles {
				/* Previous Month */
			prevMonthUpSkin: Embed("touchButtonLeft.png");
			prevMonthOverSkin: Embed("touchButtonLeft.png");
			prevMonthDownSkin: Embed("touchButtonLeft.png");
			prevMonthDisabledSkin: Embed("touchButtonLeft.png");
			
			/* Next Month */
			nextMonthUpSkin: Embed("touchButtonRight.png");
			nextMonthOverSkin: Embed("touchButtonRight.png");
			nextMonthDownSkin: Embed("touchButtonRight.png");
			nextMonthDisabledSkin: Embed("touchButtonRight.png");
		}
		
		
	</fx:Style>
	<s:Panel title="My Form" width="100%" height="100%">
		<s:VGroup paddingRight="10" paddingLeft="10" paddingTop="10" paddingBottom="10" width="100%" height="100%">
		<s:Form>
		<s:FormItem  label="Start Date" fontSize="20">
			<mx:DateField id="date1"  interactionMode="touch" styleName="dfStyle" dateChooserStyleName="myDateChooserStyles"   fontSize="40" height="48" />
		</s:FormItem>
		<s:FormItem   label="End Date" fontSize="20">
			<mx:DateField id="date2"  styleName="dfStyle" dateChooserStyleName="myDateChooserStyles"   fontSize="40" height="48" />
		</s:FormItem>
		</s:Form>
		</s:VGroup>
		<s:controlBarContent>
			<s:Button label="Save" height="50"/>
		</s:controlBarContent>
	</s:Panel>
	
</s:View>
Advertisements
Comments
  1. flextex says:

    Forgot to mention. The mx.swc lives here …
    /Applications/Adobe Flash Builder 4.5/sdks/4.5.1/frameworks/libs/mx

  2. Gabriel says:

    Thanks for the help. You also forgot to mention that the sparkskins.swc also needs to be added.
    It is on …/Adobe Flash Builder 4.5\sdks\4.5.1\frameworks\projects\sparkskins\src

  3. flextex says:

    Thanks Gabriel. I did forget that additional swc. Sorry.

  4. Santanu Karar says:

    Despite of the fact that provided FXP is running fine into my FB4.5.1 (except 2 halo warnings) – when I try copying the necessary codes to another existing 4.5.1 mobile project its returning me with compiler errors like “Definition mx.skins.spark:BorderSkin could not be found.” – though I’ve imported both the said SWC explicitly into my project – mx and sparkskins.

    Any suggestion?

  5. Santanu Karar says:

    Ok, I think I’ve got the answer. Beside of the said path provided here which used as to import those SWC, I had to to import them from /Application/Adobe Flash Builder 4.5./sdks/frameworks/libs – it worked. Thanks!

  6. Genie says:

    Thanks a lot for this! This has helped a lot.

  7. Avatarchik says:

    Hi! Tell me please how to install this component?

    • flextex says:

      It is not exactly a component. It is just a way to style the existing DateField component to be touch friendly for Tablets. You can either copy the code from the post, or import the Flex Project into your Flash Builder 4+. In Flash Builder go to File >> Import Flex Project. After importing, you can learn how it works and setup your project accordingly.

      There is one trick. Only thing you have to install is two SWC files. Since Flex Mobile Project don’t officially support mx components, you need to add the mx.swc and sparkskins.swc into your library path. Project Properties >> Flex Build Path >> Library Path add SWC. You can find the mx component inside your Flex SDK folder. On Mac for Flex 4.5.1, they are here /Application/Adobe Flash Builder 4.5./sdks/4.5.1/frameworks/libs . You will see these in the sample Flex Project under Library Path.

      Good new is we won’t have to do this for much longer. 🙂 See DateSpinner coming in Flex 4.6
      http://www.adobe.com/devnet/flex/articles/whats-new-flex-flash-builder-46.html
      Very nice! … just not available to the public yet.

      Hope this helps.
      Don

  8. flextex says:

    Holly@Adobe recently did a blog post related to this post here. It is about using mobile components in non-mobile Flex projects. Very good post.
    http://devgirl.org/2011/10/19/using-flex-mobile-components-in-a-flexair-desktop-application/

    Her instructions for import the SWCs is similar and may help you here.

    Shouldn’t be long before we see DateSpinner!

    Don Kerr

  9. Jason Taylor says:

    Haha wow, you just saved my ass – had no idea about that trick and had been using a convulted crazy process to deploy a existing flex app to tablets… now it’s perfect!

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