Devgirls Weblog

Flex Mobile Development – Dynamic Splash Screens

Holly Schinsky — Fri, 20 Jan 2012 17:14:11 +0000

Flash Builder 4.6 includes a new feature to allow you to add a dynamic splash screen component to your mobile application. This feature will allow you to load a different image based on a few different properties you can set to ensure you get the best image for the right device. The properties you can use to determine which image is displayed for the splash screen are:

dpi
minResolution
aspectRatio

You can combine these attributes as well to get the best possible image selected. It’s very easy to implement, you simple create an MXML component based on the SplashScreenImage property and include as many SplashScreenImageSource objects to cover the number of situations needed. For example, in the following code I’m setting different images depending on both dpi and aspectRatio properties. Note that this example makes an assumption about tablets generally being 160 DPI (thus needing the bigger image), the 320 DPI being the iPhone 4 and above and most android phones at 240 and setting the image based on that. It also assumes that I want to use the landscape version of the image when the aspectRatio happens to be landscape on startup. You could also use the minResolution to further ensure that the 160 DPI is indeed a tablet etc and that will cause the the stage width and stage height to be compared on startup to find the largest number of the two. If it’s equal to or greater than your minResolution setting, it will select that image for the splash screen.

DynamicSplashScreen.mxml



	
	
	
        
	
	
>/s:SplashScreenImage>

Now in your main application root, you simply specify the name of your component defined above in the splashScreenImage property as follows:

...

Portrait Splash

Landscape Splash

Apache Flex Update!

Holly Schinsky — Thu, 19 Jan 2012 15:24:39 +0000

It’s been quite the roller coaster in the Flex world these past few months to say the least! Now seemed like a good time for an update on the latest status of things.

Adobe Flex to Apache Flex
Adobe Flex is now Apache Flex (in case you’ve been under a rock lately or perhaps just discovered Flex ). It’s been contributed to the Apache community and is in incubator status. Incubator status is a holding place for a new Apache project and basically a gateway to it becoming a full-fledged project after a release or two. It was great news that it was accepted recently and I have no doubt it will quickly move out of this stage into a full-fledged project. The project has an amazing amount of traction so far, and it’s awesome to see all the activity! If you want to stay on top of the latest, subscribe to the mailing list here, (note that your inbox will be flooded so you might want to use a separate email to track it, it’s a high traffic mailing list ). There are a bunch of extremely talented, well-known developers behind this project as well, which is huge and makes all the difference, in my opinion. The Open Spoon Foundation is also actively behind this project and if you aren’t aware of it, definitely make a point of checking it out. I attended the Flex Summit in December and learned a lot about the Apache process from Roy Fielding (Apache Co-Founder), with the biggest takeaway being that Apache projects are run as a meritocracy, so there is equal opportunity amongst all and that contributions of any kind, including code, bug fixes and documentation are welcome.

The State of Things…
So the big question everyone has been asking us, should we continue to build apps with Flex? I think the general consensus to be made is yes. There’s still a viable need for this technology and with the dedication and energy of the community so far I feel very positive about things. As I’ve stated before and will continue to state, as a developer you shouldn’t put all of your eggs in any one basket, and should be learning the latest technologies along with continuing your Flex development to ensure your relevance and development diversity, but Flex remains an excellent choice for the right type of application.

Here are some related links you should check out that I found very useful as a meter for what other great developers are thinking and doing:

Joseph Labrecque – Questioning the viability of Flex
Joao Saleiro – After 6 years doing Flex, am I moving to HTML5?
The Flex Show – Discussing the Future of Flex with Joseph Labrecque and Mark Ehlert

Hot Topics…
One big topic on the mailing list right now centers around a new logo for Apache Flex. The community held a contest (over 50 entries submitted!) and the submissions can be found here. The contest ended yesterday and now the voting process has begun. To vote you will need to start by subscribing to the mailing list. Once subscribed you can cast your votes with a point system defined in the mailing list. There are also some excellent summaries of what’s going on with the project being posted to this blog by Michael Schmalle (a current contributor). I would definitely make a point to skim those summaries to get a quick read on the status of things since it can be hard to keep up with the mailing list.

The following links are also useful to check out for more info:
The Flex Incubator Project
Contributors
JIRA Bug Tracking
Flex Incubator Status Page
The initial proposal from Adobe
Getting Involved

