FLEX2 Discovery Tour: Build a multi-language localized Flex application

Friends who have created Java multi-language localization applications should all be familiar with the Java Localization Resource access feature, now well, Flex2 one of the many exciting updates is the localization feature (localization feature), This is a strong boost for Adobe to promote FLEX2 (this feature can localize the flex component, so it is estimated that there will be a Chinese version of Flex2 ...). , using the Flex2 localization feature, we can easily create a multi-language localized flex application that will add power to the international marketplace for our flex applications, but unlike the way Java localized resources are dynamically acquired, the current FLEX2 localization feature supports only static localized resource embedding, Runtime dynamic acquisition of localized resources is also not supported.
To localize the FLEX2 application, we need to compile the localized resource files into SWC library files and then use ActionScript or Mxml to access the localized values in the Flex application in the resource set (resource bundles).
The localization characteristics of Flex2 are oriented towards the following people:

Web application developers
Web application Translators
Flex Framework Development Staff
Flex Framework Translator (Chinese version?!) Hey... ）
Localization application process:

To localize the flex code, we need to change our mxml and ActionScript code, create localized properties files and classes, run the COMPC tool to create SWC library files, and finally compile our application into SWF files using the MXMLC tool.

Using the ResourceBundle API

To localize the flex code The first step is to replace the hard-coded content with the expected localization using the Mx.resource.ResourceBundle API. We can use the ResourceBundle API in ActionScript and Mxml code.

ResourceBundle is part of the ActionScript 3.0 language specification, which includes the following methods for interacting with localized resources:

Static Getbundle (name:string): ResourceBundle, where name refers to the property file name or ResourceBundle subclass name.
GetString (key:string): String, where key refers to the name of the value pair in the property file or ResourceBundle subclass
GetObject (clsname:string): Object
Using localized strings

In the ActionScript code for the following example, the ResourceBundle API is used to set the label value of a button, the Resourcebundle.getbundle () method gets a set of resources, and then uses the A key value in the Resourcebundle.getstring () method resource set.

...
var mybundle:resourcebundle = Resourcebundle.getbundle (Getsystemmanager (),
' Mybundle ');
Mybutton1.label = mybundle.getstring (' Mybutton1_label ');
...

In Mxml, we specify the resource set name and the key name to the @resource instruction to get the specific value of the feature resource set. If we only indicate the key name, the default resource set name is the current class name. The resource set name is a property file or ResourceBundle subclass name that contains a specific key. @Resource have the following two forms the following example uses the @resource directive to set the Label property of the button control:

<mx:button id= "MyButton1" label= "@Resource (bundle= ' mybuttonresources '),
key= ' Mybutton1_label ') "
click= "ti1.text= ' mybutton1.label= ' +mybutton1.label;" />

Using bindings in localized strings (using binding with localized strings)

We can use a binding expression to bind the key parameter of the @resource directive to the key value of the corresponding property file, and the following Mxml code uses the binding expression as the key parameter of the @resource directive: <mx:label id= "Lab" text= @Resource ( ' Lab.text ', {product.name}) '/>

The following example is a key value pair in the corresponding property file, and {0} will be replaced by Product.name:

Lab.text = We don't have {0} in the stock.

We can also use multiple parameters, such as {0} and {1} when the @resource instruction has more than one parameter.

If necessary, we must make sure that the product.name is localized.

Swap localized string order

We can use a localized string or other based on the locale, for example, the default English property file may contain the following key:

MYTEXT = {0} and {1}

Another 中文版 attribute file may contain the following values:

MYTEXT = {1} and {0}

A mxml file may contain the following @resource directives:

@Resource (' MYTEXT ', "My name is Bill.", "I am a developer.");

The above two strings were swap in the second area.

The following is the ActionScript code equivalent to the above @resource directive:

var R:resourcebundle;
r = Resourcebundle.getbundle (SM, "MyComponent1");
Stringutil.substitute (R.mytext, "My name are Anant", "I am in the" Flex team);

Using localized objects and embedded resources

In applications, if you want to use ActionScript classes or embedded resources, such as images, we can call the Resourcebundle.getobject () method, and when we get a resourcebundle subclass, You can use the GetObject () method of the ResourceBundle subclass to get a specific class from a resource set:

var bundle:resourcebundle = resourcebundle.getbundle (SM, "localeclasses");
var obj:object = bundle.getobject ("Formattingclass");

Because there is no direct reference to the class, we must use ActionScript to add any visual child objects, such as:

