back

Mobile development using Adobe Flex 4.5 SDK and Flash Builder 4.5

by Narciso Jaramillo

Ever since we first introduced Flex and Flash Builder, our core goal has been to provide a highly productive way to create rich applications across multiple platforms. Starting with Flash Player in the browser, and then with Adobe AIR on the desktop, Flex and Flash Builder have enabled developers to build applications that run across Windows, Mac OS, and Linux.

With the Adobe Flex 4.5 SDK and Flash Builder 4.5 releases, Adobe is bringing the Flex SDK and Flash Builder to touchscreen smartphones and tablets as well. Leveraging the Adobe AIR 2.6 runtime, you can now develop mobile ActionScript and Flex applications with the same ease and quality as on desktop platforms.

Using Flash Builder 4.5, you can build mobile Flex applications for the Google Android platform. You can also build mobile ActionScript applications for both Android and Apple iOS. In June 2011, shortly after the release of Flex and Flash Builder 4.5, we'll be releasing an update that enables development of Flex applications for iOS, as well as both ActionScript and Flex applications for BlackBerry PlayBook.

Overview of mobile development with Flex

The initial release of mobile development with Flex involves three components:

The runtime: Adobe AIR 2.6 on mobile devices

The initial versions of the mobile development features in the Flex SDK and Flash Builder are targeted at creating standalone installed applications using the Adobe AIR runtime for mobile devices. By focusing on AIR, Flex can take full advantage of the integration AIR provides with each mobile platform, such as the ability to handle hardware back and menu buttons and to access local storage.

AIR for mobile devices allows developers to create applications that can be deployed (and, if desired, sold) the same way as native applications on each platform. For example, an application built with AIR for Android can be posted to the Android Market. For more information on AIR for Mobile, see the Adobe AIR Developer Center.

The framework: Adobe Flex 4.5 SDK

Building on top of the core runtime APIs provided by Flash Player and AIR, the Flex SDK provides a robust and productive framework for building application UI and connecting to server-side data. Flex includes a rich set of built-in UI components, data access components and data binding, declarative UI creation through MXML, dynamic layout, and an extensible component architecture.

The mobile features in Adobe Flex 4.5 SDK build on these core Flex features in two ways. First, the existing components and their skins have been optimized and extended to be usable out-of-the-box on touchscreen devices. Second, new components have been added that encapsulate common application design patterns specific to smartphones. These additions to the framework are described in the section below titled Developing mobile applications with Flex SDK 4.5.

The development environment: Adobe Flash Builder 4.5

Finally, the 4.5 release of the Flash Builder IDE brings a productive design/build/debug workflow to mobile development. From project creation to visual layout to one-click debugging and deployment on devices, the aim of the mobile features in Flash Builder 4.5 is to make it just as easy to develop an ActionScript- or Flex-based mobile application as it is to develop a desktop or web application. For more detail, see Streamlining the mobile workflow with Flash Builder 4.5 below.

Considerations for mobile design and development

Applications for mobile touchscreen devices differ from desktop and web applications in several important ways:

As a result, building an application for a mobile device is not simply a matter of taking a desktop application and "scaling it down" to a different screen size. Our goal is to make it so that developers can easily craft separate user interfaces appropriate for each form factor, while sharing underlying model and data access code between mobile- and desktop-oriented projects to minimize redundant development effort.

Developing mobile applications with Flex 4.5 SDK

In order to address the design and development challenges listed above, the new mobile development features in Flex 4.5 augment the core features of the Flex SDK with skins and components that are optimized for mobile design and implementation patterns.

Mobile-ready core components

In Flex 4.5, we've taken a few steps to ensure that core Flex components work well on touchscreen devices.

For simple components like Button, CheckBox, and TextInput, we've provided a mobile theme that contains skins that are appropriately sized for touch input. Because of the flexibility of the Spark component architecture introduced in Flex 4, we were able to do this without modifying the core component code. Additionally, as described in the performance section below, the mobile skins we provide are built in ActionScript for optimal performance. Figure 1 shows some of the mobile skins provided in Flex 4.5.

Figure 1. Some of the mobile component skins in Flex 4.5.

Figure 1. Some of the mobile component skins in Flex 4.5.

Of course, you can leverage the same Spark architecture, styling and skinning the components in mobile applications in order to customize the look of the components to fit your branding and design.

For more complex components, notably Scroller and List, we've added functionality to the core component to enable touch-and-throw scrolling, with bounce and pull effects at the ends of the scroll. Touch scrolling is enabled by setting the new interactionMode style on Scroller and List to touch. If you're using the mobile theme, this style is automatically set on all appropriate components for you, so you don't need to do anything to enable touch interaction.

Standard mobile application structure

