New Globalization Features in Flex SDK “Hero”

This article was originally written in English. Text in other languages was provided by machine translation.

 

In June of this year, Flash® Player 10.1, was released that contained a new set of ActionScript classes which aid the creation of applications that support multiple languages and regions. The new classes were put in the flash.globalization package and they provide language and region specific formatting of dates, times, numbers, and currencies as well as alanguage specific sorting and conversion between uppercase and lowercase letters. The classes use the underlying capabilities of the operating system that Flash Player is running on. Therefore Flash based applications can be created that have locale support that is the same as provided by the operating system. Since these classes are built into the player, they can be used with native ActionScript code by applications built with either Flash Professional or with applications that use the Flex SDK. This version of the Flash Player was also incorporated into Adobe AIR version 2.0 and thus both browser based applications and AIR applications can make use of this new functionality.

During the Adobe Max 2010, the Flex SDK Hero preview release was made available to the conference attendees as well as posted on the Adobe Labs website. Hero is the code-name for the next version of the Flex SDK. Hero reflects the next step in making improvements to the Flex ecosystem for creating world ready applications. This release incorporates a new set of classes that make use of the flash.globalization package available in Flash Player 10.1. These new classes make it easier to use the flash.globalization functionality in MXML declarations and provide a way to set a common locale to be used by the entire application or portions of the application.

The new classes in the Flex SDK have been added to two new packages:

  • spark.formatters package contains NumberFormatter, CurrencyFormatter, and DateTimeFormatterclasses
  • spark.globalization package contains SortingCollator, MatchingCollator, and StringTools classes

Those of you familiar with Flex, will know that it already contains a set of formatters and validators in the mx namespace. These mx formatters have not been modified in the Hero version of the Flex SDK and they still behave as earlier versions of the Flex SDK. The main difference between these two sets of formatters is that the new spark formatters make use of the formatting functionality provided by the operating system (via the flash.globalization package) where as the MX formatters use the ResourceManager and resource bundles for the locale specific data used in formatting. The Flex SDK is delivered with data for a limited set of locales for the mx formatters. On the other hand, depending on the operating system, the new spark formatters may have access to hundreds of locales. Additionally the new spark formatters also have access to the end user’s international preferences and settings or custom locales that they may have installed on their operating system.

The language specific string comparison capability provided by the flash.globalization classes and the new spark SortingCollator and MatchingCollator classes are also new in the Hero version of the Flex SDK. This linguistically correct comparison is critical when displaying lists of strings to a user.

Unlike the flash.globalization classes, the new spark classes can be declared in the <fx:Declarations> section of an MXML file and by default they determine the locale from the “locale” style. The locale identifies the language, script, region and optionally other values that impact the behavior of these classes. When the locale style is updated, the spark classes will generate change events that can be used when binding the results to the property of a UIComponent or other binding target.

Here is an example of how the NumberFormatter and DateTimeFormatter might be used:

<fx:Declarations>
	<s:NumberFormatter id="nf" fractionalDigits="0"/>
	<s:DateTimeFormatter id="df" dateStyle="long" timestyle="none"/>
</fx:Declarations>
<mx:Text text="{nf.format(myNumCandles)}"/>
<mx:Text text="{df.format(myBirthday)}"/>

and here is an example of how the SortingCollator might be used:

<fx:Declarations>
	<s:SortingCollator id="sc"/>
</fx:Declarations>
<mx:DataGrid id="dg">
	<mx:columns>
		<mx:DataGridColumn sortCompareFunction="{sc.compare}"/>
	</mx:columns>
</mx:DataGrid>

In both of these cases, the locale is inherited from the application, module, or component that includes the declarations. The locale is set using a style declaration or via ActionScript code as the following examples illustrate:

<fx:Style>
	global
	{
		locale: "fr-FR";
	}
</fx:Style>

or

private function initApp(): void
{
	setStyle("locale","fr-FR");
}

The style can also be specified directly in the declaration as follows:

<fx:Declarations>
	<s:DateTimeFormatter id="df" dateStyle="long" timestyle="none" style="fr-FR"/>
</fx:Declarations>

Here’s a complete example that sets the global locale to French as used in France (fr-FR) and formats a number, a date, and provides a comparison function for sorting for a DataGridColumn:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		global
		{
			locale: "fr-FR";
		}
	</fx:Style>
	<fx:Declarations>
		<s:NumberFormatter id="nf" fractionalDigits="0"/>
		<s:DateTimeFormatter id="df" dateStyle="long" timeStyle="none"/>
		<s:SortingCollator id="sc"/>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			[Bindable]
			private var myNumCandles:int = 10;
			[Bindable]
			private var myBirthday:Date = new Date(2000, 0, 1);
			[Bindable]
			private var friends:ArrayCollection = new ArrayCollection
				([
					"Frédérique", "Valentine", "Grégoire", "Jérôme",
					"André", "Noémie", "Eugène", "Jean", "René",
					"Valérie", "Noëlle"
				]);
		]]>
	</fx:Script>
	<s:VGroup>
		<mx:Text text="{nf.format(myNumCandles)}"/>
		<mx:Text text="{df.format(myBirthday)}"/>
		<mx:DataGrid id="dg" dataProvider="{friends}"
			rowCount="11" width="150">
			<mx:columns>
				<mx:DataGridColumn
					headerText="click here to sort"
					sortCompareFunction="{sc.compare}"/>
			</mx:columns>
		</mx:DataGrid>
	</s:VGroup>

</s:Application>

 

There are more examples and the full documentation in the ASDoc provided with the Flex SDK. We invite you to download the Flex SDK Hero release, try it out and let us know what you think.

4 Responses to New Globalization Features in Flex SDK “Hero”

  1. yannasha says:

    How to get Flash Player SDK?

  2. balan victor says:

    how can i implement NumberFormatter for a entire project that all the numbers that are as a input or output to get 3 decimals if its the case like : a = 3 and the cuberoot(3) = 1,4422495703074083823216383107801 so when i will process the inputs the (a) remains 3(not 3,000) but the cuberoot(3) will be displayed as 1,442! so can i do something like this in the default package :

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>