var bundle:resourcebundle = resourcebundle.getbundle (SM, "localeclasses");
var obj:displayobject = Displayobject (Bundle.getobject ("Formattingclass"));
Mylocaleparent.add (obj);

In the example above, Localeclasses is a resourcebundle subclass that we created to hold the embedded class that references the class of the object returned by the ResourceBundle getcontent () method, which is a bit clumsy: this Class references the classes that are needed in the ResourceBundle in a Object returned from it getcontent () method. ）。 The following localeclasses examples:

public class Localeclasses extends ResourceBundle {
Public Function localeclasses () {
Super ();
}
Override protected static function GetContent (): Object {
var contentobj:object = new Object ();
Contentobj.push ("Formattingclass", Formattingclass);
Contentobj.push ("Class2", Class2);
More classes can by added here.
return contentobj;
}
}

Processes are similar to embedded resources, there are three steps, first we have to use a class version of embedding, which means we have to create a class for each resource that needs to be embedded, for example, if we have a JPG image that needs localization, we can add the following Redjpg class to the localized directory:

Package {
Import Mx.core.SkinSprite;
[Embed (source= ' red_jpg.jpg ')]
public class Redjpg extends Skinsprite {
}
}

The second step is to add the Redjpg class to an extended ResourceBundle class, so that the compiler has a set of resources to work with. Usually we put all the classes we need in the same resource set class.

The following is a resourcebundle subclass that contains the Redjpg class:

Package {
Import Mx.resource.ResourceBundle;
public class Myclassesbundle extends ResourceBundle {
Public Function Myclassesbundle ()
{
Super ();
}
Override protected static function GetContent (): Object {
var contentobj:object = new Object ();
Content.push ("Redjpg", redjpg);
Add more class references
return Contentarr;
}
}
}

After we create the SWC file that contains the resource set, our third step is to use the Resourcebundle.getobject () method in ActionScript to get the object and add it to any place we need to apply it. The following is an example of using the Redjpg object:

...
<mx:image id= "Testjpg"/>
<mx:Script>
Import Mx.resource.ResourceBundle;
Import Mx.core.SkinSprite;
Public Function Initialize () {
We have the bundle here's the name of the class in step 2.
ResourceBundle bundle = Resourcebundle.getbundle (SM,
"Myclassesbundle");
Here we are specify the name of the class from step 1
Skinsprite Sprite = Skinsprite (Resourcebundle.getobject ("redjpg"));
And now we set up the Image
Testjpg.source = Sprite;
}
<mx:Script>

Using localized property files and ResourceBundle subclasses

Properties File and directory structure

We place the property file that holds the string attribute that needs to be localized in a local directory created by a user.

To avoid the bundle parameter of the Mxml @Resource instruction, we can name the property file name the same as the class. Of course, it's a good practice to label the resource set name. If we do not indicate the bundle parameter, then the property file name must be the same as the class name, for example, the/myapp/myalert.as property file will be:/Fr_fr/myapp/myalert.properties,fr_fr for the region (locale ) identity, similarly, we can include multiple property files in multiple zone catalogs, and regions (locale) are set by COMPC locale options, locale cannot use locale class modifications at run time.
The locale directory must be part of the COMPC path of the ActionScript class, but cannot be part of the Actiongscript Classpath for MXMLC compilation of the master SWF file.
The localized property file is in the same format as the Java property file, and is a name-value pair in simple text format, for example:

Button1_label = Button1
Link1_label = Link1
Checkbox1_label = CheckBox1
Radiobutton1_label = RadioButton1
Radiobutton2_label = RadioButton2
Radiobutton3_label = RadioButton3
Popupbutton1_label = PopUpButton1

All text in the property file must be Latin-1 or (and) unicode-encoded (\UDDDD symbol) encoded.
We can use the Java Native2ascii tool to convert other formats, and we can use the Ant native2ascii Task Batch Conversion property file for ASCII format to handle a large number of property files.
Localized file and class search order
We add localized property files and ResourceBundle subclasses to the corresponding locale names directory and more localized Actiongscript class information, see "Using localized objects and embedded assets ” 。
The COMPC tool searches for files using specific locale rules: exact locale names, no variants, locale names of countries, and finally en_en.
The following table shows the search order for the property files when locale is fr_fr when we compile the localized SWC file using the COMPC command:
Localized file description

/en_en/grape.as does not use this file because it has a file with the same name under the Fr_fr directory, and the file has a higher priority
/en_en/appcommon.properties This file is used because there are no other versions or higher priority files.
/fr/grape.as does not use this file because it has a file with the same name under the Fr_fr directory, and the file has a higher priority
/fr/apple.as does not use this file because it has a file with the same name under the Fr_fr directory, and the file has a higher priority
/fr_fr/grape.as This file is used because it has the highest priority
/fr_fr/orange.as This file is used because it has the highest priority

