Introducing Adobe Flex 4.6 SDK

The Flex 4.6 release builds on the mobile capabilities introduced in Flex 4.5, enabling you to:

• Create tablet apps with multiple views and adaptive layouts.
• Use new tablet focused UI components, including Callout, SpinnerList, and ToggleButton controls.
• Add text inputs with OS-specific interfaces and interactions to your apps.
• Leveraging these new capabilities, you can create tablet-optimized applications that target the latest devices, including the Apple iPad, the vast array of Google Android tablets, and the BlackBerry PlayBook.

This article introduces the new components and capabilities added to Flex 4.6 SDK.

Flex 4.6 includes several new Spark mobile components.

SplitViewNavigator

The SplitViewNavigator is a new root level component that manages multiple ViewNavigator components. The ViewNavigator component, introduced in Flex 4.5, provides a stack-based mechanism to handle transitions, history, and memory management of Views. One of the most common uses of SplitViewNavigator is in the creation of a design pattern known as Master/Detail. Figure 1 shows an example of an application making use of the SplitViewNavigator. Queue Manager, an application built by Jonathan Campos of UnitedMindset and currently available on both iPad and Android tablets, shows how the Master/Detail design pattern can be used in tablet applications.

The left side of the application, or Master, is the View focused on navigation. The right side of the application, or Detail, displays the corresponding content. This powerful component can manage two or more ViewNavigator components at a time, and enables you to target and push views to any one of them.

Callout and CalloutButton

Callout is a component that you will find many use cases for on tablet devices. The component extends SkinnablePopUpContainer and inherits all of its functionality, but provides a relatively positioned arrow (see Figure 2).

This fully skinnable component can contain any kind of content, from a group of components to entire Views.

There is a tremendous amount of logic built into this simple looking component. While you have the option to explicitly choose the direction of the arrow and set the height, width, and position of the callout relative to its parent, all of these options can be automatically determined for you based on the component's contents and its parent's position on screen.

Extending Callout and adding functionality, CalloutButton provides similar capabilities to what you might see as dropdowns on tablet platforms today. Functionality like hiding and showing the Callout is wrapped into this straightforward class. Tapping the CalloutButton will display the Callout and its CalloutContents. Touching anywhere outside the Callout will fade it out and remove it. This behavior and appearance can all be modified by changing the CalloutSkin.

Using Callout and SplitViewNavigator together

One of the major conveniences of SplitViewNavigator is the ability to display the first navigator, most typically the Master view, in a Callout upon device reorientation (see Figure 3).

By simply setting autoHideFirstViewNavigator to true , the Master view is automatically hidden when the device is in portrait mode. If you define states for landscape and portrait and add a button to the Detail view's navigationContent that calls showFirstViewNavigatorInPopUp on click, your master view will be shown in a Callout. Below is a short example:

SpinnerList

The SpinnerList component is an entirely new take on List (see Figure 4), and it is optimized for mobile interactions.

The first thing you will notice is an updated visual appearance and a change in how selection is managed. Unlike the Spark List, SpinnerList manages selection based on position. SpinnerList also offers a unique Boolean property, wrapElements . When set to true (the default), the SpinnerList will wrap the elements in the list around the spinner in an uninterrupted loop. SpinnerList comes with a companion component called SpinnerListContainer. The SpinnerListContainer component not only holds single or multiple SpinnerList components, but its skin also provides the border, gradient appearance, and selection bar.

DateSpinner

The DateSpinner control extends SpinnerList and uses SpinnerListContainer to provide an extremely useful and versatile date component (see Figure 5). DateSpinner offer three modes of displaying information:

• DateSelectorDisplayMode.DATE
• DateSelectorDisplayMode.TIME
• DateSelectorDisplayMode.DATE_AND_TIME

These modes can not only be used to display current date and time information, but also provide an intuitive method of selecting dates and times. DateSpinner is also fully localizable. By simply changing the locale property on the component, the display language be changed, along with the format in which the date is displayed.

ToggleButton

On the surface, the straightforward ToggleButton component enables users to slide a switch from left to right to make a simple choice. Under the hood, the Flex Spark skinning architecture lets you customize this control to display customizable text, display images, or even change its behavior.

Complementing the new user interface components, Flex 4.6 has several SDK enhancements.

StageText

You may have used the <InputText> and <TextArea> components in previous Flex mobile applications. When compiled with Flex 4.6, these components will now leverage StageText. StageText is a joint effort between the AIR and Flex teams to enable text editing in your application to use the device's native text editing controls. This means your user will see the usual editing UI and have the expected experience no matter what OS version or platform your application is running on. StageText provides this native editing experience by punching through to the OS and exposing these controls. As a result, these text fields do not reside on the display list. 

Dynamic splash screens

With the ever-growing number of devices and form factors, the implementation of SplashScreen in Flex 4.5 was simply not going to scale. We went back to the drawing board and created SplashScreenImage. SplashScreenImage was specifically designed to let you specify different splash screens based on the device and orientation. To create this new dynamic splash screen, create a new MXML file based on SplashScreenImage, and then add multiple instances of SplashScreenImageSource that define what asset to display based on DPI or screen resolution. For example:

After your SplashScreenImage has been created, simply assign the class instance to the splashScreenImage property in your main application tag. Upon launching your app on a device, the splash screen will display with the correct image size and DPI; it will even auto-rotate to show the correct image based on the orientation of your device.

Scroller

Several under-the-hood enhancements have been made to Scroller. First and foremost, scroll bars are now created on demand. This means your application does not spend time up-front creating scrollbars for content until the content is scrolled, resulting in a view creation performance boost.

Two new properties have also been added: pageScrollingEnabled and scrollSnappingMode . When pageScrollingEnabled is set to true the scroller will advance by the size of the current viewport. Additional conveniences are built in such that if the scroll velocity is not high enough or you do not scroll the content at least 50% of the way, the content will snap back to its original location. The scrollSnappingMode property lets you further tune your scrolling interaction by allowing you to control the ending scroll position. With options like leadingEdge , trailingEdge , and center , you can make sure your list lands in the appropriate place after a throw.

16-bit and 32-bit render modes

When creating a new mobile project with Flex 4.6, a new Android-specific flag has been created in app.xml named <colorDepth> . By default when Flash Builder creates a new Flex mobile project, it sets this value to "16bit" . You have the option to change this value to "32bit" . There are pros and cons to both options. The 16-bit mode is optimized for performance and other general use cases. The 32-bit mode offers specific features that your app may require, such as StageVideo, Stage3D support, and superior rendering of gradients. Make sure to evaluate the requirements of your entire app before making the switch to 32-bit rendering on Android.

This article provided an overview of some of the new capabilities in Flex 4.6 SDK. For more information please refer to the Flex SDK documentation. To learn more about Adobe's mobile development tooling see Adam Lehman's article What's new in Flash Builder 4.6.