This Blog…
As far as me and my evangelism are concerned, I plan to continue to use Flex and blog about it as I have been. The 2012 Flex User Group Tour is about to start and my team will be visiting many locations over the next couple of months where we’ll discuss all the recent activity and announcements and talk about the latest 4.6 release. You can also plan on seeing some posts on other technologies as I’m exploring them myself. I will make a point of comparing them to Flex as I go along where possible. I’m also really looking forward to seeing what Adobe has in store this year to help utilize these other technologies like HTML5, JavaScript/jQuery etc and already excited by what I’ve heard! I will post information on these topics as I’m allowed .

Game of Flex for Tablets Released!

Holly Schinsky — Wed, 07 Dec 2011 19:32:46 +0000

My fellow teammate Michael Chaize recently had an idea for creating a ‘game’ to showcase Flex and the latest 4.6 release features with Tour de Mobile Flex being the initial inspiration. I’m happy to announce that the Game of Flex is now available on both the Apple iTunes and Android Market for your downloading pleasure !

The Game of Flex consists of 16 questions which if answered correctly, will qualify you to win a free copy of Flash Builder 4.6! Ultimately though, it’s a learning tool, where we’ve included samples and source code for all of the new 4.6 features and other useful mobile features. Click the ‘Snippet’ button to get the source code for the sample within the app, and the ‘Tutorial’ button to link to tutorials with more details on how to use a certain feature.

Be sure to check out Michael’s post about the game, and visit the official website for it here!

Sample Question

Sample Code Snippet

Flex Mobile Development – Adding Maps with the MapQuest AS3/Flash API!

Holly Schinsky — Tue, 06 Dec 2011 20:13:17 +0000

A topic that has come up often in my conversations with developers lately is how to easily add mapping components to their their Flex and Flash mobile apps. Now I’m super excited to share this latest AS3/Flash API for mobile from MapQuest for everyone to check out! The new version contains touch-friendly maps and controls and was streamlined for performance on mobile.

To get started, first check out this sample application I’ve included the source and fxp for that was written by my friend Darin Weakley over at MapQuest. He’s done a great job of showcasing the fun cool features available in this app. I’ve included some screen shots below to give an idea of what it entails:

Map Component

Search Business

Search Results

Results on Map

Result Item Detail

Directions

Directions by Map

If you have an Android device, be sure to download the showcase application for free to your device!

To implement this in your own app you will need to create yourself an app key and join the developer program here before using the APIs. It’s fast and easy. Click ‘Join Now’. Also, don’t forget to include the latest MapQuest Flash API 7.07 mobile swc file in your project (see the sample for reference). This link also has documentation and other examples on the right side of the page to check out for more info!

MapQuest Flash Maps API Quick Links

Mobile Flash Maps API
Web/Desktop Flash Maps API
OpenStreetMap Mobile Flash Maps API – more information about OpenStreetMap (OSM)
OpenStreetMap Web/Desktop Flash Maps API

Flex Mobile Development – SplitViewNavigator Tutorial (w/ source)

Holly Schinsky — Thu, 01 Dec 2011 16:09:35 +0000

The SplitViewNavigator is another new Flex 4.6 component targeted for tablet development that can be used when you want to create a master view / detail view in your application, where the master view typically serves as a source of navigation and the detail view displays the results of the action taken on the master view. The master view is typically the left or top of the screen, and the detail view is typically the right side or bottom part of the screen depending on layout. If you’re not familiar with this screen pattern, see this link for more detail. A great example of this is your typical mail application, for instance on one of my iPad email accounts:

Now we can build applications with this type of layout simply using built-in Flex 4.6 features! The SplitViewNavigator extends ViewNavigatorBase, so it does not reside at the root level of the application but rather at the child level similar to ViewNavigator. Note that this component can only be used in a blank Application or within a TabbedViewNavigatorApplication. Here’s an example:

In this case my left view and right view are simple View classes showing a list of cities to click on and some dummy data about that particular city in the detail. I’ve included the code below for reference:

LeftView.mxml




	
		
	

	
		
			
				Atlanta, GA
				Baltimore, MD
				Boston, MA
				Chicago, IL
				Dallas, TX
				Detroit, MI
				Honolulu, HI
				Los Angeles, CA
				Minneapolis, MA
				New Orleans, LA
				New York, NY
				Richmond, VA
				San Francisco, CA
				San Jose, CA
				St. Louis, MO
				Washington, DC

RightView.mxml

The resulting application:

You could also set a layout on the SplitViewNavigator container so if you wanted it to split vertically for instance, you would simply set a VerticalLayout, and adjust the height percentages with the width set to 100%, such as:

Here’s the updated layout:

This split view approach works well for landscape mode, however, in portrait mode you may want to display it a little differently since the screen width is much less to work with. There are some built-in features to help you do this. There’s an autoHideFirstViewNavigator property on the SplitViewNavigator that will automatically hide the left side view when the application receives an orientation change event to portrait.

Now when we run it, we will see the following:

Not very useful yet though since there’s no way to navigate to a different item in our list! So we need to take this one step further and use the showViewNavigatorInPopUp function from the SplitViewNavigator to pop up our list in a Callout while in portrait mode. We can call this function from a button in the right ViewNavigator’s actionBar navigationContent for instance such as the following:

Note: Just to clarify, in the above we are using the actionBar already implicitly defined as part of the Spark ViewNavigator container and setting the parent for the popup to the listButton, so the Callout or popup arrow will stem from that button. Here’s what the above code will look like when run in portrait mode:

At this point, we probably don’t want this button to show though when going back into landscape mode, so we’ll need to add states management to set visible to false when in landscape. One way to determine when to update the state would be to add a resize event handler and check the width and height and update the state accordingly. Our code now looks like the following:



	
		height)
					this.currentState="landscape";
				else this.currentState="portrait";
			}
		]]>

Now when we run the application in landscape mode, we can see the List button is not showing in the actionBar:

You can download the source and project file for this sample application here!

Also, if you haven’t looked at this yet, Christophe and I created an extensive SplitViewNavigator-based expense tracking tablet application called XpenseIt that includes a bunch of other Flex 4.6 features as well and can be downloaded here. Here is a screenshot from that application:

Flex Mobile Development – Flex 4.6 Cool New Soft Keyboard Features – sample w/ source!

Holly Schinsky — Tue, 29 Nov 2011 16:43:47 +0000

Flex 4.6 (release going public TODAY – I will update this post with the link as soon as I have it) – includes some nice soft keyboard enhancements to be aware of, including setting a certain type of keyboard or setting the default return key lable, and even auto-correcting and auto-capitalizing text. This post will show how to use each of them along with some sample code. The sample application is basically just a bunch of text fields with labels identifying which feature or option is set on that particular field so when you tap to type into it you should see the effect of the setting on either the soft keyboard or the text. The src/ folder and fxp are included for reference or download so you can try it out yourself as well.

softKeyboardType
There’s a new softKeyboardType property on the TextInput and TextArea components that will allow you to set the different soft keyboard types available on mobile devices. The value for this property could be set to any one of the following number, email, punctuation, url, contact or default, and will invoke the native soft keyboard of that type on the given device.

For example, this snippet of code from the sample project I’m including with this post sets the keyboard type to number:

Here’s how this looks on the iPad 2 with the above code when I tap into the text field:

And here we can see how it looks on the Android Galaxy Tablet:

On the iPhone 4, you would get this keyboard when it’s set to number:

Compare this to the default soft keyboard on the iPhone:

returnKeyLabel
There’s another new property for returnKeyLabel that can be used for customizing the label on the return key to one of the following: search, next, go, done (the default is simply return )

Here’s a code snippet of how it’s used:

Here’s a screenshot of how it looks on the iPad 2 when set to search:

And on the Android Galaxy Tablet when set to go:

autoCapitalize and autoCorrect
You can also set an autoCapitalize property on a text field to automatically capitalize for you while your typing your text messages etc. The values for autoCapitalize are all, word, sentence and none.

Also, most people are familiar with mobile devices performing an auto-correction or suggestion for words while they’re typing a text message or email etc, and Flex 4.6 now has support for this. You can simply set the autoCorrect property to true and it will suggest fixes to your misspelled words.

It’s very easy to add these features to your code, here’s an example:

Followed by a screenshot from it running on the iPad 2:

You will actually notice the Caps Lock button turn on while you’re typing on the keyboard and the rule calls for a capital letter. Here’s a screenshot of typing into a field on the Android Galaxy Tablet while I’m in a text field with the autoCapitalize set to all:

Note that you can combine these properties as needed so you could do something like:

The sample source and fxp for this project is available HERE!

Flex is Alive!

Holly Schinsky — Thu, 17 Nov 2011 16:02:50 +0000

