Flash Builder 4.5 – Mobile Highlights

April 11, 2011By 28 Comments

Now that Flash Builder 4.5 and Flex 4.5 have been announced and will be available to the public soon, I’ve put together a list of some mobile highlights to show off more of what you can expect to do with this release. A bunch of new samples based around these releases are coming soon to Tour de Flex and Adobe AIR Launchpad!

Note: The Adobe AIR Launchpad is a great place to start with generating a mobile Flex project you can use as a wrapper for your application. The current version of Adobe AIR Launchpad available is based on Flash Builder Burrito but an updated version will be released when Flash Builder 4.5 and Flex 4.5 SDK are officially available to the public in a couple of weeks.

Mobile UI

  • Flex 4.5 includes new Spark Application types for mobile including the ViewNavigatorApplication and the TabbedViewNavigatorApplication. The TabbedViewNavigatorApplication would be used for more complex applications that might need several ‘sets’ or stacks of views, each managed by a tab that can be navigated through separately. Note: the naming of these root application tags has changed from the Flash Builder Burrito Preview, from MobileApplication and TabbedMobileApplication.
  • A mobile application includes an ActionBar and one or more Views or collections of views.
  • In a TabbedViewNavigatorApplication, each set of views will have its own ActionBar and only the tab bar is global to the application as a whole.

Here is an example of my RunTracker application which contains 3 tabs coded as ViewNavigator objects in MXML containing the firstView property set to the view to be shown first when the tab is clicked:

<?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" applicationComplete="init()">
	<fx:Declarations>
		<s:ArrayCollection id="runsAC"/>
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import com.devgirl.runtracker.events.RunListResultEvent;
			import com.devgirl.runtracker.service.DBService;
			import com.devgirl.runtracker.dao.DatabaseHelper;
				
			protected var dbService:DBService;
			
			protected function init():void
			{
				DatabaseHelper.openDatabase(File.documentsDirectory.resolvePath("RunTracker.db"));
			}
		]]>
	</fx:Script>
	<s:ViewNavigator id="milesTab" label="Miles" width="100%" height="100%" firstView="com.devgirl.runtracker.views.MilesView" firstViewData="{runsAC}"/>
	<s:ViewNavigator id="historyTab" label="History" width="100%" height="100%" firstView="com.devgirl.runtracker.views.HistoryView" firstViewData="{runsAC}"/>
	<s:ViewNavigator id="trendsTab" label="Trends" width="100%" height="100%" firstView="com.devgirl.runtracker.views.TrendsView" firstViewData="{runsAC}"/>
</s:TabbedViewNavigatorApplication>

The tab bar is created at the bottom of the application as shown in the following screenshot:

For a ViewNavigatorApplication, you will have one set of views, with the firstView property set on the root application tag as follows:

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					     xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.SimpleViewAppHomeView">
	
</s:ViewNavigatorApplication>

The ActionBar is created at the top of any type of mobile application and can contain navigational controls, a title and an action area. In the following Tour de Mobile Flex sample by James Ward, you can see there are many different areas of the mobile app that can be used. In this screenshot, the bar with the home icon, the title and Exit button are all considered part of the ActionBar. The icon is the navigationContent, followed by the titleContent, and the Exit button is considered the actionContent.

The code for the ActionBar would look something like the following:

<s:navigationContent>
	<s:Button icon="@Embed('assets/launchpad_home.png')" click="navigator.popToFirstView()"/>
</s:navigationContent>
<s:actionContent>
	<s:Button id="btn" label="Exit" click="onExit(event)"/>
</s:actionContent>

You can also specify titleContent with a tag similar to the above for the navigationContent and actionContent, but typically that is set using the title property from the view. Note: If these tags are put in the root application MXML they will be used globally in the application, however they can be overridden at the view level.

Navigation