We can localize the Flex framework resource file set in the same way we localize our own code, and the Flex Framework's En_en zone properties file is under the Flex Framework 2/frameworks/locale/en_en directory of the Flex Builder installation directory. Includes the properties files that Adobe uses to create the default Flex framework SWC files: FRAMEWORK_RB.SWC and included for the Flex framework, such as dates, The Sharedresources.properties property file that validates and formats the string and the name-value pairs of the symbols.

Creating SWC Files
We must use the COMPC tool to package localized property files and ActionScript classes into SWC files, and we can create SWC files using the following COMPC parameters:
COMPC option Description
Actionscript-classpath This option indicates the localized directory created by the user, we must use the {locale} notation if our files are in/Myfiles/locale_dir/en_en and/myfiles/locale_dir/ JA_JP two locations, then the Actionscript-classpath value is:/myfiles/locale_dir/{locale}.
Include-resource-bundles identifies the resource set file that needs to be included in the SWC file, which can be the property filename (the name should not contain a prefix or base file path) and the ResourceBundle subclass name.
Output the name of the SWC file you want to create must be specified.
The locale locale option indicates the locale to be packaged into the SWC file, and if there are multiple locale, you must run the locale tool multiple times with a different COMPC option.
The following example uses the COMPC command to create a FR_FR resource set SWC file:
Compc-locale Fr_fr-actionscript-classpath Locale/{locale}-include-resource-bundles helloworld-output locale/fr_FR/ Helloworld.swc
For more COMPC tool information, see: "Using the Command line compilers." ”

To create an application SWF file
We use the MXMLC tool to create an application SWF file. The include-library option using the MXMLC command indicates the localization SWC file location We want to use, and all SWC file contents are statically linked to the SWF file when the SWF file is created. We must create the appropriate SWF file for each zone.

Note: You do not need to specify the locale option in MXMLC
The following uses the MXMLC command to create a localized SWF file for a en_en resource set:
Mxmlc-include-libraries LOCALE/EN_US/HELLOWORLD.SWC LOCALE/EN_EN/FRAMEWORK_RB.SWC--HelloWorld.mxml
When we use the MXMLC include-libraries option, we must indicate the location of the FRAMEWORK_RB.SWC, which is used for FRAMEWORK.SWC and more MXMLC tool information, see "Using the Command line compilers. ”

Create a simple localized application

The following steps combine the chapters that we discussed earlier to create a localized application.
1. Create file: Locale/en_us/helloworld.properties, including the following:

Hello=hello world</p>

2. Create file: Locale/en_fr/helloworld.properties, including the following:
Hello=salut le Monde
3. Create the file: Helloworld.mxml, containing the following code:

<mx:application xmlns:mx= "Http://www.macromedia.com/2005/mxml"
Width= "height=" >
<mx:label text= "@Resource (key= ' Hello ', bundle= ' HelloWorld ')"/>
</mx:Application>

4. Compile en_US zone resources using the COMPC command:

Compc-locale En_us-actionscript-classpath Locale/{locale}-include-resource-bundles helloworld-output locale/en_US/ Helloworld.swc

5. Compile FR_FR zone resources using the COMPC command:

Compc-locale Fr_fr-actionscript-classpath Locale/{locale}-include-resource-bundles helloworld-output locale/fr_FR/ Helloworld.swc

6. Run the MXMLC command to compile the SWF using the en_US resource set:

Mxmlc-include-libraries LOCALE/EN_US/HELLOWORLD.SWC ${flex Framework Installation Location}/LOCALE/EN_EN/FRAMEWORK_RB.SWC-- Helloworld.mxml

Using MXMLC include-libraries, you must indicate the location of the FRAMEWORK_RB.SWC for FRAMEWORK.SWC use, and after running the above command, rename helloworld.swf to Helloworld_en_ us.swf or other similar name.

7. Run the MXMLC command to compile using the FR_FR resource set:
Mxmlc-include-libraries LOCALE/FR_FR/HELLOWORLD.SWC ${flex Framework Installation Location}/LOCALE/EN_EN/FRAMEWORK_RB.SWC-- Helloworld.mxml

Run the above command to rename the helloworld.swf to helloworld_fr_fr.swf.

8. Running the above two SWF files will see "Hello World" and "Salut le Monde".