Flex folks, first of all, today there’s a new official statement out on the Adobe website about Adobe’s commitments to the Flash Platform including plans for Flex that you should be aware of. Secondly there’s a new post from the Product Management team out now summarizing the recent Flex Q&A. There’s been a lot of frustration in the community (which I understand and can personally relate to having been part of the community myself for a very long time) and I wish that the sequence of events (and frankly the communication) did not happen as it did, but it is what it is at this point and we need to carry on. I hope people can see this move of Flex to an Apache model with dedicated full-time engineering resources in San Francisco as the good news that it is!! Flex is alive and well and will continue to grow as the dust settles. Even now we can build amazing applications over many other technologies in half the amount of time with it in its current state. And the growth in Flex and AIR for mobile is allowing us to do some super cool and fun stuff which is about to just get better with the upcoming release of Flex 4.6 in a couple weeks!

I realize people’s trust is tarnished and people are scorned and angry, but please try to remove your emotions from the equation and look at this for what it is. Any good developer knows that technology is ever-changing and you have to ride the current wave. It’s evident that HTML 5/JavaScript is gaining ground and needs to be kept on our radar of things to be learning (whether we love it or not). It should also be considered as an option right now for certain applications where it makes more sense. As much as I am passionate about Flex myself, it can be overkill for many applications. And what better way to refine our skills in the HTML/JS arena by actually building some apps to gain the experience. As we all know though, there are still a ton of applications where it makes more sense to use Flex (enterprise and many mobile AIR apps) and fortunately we still have that option!

I know many of you are having to answer some tough questions from your clients and management about all of this, I hope today’s statements can help in that respect. If there was a way I could change how things happened myself or wave a magic do-over wand I would in a heartbeat . This has not been easy for any of us. I just hope we can now start channeling our frustrations into something more positive and productive and get back to having some fun!

I will continue to post any updates on the move to Apache as I find out. Start thinking about how you might be able to contribute !

Flex Mobile Development – DateSpinner Sample (with source)!

Holly Schinsky — Thu, 17 Nov 2011 14:13:11 +0000

The next feature I want to highlight in the upcoming Flex 4.6 release is the new DateSpinner control. The DateSpinner allows you to represent and select a date and/or time through a custom-skinned set of SpinnerList controls out of the box in Flex 4.6. Here’s an example:

If you take a look at the DateSpinner.as source code in the SDK, you will see there are a number of SpinnerList controls defined as properties within it to use for repesenting the year, month, day etc to make up this DateSpinner:

 /**
     *  The SpinnerList that shows the year field of the date.
     *
     *  @langversion 3.0
     *  @playerversion AIR 3
     *  @productversion Flex 4.6
     */
    protected var yearList:SpinnerList;

    /**
     *  The SpinnerList that shows the month field of the date.
     *
     *  @langversion 3.0
     *  @playerversion AIR 3
     *  @productversion Flex 4.6
     */
    protected var monthList:SpinnerList;

    /**
     *  The SpinnerList that shows the date field of the date.
     *
     *  @langversion 3.0
     *  @playerversion AIR 3
     *  @productversion Flex 4.6
     */
    protected var dateList:SpinnerList;

selectedDate
The current date is shown by default on the DateSpinner control, however you can select a different date by setting the selectedDate property such as in the following where I’m setting the date to the last day of the year (remember the month offset starts at 0 so we would use 11 instead of 12 for the month value):

Here’s the result:

displayMode
The displayMode property is used to control what to display in the DateSpinner, and can be set to show the date, time or date and time. The spark.components.calendarClasses.DateSelectorDisplayMode class can be used to set this property to a predefined constant such as shown in the code below:

minDate/maxDate
You can specify a minimum or maximum date by using the minDate and maxDate properties to restrict the range of dates shown in the list using code such as the following:

minuteStepSize
If you’re displaying minutes (using TIME or DATE_AND_TIME mode), there is a minuteStepSize property that can be set to control the minutes increment. Here’s an example of how you would set the minutes to display in 10 minute increments:

And a screenshot showing how it displays:

Current Date Color
By default the current (today’s) date is set to a light blue shade as shown in the first screenshot. You can change this color by simply setting an accentColor on your DateSpinner control such as:

The result of setting this property is shown below:

Styling the DateSpinner
You can style certain attributes on your DateSpinner to control the font color, indentation, letter spacing etc. Here’s an example showing some properties you may want to customize:

s|DateSpinner
{
	accentColor: magenta;
	color: blue;
	letterSpacing: 5;
	textIndent: 5;
	textDecoration: underline;
}

The result is shown here (not very realistic but you get the idea )!

The source code and project for this sample can be found HERE if you’d like to try this out!

Flex Mobile Development – SpinnerList Sample (with source code)

Holly Schinsky — Mon, 14 Nov 2011 16:45:29 +0000

