Over a million developers have joined DZone.

Introducing Adobe Flex SDK "Hero"


Flex is ready to take a big leap forward with its next release, code-named “Hero”. The Adobe Flex SDK “Hero” preview release shows off many exciting new components and capabilities along with integrated support in Flash Builder “Burrito” and Flash Catalyst “Panini”. With the Adobe Flex SDK “Hero” release, we are introducing three major initiatives:

  • Allow developers to use Flex for multiscreen application development
  • Further mature the Spark architecture and component which was introduced in Flex 4
  • Make incremental improvements to core Flex infrastructure to ease large application development

It is important to understand that the Adobe Flex SDK “Hero” preview release is not yet feature complete. As such, there are features slated for the “Hero” release that are not yet available in the preview release. This article aims to introduce you to the variety of new features available in the preview release of “Hero” and provide you with additional resources and documentation such that you can start building applications leveraging the “Hero” framework. 

Products Required for this Article

Flash Builder "Burrito" preview release (includes Adobe Flex SDK "Hero" preview)

Multiscreen development with Flex SDK “Hero”

Flex development takes a big leap forward as the “Hero” release introduces multiscreen application development directly to the core Flex framework. Using Adobe Flex SDK “Hero”, you can leverage your existing Flex knowledge and skills to develop mobile applications by utilizing mobile optimized components (which are based on Spark) and utilizing application-level mobile constructs which encapsulate common mobile design patterns. To learn more about the new mobile capabilities added to the Flex framework as well as new mobile workflows added to Flash Builder, please read NJ’s article Mobile development using Flex SDK “Hero” and Flash Builder “Burrito”

New Spark components in Flex SDK “Hero”

The “Hero” release adds popular Spark components that did not make it into the Flex 4 release. Because “Hero” follows a shorter development cycle than the Flex 4 release, we are able to complete a fewer number of Spark components than the wealth of components shipped in Flex 4. However, the new Spark components added in “Hero” aims to alleviate the most common scenarios which cause mixing of MX and Spark components. As such, we have prioritized the more popular MX components that do not yet have Spark equivalents. In the preview release of Adobe Flex SDK “Hero”, the list of new Spark components includes: Spark DataGrid, Form, Image, Date/Time, Number and Currency Formatters.  Below we discuss these new components and their capabilities in more detail.

Spark DataGrid

One of the most exciting new Spark component is the Spark DataGrid (see Figure 1). The Spark DataGrid has two main goals:

  • Ensure easy and straightforward visual customization through a rich Spark skinning contract
  • Improve rendering, scrolling and interactive performance better than the MX DataGrid

The “Hero” preview release lays the groundwork for both goals and more work is slated to further these goals. 

Figure 1. A Spark DataGrid showing column headers, a main table area which supports standard and variable row height, and skinnable visuals that control the selection, hover, caret, row background and column separator graphics.

The Spark DataGrid functionality is divided into two tiers. The Tier 1 functionality is available in the “Hero” preview release, and the Tier 2 functionality is on-going. The Tier 1 functionality lays the groundwork for a new skinning contract which allows the DataGrid’s subparts to be customized declaratively via the DataGrid skin file. Additionally, full support for a dynamically changing data provider along with fixed and variable row sizes are incorporated into the layout and the communication between the DataGrid column headers and table area. Tier 1 also contains full selection support. Like the MX DataGrid, single and multiple row selection is enabled (both contiguously and non-contiguously). Additionally, the Spark DataGrid allows users to select individual cells or multiple cells as part of the default selection behavior. And finally, the Tier 1 functionality allows for basic user navigation through the keyboard or mouse.

The Tier 2 functionality is currently under development. Tier 2 introduces advanced column functionality like column resizing and sorting as well as cell editing, polish to the skinning contract and a significant amount of performance work.

To learn more details about the DataGrid Tier 1 and Tier 2 functionality, please refer to the Spark DataGrid specification.

Spark Form