In addition to skinning and extending the core components to work well on mobile devices, Flex 4.5 contains a set of new application components specifically designed to make it easy to build applications that follow standard design patterns for touchscreen smartphones.

Because of the limited screen real estate, applications on these devices are typically structured as a series of views, each of which is focused on displaying a single list of data or details about a single data item. The user navigates between views by tapping on data items or other controls, and goes back by either using on-screen UI or a hardware "Back" button. Additional actions can be provided through on-screen UI or a menu overlay. Figure 2 illustrates this application design pattern.

Figure 2. Standard application structure for touchscreen smartphones.

Figure 2. Standard application structure for touchscreen smartphones.

We've added the following components to Flex in order to support this pattern.

View

The View component represents a single screen of UI. Typically, you'll create custom MXML or ActionScript components based on View, and add whatever components you want to appear within the content. For example, a shopping cart application might have a home view that displays a list of featured items and categories. Tapping on a category navigates to a product list view displaying items in a given category, and tapping on a product navigates to a product detail view showing information about the product.

When the user rotates the screen between portrait and landscape orientations, the View is automatically resized by default to the appropriate aspect ratio. As a result, if you use the standard Flex layout managers, your application can handle orientation changes with little extra work on your part. For finer-grained control, you can use the Flex states mechanism to define portrait and landscape states that specify exactly how the View should look in each state.

ActionBar

ActionBar is a standard header component that appears above the View components in the application. It typically contains a title and one or more buttons that perform actions like refreshing the current view or creating a new item. You can fill the ActionBar with controls that are persistent across the entire application, or customize it for each individual view. For example, on the home screen of an application, you might put a search box in the ActionBar.

ViewMenu

ViewMenu provides a standard control that pops up from the bottom of the screen when the user presses the menu button on a device. In any view, you can add a viewMenuItems property containing a set of menu items, each of which specifies an icon, a label, and a click handler. ViewMenu takes care of showing and hiding itself and laying out the menu items appropriately.

ViewNavigator

ViewNavigator manages the ActionBar and the set of Views in your application using a stack-based history mechanism. When your application starts, the ViewNavigator shows the view specified by its firstView property. After that, you can call pushView() to navigate to a new view in response to user input, such as tapping on a list item, and call popView() to return to the previous view. Flex provides a set of optimized view transitions out of the box to help the user maintain context while navigating around the application.

In addition to the standard ViewNavigator, we also provide a TabbedViewNavigator that allows you to switch between different stacks of views by tapping on tabs at the bottom.

ViewNavigatorApplication

ViewNavigatorApplication wraps all this functionality together into a convenient application class. By basing your application on ViewNavigatorApplication, you automatically get a ViewNavigator for managing your views. For tabbed applications, you can use the analogous application class, TabbedViewNavigatorApplication. ViewNavigatorApplication also provides default behavior for the hardware back button, mapping it to ViewNavigator's popView() method, and handles device orientation change events by passing them to the ViewNavigator and its current view.

Additionally, ViewNavigatorApplication provides a way to persist your application's view state and data when the application quits, so that the next time it starts, it can restore itself with the same current view and view history. This makes interruptions in your application's lifecycle completely transparent to the user—especially important on mobile devices, where the operating system can interrupt or kill an application at any time.

Of course, you're free to create an application completely from scratch using the standard Spark Application class as well, and use the core mobile components and skins without using the View navigation pattern. For example, if you're writing a tablet application, you likely won't be structuring your entire application around small views; tablets have more screen real estate to take advantage of, and tablet applications are less navigation-heavy. In that case, you'll want to start from standard Spark Application rather than ViewNavigatorApplication, but still use the mobile theme in order to get the benefit of the mobile-optimized components and skins.

Performance optimizations

Because the Flex SDK supports both mobile and desktop use cases in the same framework, all the functionality of Flex is available to you when building mobile applications. However, due to performance constraints on mobile devices, there are certain features you will need to be careful of when building mobile Flex applications, and other features we recommend you avoid entirely. Here are a few best practices to keep in mind.

Adapting mobile applications to multiple pixel densities

Mobile devices come in a wide range of form factors, from phones with small screens to large-screen tablets. Simple variations in screen size and aspect ratio can be handled easily using the standard dynamic layout components, such as Group, VGroup, and HGroup, that are provided in Flex. However, devices also vary in pixel density—that is, the number of pixels in a given inch of the screen. For example, most tablets and some phones have a pixel density of 160 dots per inch (DPI), while other phones have pixel densities of 240 or 320 DPI. Variations in pixel density affect the visual size of individual elements in your user interface: all other things being equal, controls with a given pixel size will appear physically smaller on devices with higher pixel density. This is especially problematic for touchscreen interfaces, where controls need to be physically large enough to be targeted with a finger.