One thing that may be somewhat confusing to developers new to this Flex mobile development is understanding the concept of the navigator property implicit to the ViewNavigatorApplication. A ViewNavigator object is already a property on the ViewNavigatorApplication and is used to navigate between views via the pushView() and popView() methods. For instance, if you view the ActionScript class for ViewNavigatorApplication.as you will see the property listed in it such as below:

   
/**
     *  The main view navigator for the application.  This component is 
     *  responsible for managing the view navigation model for the application.  
     */ 
    public var navigator:ViewNavigator;

You could then use the following to navigate to a view using the navigator property in your application such as:

   
navigator.pushView(viewsMyView,myData);

The TabbedViewNavigatorApplication includes a tabbedNavigator property as well as a navigators property with a type of Vector that you can use to determine the currently active ViewNavigator. I encourage you to look through the source code for these various classes to help you understand the relationships.

Mobile Menus

There is a new Spark ViewMenu component that is implicitly created at runtime when you hit the Menu button on the device. For devices without a Menu button, you can programmatically open it by setting the viewMenuOpen property to true on the main application. It will close when you click outside of the menu, otherwise you can set the viewMenuOpen property to false to close it as well. I have built a sample for this to include in AIR Launchpad and Tour de Flex that will be available soon. The only code you add for this menu is the array of ViewMenuItems, such as:

<s:viewMenuItems>
     <s:ViewMenuItem label="Add" click="onAdd(event)"/>
     <s:ViewMenuItem label="Cancel" click="onCancel(event)"/>
     <s:ViewMenuItem label="Delete" click="onDelete(event)"/>
     <s:ViewMenuItem label="Edit" click="onEdit(event)"/>
     <s:ViewMenuItem label="Search" click="onSearch(event)"/>
</s:viewMenuItems>

The menu is then shown at the bottom of the application and is also skinnable.

BusyIndicator

There is a new Spark BusyIndicator which is a spinning graphic with spokes and has a customizable symbolColor and rotationInterval property. Below is a screenshot of it in a sample coming soon to AIR Launchpad and Tour de Flex!

View Transitions

There are 4 types of view transitions that are currently available for use in your mobile application:

1) FlipViewTransition – performs a flip of the view as indicated by the FlipViewTransitionMode value (card or cube mode; see API docs for details)….
2) ZoomViewTransition – zooms out existing view or zooms in the new view based on the ZoomViewTransitionMode value (in or out).
3) SlideViewTransition – slides the new view or previous view as indicated by the SlideViewTransitionMode value (push, cover, uncover mode; see API docs for details)….
4) CrossFadeViewTransition – fades out to reveal new view

The default is SlideViewTransition. Note that these are different than the traditional Flex transitions associated with states, and are only used when changing views. You can specify a defaultPushTransition and defaultPopTransition property on the ViewNavigator object, or you can specify a transition to use when you are changing views using them as parameters in the pushView(), popView() methods.

Here is an example of how you might specify a default to use for all transition changes from the root application on a navigator:

...
navigator.defaultPopTransition = new FlipTransition();
navigator.defaultPushTransition = new CrossFadeTransition();
...

Or you might pass it on the navigator.pushView() method itself such as:

navigator.pushView(views.SampleView,myData,fadeTrans);

You can also set typical transition properties such as direction, duration as well as easing functions on the above transitions to create different effects.

Handling Resolution

  • Flex 4.5 includes a lot of features to help you manage resolution and DPI for your application to target or scale for different devices (phone versus tablet etc).
  • You can set an applicationDPI or determine and use the runtimeDPI with new properties available.
  • You can select different styles, bitmap image sources and skins to use now based on DPI. Samples of how to do this are coming soon in Tour de Flex, Tour de Mobile Flex and Adobe AIR Launchpad!

CSS Media Queries
You can now use @media rules in your style sheets to filter CSS rules based on the device’s DPI classification. There are two properties you can filter on currently, os-platform and application-dpi. Here’s an example of filtering on them to set a button font for instance (from Adobe’s prerelease docs):