The Spark Form container adds much of the same functionality as the MX Form while also adding several improvements that cater to more modern form designs. The biggest improvement to Spark Form over the MX Form is the maturity of its layout. Spark Form has uses a grid-based constraint layout for positioning each FormItem element. Additionally, the layout allows for the form columns and rows to be very dynamic. Form columns and rows can grow and shrink at runtime to support modern form designs where information, like help text or validation errors, can be shown on-demand. Spark Form ships two layouts, the default layout being a horizontal laying out of form items (see Figure 2) and the second layout being a stacked layout where form items are arranged vertically (see Figure 3). 

Figure 2. A Spark Form using the default, horizontal layout. Constraint-based columns allow for a much more flexible layout.

Figure 3. A Spark Form using the StackedFormItem skin which lays out form items in a vertical manner.

Spark Forms provide configuration options which can be used to align form item content along a common baseline, to mark form items as required and to list form items sequentially. All of these configurations are customizable via the Form’s skinning contract. Thus the state of the Form when a required form item has been omitted or when a form item is in an invalid state can be customized declaratively by modifying the Form or FormItem’s skin.  You can read about the new Spark Form container in more detail by reading the feature specification on the Hero open source site.

To learn more about the Form container and its API's, please refer to the Spark Form specification here.

Spark Image and BitmapImage enhancements 

Flex 4 introduced the BitmapImage graphic element. This is a lightweight, non-skinnable UI element that can be used to display image content. In “Hero” we improved the BitmapImage graphic element as well as adding a new Spark Image component.

Improvements to BitmapImage

BitmapImage has been improved to allow for the loading and presenting of remote images that are both untrusted and trusted (the normal Flash Player security restrictions apply when loading untrusted asset). Addtionally, BitmapImage introduces new scaling support. The newly introduced ‘scaleMode’ property can be configured to stretch the image and fill the content area or display as if in letterbox mode. Letterbox mode allows the image content to be displayed with the same aspect ratio as the original, unscaled image. BitmapImage also adds a new ‘smoothingQuality’ property which can be used to configure the image smoothing algorithm used when the ‘smooth’ property is enabled. By default, the image is scaled at the quality of the stage. When ‘smoothingQuality’ is set to high, a multi-step scale algorithm is used resulting in a much higher quality display than what one would obtain with the default stage quality. This ‘smoothingQuality’ option is useful for high quality thumbnail presentation. And finally, BitmapImage in “Hero” introduces a content cache which can be configured to support the caching and queuing of remote image assets. This type of cache is convenient to present the image without flickering in scenarios where images are quickly being shown and hidden, like when image thumbnails are being scrolled in a List component. A content cache can be associated with a BitmapImage instance and configured to manage the cache size and to control the invalidation and storage behavior of the cache. The configuration option can also be modified to queue the loading of images in prioritized order. The addition of the content cache and queuing mechanism allows for much better perceived performance of image assets in applications built with “Hero”.

Introducing Spark Image

The new Spark Image skinnable component is built atop the improved BitmapImage element. As such, all the improvements of the BitmapImage element like the scaling, smoothing, caching, and queuing mechanisms are available on the Image component as well. The Spark Image’s skinning contract allows for customisaton of the presentation of the image asset as it is being loaded, when its finished loading, when its invalid or when the asset is not found and the image is in a broken state (see Figure 4). You can read more about the BitmapImage enhancements and the new Spark Image skinnable component by reading the feature specification here

Figure 4. Four Spark Image components. The first customizes the visual presentation, second customizes the loading state, the third visualizes the loaded state and the fourth visualizes the broken state when the image asset is not found.

Spark Formatters

Flash Player 10.1 introduced a set of new globalization APIs that provide locale-specific formatting of dates, times, numbers, and currencies. Building atop these APIs, the “Hero” release adds a set of new formatters to the Spark namespace. These formatters will format data based on the locale defined by the operating system, thus natively providing locale-specific behavior to application content.

The functionality provided by the Flash Player 10.1 APIs is driven by the specification of a locale as defined by the operating system.  The “Hero” release provides 3 formatters that leverage the locale information to format correctly. This includes a CurrencyFormatter, NumberFormatter and DateTimeFormatter (see Figure 5). You can read the Spark Formatters specification on the Hero open source site to learn more about the properties, methods and events used by the newly introduced formatters. 