There was a lot of news from Adobe last week surrounding the Flash platform and Flex SDK (understatement !!) I know many have formed their own opinions on the state of affairs, but the bottom line is, we need to move forward now and be productive again. Flex 4.6 will launch soon and there are some really cool new components that I want to continue to highlight prior to the launch.

The next in my series is the new SpinnerList component. It can be used to show a list of items that appears to wrap around an animated spinner control. The list shows five items by default. If you want to change the default number of items shown, you can create a custom skin.

Here’s an example of the SpinnerList:

The sample code for the above View looks like the following:




	
		
	

	
	
	
		
			
				
					Boston, MA
					Chicago, IL
					Honolulu, HI
					New York, NY
					San Francisco, CA
					San Jose, CA
					Washington, DC

List Data
The SpinnerList control takes anything implementing the IList interface for the dataProvider, so you could bind it to an ArrayCollection, ArrayList, NumericDataProvider, XMLListCollection etc. This next example shows how to bind to an ArrayCollection containing a complex object versus a simple String. You could use a similar approach for data coming back as complex objects from a service call stored in an ArrayCollection:

The above code produces the following:

SpinnerListContainer
Notice that the SpinnerList is put in a SpinnerListContainer which provides the chrome and a layout for it (HorizontalLayout by default). If you do not include the SpinnerList in a SpinnerListContainer, it would like the following (not very useful!):

If you plan to bind a couple of SpinnerList controls together, you can do this by putting them all within the same SpinnerListContainer and they will be horizontally laid out properly by default. The new Flex 4.6 DateSpinner control is an example of this… See below on ‘Selecting Items’ for another example of two SpinnerList‘s in one SpinnerListContainer.

List Wrapping
By default the list items wrap, however if you don’t want this to occur by default, you can set the wrapElements property to false and it will not wrap:

...

...

You can see the empty item in the last spot in the following screenshot since the wrapElements is false:

Displaying the Label
You can use a labelFunction instead of a labelField for the label shown in the list. Here’s an example of using a simple labelFunction to concatenate the name and price properties from the data object:

...

	

...

And a screenshot:

Selecting Items
You can programmatically set items to be selected in the SpinnerList via the selectedIndex or selectedItem properties. For instance, in the following we can bind the 2nd list to the 1st SpinnerList selectedIndex such as:

Then as you interact with the left side numeric SpinnerList and select different indexes, the right SpinnerList selected item will change (probably need to download and run the source for yourself to see this best). Using the above code, when I select 1 instead of 0, the right side will select the Stapler item:

Styling List Items
You can style the SpinnerListItemRenderer to change the padding between the items for instance by setting a style such as:

        
		@namespace s "library://ns.adobe.com/flex/spark";

		s|SpinnerListItemRenderer
		{
			paddingTop : 5;
			paddingBottom : 5;
			paddingLeft : 5;
			paddingRight : 5;
		}

You could also override the SpinnerListItemRenderer class and modify the background color or alpha, such as the following simple custom item renderer:

package renderers
{
	import spark.components.SpinnerListItemRenderer;

	public class MySpinnerListRenderer extends SpinnerListItemRenderer
	{
		override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
		{
			graphics.beginFill(0x92ADC2, .7);
			graphics.lineStyle();
			graphics.drawRect(0, 0, unscaledWidth,unscaledHeight);
			graphics.endFill();
		}
	}
}

Here is the screenshot with the new item renderer applied to the SpinnerLists:

The sample project and source code is available HERE if you’d like to give it a whirl!

Flex Mobile Development – ToggleSwitch Sample (with source)!

Holly Schinsky — Wed, 02 Nov 2011 20:38:49 +0000

The Flex/Flash Builder 4.6 prerelease includes a new ToggleSwitch control that can be used to indicate a binary value (like a CheckBox). Below is a screenshot showing a sample of two being used. The first switch shows it selected by default using a specified slide duration (for animation in milliseconds), and the second one uses a custom skin class to define different labels:

The important part of the sample MXML using the components is shown below. Note how you can use the change event on the switch to determine when selection has changed:

The simple ActionScript skin used to change the labels to the custom values in the 2nd ToggleSwitch control is shown here:

package skins
{
	import spark.skins.mobile.ToggleSwitchSkin;

	public class MyToggleSwitchSkin extends ToggleSwitchSkin
	{
		public function MyToggleSwitchSkin()
		{
			super();
			selectedLabel="Open";
			unselectedLabel="Closed";
		}
	}
}

You can download the sample code, project or apk HERE.

If you haven’t joined the Flex 4.6/Flash Builder 4.6 prerelease yet, you can do so here!