Flex 4.5 provides several new features to help developers make their applications work well across multiple densities, including automatic scaling, DPI-aware mobile skins, multi-DPI bitmaps, and per-DPI CSS rules.

Running on AIR

Finally, it's important to realize that in addition to all the mobile Flex components listed above, you can also directly take advantage of all the APIs that are available in AIR on mobile devices—geolocation, accelerometer, camera integration, and so forth. While some of these features are not exposed as Flex components, they are easy to access directly using ActionScript. For more information on developing using the APIs provided by AIR on mobile devices, read the Adobe AIR mobile documentation.

Streamlining the mobile workflow with Flash Builder 4.5

Building on the mobile development features in Adobe Flex SDK 4.5, Flash Builder 4.5 extends the existing ActionScript and Flex development workflows to mobile development, from project creation through packaging the final application.

Managing mobile projects

Flash Builder 4.5 provides two new project types: ActionScript Mobile Project and Flex Mobile Project. Creating an ActionScript Mobile Project gives you a completely clean slate on which to write your application in pure ActionScript code. Conversely, creating a Flex Mobile Project gives you access to the Flex framework, including the mobile features described above, as well as the Flex-related features of Flash Builder, such as Design mode and the data connectivity features introduced in Flash Builder 4.

As mentioned above, the Flash Builder 4.5 release supports building mobile Flex projects for Android, as well as building mobile ActionScript projects for both Android and iOS. Updates to enable Flex development for iOS as well as both ActionScript and Flex development for BlackBerry PlayBook will be available shortly after the 4.5 release.

If you're creating applications for multiple screens, such as a desktop/web application and a mobile application, your typical project structure will consist of an ordinary Flex or ActionScript project containing your desktop/web UI, a mobile Flex or ActionScript project containing your mobile UI, and a library project containing model and data access code that is shared between the two applications.

Designing views

For mobile Flex projects, we've extended Design mode in two ways. First, we've added controls to the Design toolbar (see Figure 3) that allow you to preview how the content of a view will look at different device screen sizes and in different orientations. You can add more device configurations yourself in Preferences > Flash Builder > Device Configurations.

Figure 3. Design mode controls for mobile device configurations.

Figure 3. Design mode controls for mobile device configurations.

Second, we've made it so that Design mode works well with the standard view navigation structure described above. When you edit a View in a project based on ViewNavigatorApplication, you see the View's content in the context of the overall application structure—so, for example, you see the ActionBar above the View, and the ActionBar is filled with the content appropriate to that View. You can drag and drop controls into the ActionBar just like any other container in order to customize it for a particular View. Figure 4 shows dropping a button into the actionContent area on the right end of the ActionBar.

Figure 4. Dropping a button into the ActionBar using Design mode.

Figure 4. Dropping a button into the ActionBar using Design mode.

Running and debugging on the desktop and on device

When it comes time to test or debug your application, you have two options. For quick testing and debugging, you can launch and debug the application on the desktop using the AIR Debug Launcher (ADL). For greater fidelity, you can also launch and debug the application directly on a physical device. In either case, you can use the full array of Flash Builder's debugging capabilities, including setting breakpoints and examining the application's state using the Variables and Expressions panels.

When running or debugging on a device, there are a few key points you need to be aware of:

Packaging applications for deployment

Finally, when your application is finished and ready to go out to the world, you can use the Export Release Build process just as you would to prepare desktop and web applications for deployment. The main difference is that when you export a release build of a mobile project, Flash Builder packages the build as a native installer, not as an .air file. For example, on Android, Flash Builder produces an .apk file that looks the same as a native Android application package. This enables AIR-based applications to be distributed and sold the same way as native applications on each platform, as mentioned above.

While the mobile development features in Flex are initially targeted at Adobe AIR, we will be looking to bring Flex-based development to Flash Player in the browser on mobile devices in subsequent releases.

Where to go from here

We're excited to be able to bring the Flex SDK and Flash Builder to mobile development. In the meantime, though, we hope you'll jump into building great mobile applications with Flash Builder 4.5 and Flex 4.5 SDK. You can get started quickly by installing the Flash Builder 4.5 trial and trying out the following tutorials:

And, of course, we'd love to hear your questions and feedback on what we've done so far:

 

‹ Back


Narciso (nj) Jaramillo is a Principal Scientist working on design and development tools for the Flash Platform. At Adobe, he’s worked in various capacities as a UI designer, developer, and virtual product manager for Flash Builder, Flash Catalyst, and mobile Flex. In his spare time, nj enjoys playing jazz piano and video games (but not at the same time). You can read more at his fitfully-updated blog, much ado about something, or follow him as @rictus on Twitter.