@media (os-platform: "Android") and (application-dpi: 240) {
s|Button {
     fontSize: 10;
}

Persisting Data

  • Persisting of data can occur in-memory during the life cycle of your application or between application executions using session persistence.
  • Use in-memory persistence to save data when switching views using the data property on a View and passing your data as a parameter to the pushView() method.
    navigator.pushView(views.SampleView,list.selectedItem);
    

    Note: The data property could be a value object or a model class etc.

  • Use session persistence to save data between application execution by setting the persistNavigatorState property to true on the ViewNavigatorApplication root (or TabbedViewNavigatorApplication root). The data is automatically saved to a local shared object with the name FxAppCache.
    <?xml version="1.0" encoding="utf-8"?>
    <s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    	xmlns:s="library://ns.adobe.com/flex/spark"
    	xmlns:mx="library://ns.adobe.com/flex/mx"
    	firstView="views.MyMobileApp1Home"
    	splashScreenImage="@Embed('assets/launchpad_title.png')" splashScreenScaleMode="letterbox"
     	persistNavigatorState="true" initialize="onInitialize()"
    	applicationComplete="onApplicationComplete()">
    ...
    
  • There are custom persistence options that can be used when you have custom classes to be serialized but that is beyond the scope of this article.

General Important Notes

  • The Flash Builder 4.5/Flex 4.5 releases announced today will initially include support for android-based devices (including tablets). However, iOS and Blackberry tablet support will be released in June (rumor has it ;) ).
  • Doing a release build export from Flash Builder of a mobile app will not output a .air file, but instead builds a native installer package (.apk for Android for instance). The beauty of this is that the packagers look and act the same was as a native application it terms of distribution and installation.
  • When you install the exported release package to an Android mobile device, if AIR is not installed, the user will be prompted to download it. Note: applications built with an iOS target have the AIR runtime included in the package and therefore there is no need to prompt the user for download when it runs. For Blackberry Playbook targets, the AIR runtime is already integrated into the Blackberry Tablet OS.
  • When you are reading documentation, soft keyboard refers to the keyboard that pops up on your mobile device when you click into a control that takes input. It’s important to note that you can programmatically set properties to enable or disable it, as well as handle how the application is resized etc when it pops up. Samples around this to come…
  • Scrollbars are hidden in favor of screen space until a mouseDown occurs where a component supports scrolling.
  • Favor FXG Graphics in your mobile applications rather than MXML Graphics and use ActionScript skins versus MXML skins.
  • Use non-TLF controls for text display, such as TextArea or TextInput over Label. You can use them to display text as you would with a Label and just set editable or selectable to false as desired.
  • if you need your application to run on web, desktop and mobile platforms, the recommended approach would be to design a separate user interface targeting the resolution and DPI, but share the same data model between platforms.

Additional Resources
Flex Mobile on Adobe Labs
Introducing Flex 4.5
Mobile Development with Flash Builder 4.5
Flash Builder 4.5 Reference Card on DZone
What’s New in Flash Builder 4.5
Flex-Based iPad Trader App
Adobe TV – What’s New in Flash Builder 4.5

Filed in: Adobe AIRAdobe AIR LaunchpadAIR for AndroidFlash Builder 4.5Flex 4.5Flex AndroidFlex iOSFlex MobileMobile Development Tags:

About the Author ()

Comments (28)