Figure 5. Date, Number, and Currency formatters applied to a DataGrid column. The locale is set dynamically, this example shows the data as dictated by the French locale.

Additionally, new Sort and SortField classes have been added which add locale-specific sorting behavior. Under the hood, the new Sort classes take advantage of Flash Player 10.1’s locale-specific string comparison, number and currency parsing and uppercase and lowercase string conversion to handle character and number sorting according to language rules as defined by the locale.

Video and text enhancements in Adobe Flex SDK “Hero”

The Flex 4 framework integrated the Open Source Media Framework (OSMF) as the base component for the Spark VideoPlayer component. Additionally, Flex 4 integrated the Text Layout Framework (TLF) as the base text library utilized in all of the Spark text components. As the OSMF and TLF teams enhance their libraries, Flex will continue to integrate and expose the new features contained in each.

OSMF and “Hero”

The OSMF library in “Hero” has been upgraded to support OSMF 1.0. The OSMF 1.0 media player is in use in the “Hero” Spark VideoPlayer component. The integration of OSMF 1.0 provides some critical bugfixes as well as adds support for HTTP streaming. This means that when developers and designers create video assets that support HTTP streaming, the Spark VideoPlayer component will be able to render those types of streams. Taking advantage of this is as simple as setting the VideoPlayer’s ‘source’ property to an URL that supports HTTP streaming.

TLF and “Hero”

The “Hero” preview release shows the beginnings of support for the next version of the TLF library. TLF is the base text engine used by all Spark text components, including TextInput, TextArea, RichText, and RichEditableText. The next release of TLF focuses on improving performance of text in Flex applications as well as adding some new features like bulleted and numbered lists. More work will be integrated and exposed as “Hero” development continues. However, the “Hero” preview release does incorporate key performance fixes. Some performance issues which have already been addressed center around Spark text controls displaying, scrolling, and interacting with massive amounts of text. We are eager for feedback on these areas such that we can continue to improve text performance during the “Hero” release. We request that poor text performance issues be filed in JIRA with reproducible test cases.

Adobe Flex SDK “Hero” compiler improvements

Continuing to improve the Flex compiler is a big part of every release. In the “Hero” timeframe, we focused on three major improvements:

  • Reducing memory consumption for full builds
  • Reducing compilation time for full and incremental builds
  • Improving the compiler’s RSL linking logic

The “Hero” preview release shows improvements in all three areas. With recent optimizations, midsize and large projects will see up to a 20% reduction in overall memory consumption during a full compilation and up to a 20% reduction with full and incremental compilation builds.

RSL Improvements

RSLs (runtime shared libraries) package the Flex framework into libraries that are linked and loaded during application startup. Flex 4 turned Flex framework RSLs on by default, meaning that the Flex compiler linked framework RSLs for use by Flex applications.

The “Hero” release adds some very exciting improvements to the RSL infrastructure in Flex. With the “Hero” compiler, only RSLs that have true dependencies on the application code will be linked into your application. For example, this means that applications not using OSMF will not incur the cost of linking and loading the OSMF RSL. Additionally, pure-Spark or pure-MX projects are ensure to only link in the components and architecture pieces needed for that particular type of project.

Additionally, modules and their RSL linkage logic has gotten smarter. Now, modules will understand when their parent application or a sibling module has already loaded in RSLs that it depends on. In situations like this, the module will avoid re-linking and loading in the required RSL. There are compiler configuration options which the developer can use to force link in certain modules if they do not want the compiler to introspect and figure out the dependencies itself.

There are even more RSL enhancements being planned for later in the “Hero” release, including the ability to cooperatively load in RSLs in an order which reduces download and startup time of shared libraries in memory. 

Where to go from here

We encourage users to play with the preview releases of Adobe Flex SDK “Hero”, Flash Builder “Burrito”, and Flash Catalyst “Panini” and to file bugs in JIRA and provide feedback in the forums. More “Hero” feature specifications and detailed information can be found on the Hero Open Source site. 

Also, you can watch the following ATV videos about Adobe Flex SDK "Hero":


The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}