Trackback URL | Comments RSS Feed

  1. Chrisz says:

    Whowwww. Great features!

  2. Jabari says:

    Lots of cool stuff in here. Still no native notifications though. ;-(

  3. Joseph says:

    Can’t wait to get my hands on Flex 4.5

  4. Robin says:

    I am cuurently using FlashBuilder Burrito Version for Mobile App . I want to implement the TabbedViewNavigatorApplication feature mentioned here but It is not available in Burrito version. Can you provide me with download link of Flex Builder 4.5 wherein this feature is implemented?

    • devgirl says:

      Hi Robin, you can use the TabbedMobileApplication in Flash Builder Burrito, it’s the same thing, just renamed to TabbedViewNavigatorApplication in later builds. The official release will be out in a couple of weeks as well, but for now that should work for you. Thanks!! Holly

      • Joseph says:

        Hi Holly, unfortunately the TabbedMobileApplication creates the tab bar at the top of the application. Requires some skinning to create the tab bar at the bottom of the application. Have to wait for the TabbedViewNavigatorApplication to be release for this specific feature to be included.

      • Robin says:

        hi Holly,

        I did use TabbedMobileApplication . But it is appearing at the top of the mobile app. Any idea as to how to display it at the bottom of the page ?(Just as u have shown in the first screenshot above)

        • devgirl says:

          Hi Robin, you can get the latest version from the Flex and Flash Builder pre-release program and that will give you the menu at the bottom of the application. Join the program here! Cheers, Holly

      • arun says:

        hey devgirl
        i jus need ur help……
        rite now im using FLASH BUILDER 4.5
        im working on a project wer i shud open youtube videos in ma own view….i mean i have to access the net in the mxml component views….i hav 8 videos……..i hav kept 8 images if i click on image that link shud open in ma own view not in a browser plzzz do help with his im running short of time to complete this project

  5. danny says:

    Hi, thank you, it’s very interesting..
    Does anyone know a book to start with burrito / FB?

  6. Robin says:

    Hi Holly,

    Is there any lightweight component for Spark datagrid (using Burrito) which i can use on my mobile App?

  7. Baruch says:

    Hi Holly,

    Does this release mean that Flex and ActionScript code can be compiled into native iOS and Android run-time applications without the need of any 3rd-party plugins or any intermediate layer engines (such as AIR or SWF plugins)?

    If so, are there any disadvantages (such as being more resource-hungry) to using AIR/Flex frameworks to build iOS and Android applications as compared to writing native iOS and Android code (with Obj C and Java, respectively)?

    Thank you!
    Baruch

  8. burriedInBurrito says:

    Hi Holly,
    Great tutorial!
    I had a question thou.Is it possible to insert a background image for the action bar?
    Thanks in Advance!

  9. Megha Sanghvi says:

    hi
    i want to create custom list which have 3 to 4 Labels and one or 3 button in one list.how can i implement this using custom item render?

    thank you

  10. chrisz says:

    hi devgirl,

    can i use the file.documentsDirectory path under ios? how the user can copy in this path manuely ?

  11. Amit says:

    Is there any way we can remove the default pushView() transition. as per my requirment i need to show a login page while while changing the tab. What i am doing is pushing the login view on selected tab’s wiew navigator object which shows the default transition. i need to show the login view directly without animating.

    Please help.

  12. Nicolas says:

    Hi there ;o)
    I’m a newbie to all this but have a simple question…do you have any advice in respect to a learning structure and good resourses for a beginner…I know some html and css stuff and the basics of how programs run..but some well structured newbie stuff would be awesome…I think it’s that I want to have a good direction and foundation that I feel my efforts are well placed…
    Cheers
    Nic ;o)

  13. Kim Jensen says:

    This is the biggest problem with Flash Builder for mobile, there is no samples of the simple things. I have been searching the web for a simple view that can be scrolled when the softkeyboard pop up and cover textinputs, just like when you add a new contact to your Android phone. I have no problems making views to show webservice data and connecting to databases, but just storering simple data like custom setup data for your application, is no where to be found or you will see bits here and there but no full examples. I have programmed for over 30 years, but I’m new to Flash/Flex
    Thanks for all your examples, they have helped me alot, but I still spend a lot of time searching.
    Cheers,
    Kim

  14. Attractive component to content. I simply stumbled upon your web site and in accession capital to claim that I acquire in fact enjoyed account your weblog posts. Any way I?ll be subscribing on your augment or even I fulfillment you get admission to persistently rapidly.

  15. Twinkle says:

    Can any1 please help on how to make a container? or customize a container?

Leave a Reply