Flex2 发现之旅：构建多语言本地化Flex应用

By feiy + 2月 23rd, 2006 + Tags:ActionScript, Flash, Flex, Flex2

 

创建过Java多语言本地化应用的朋友应该都很熟悉Java的本地化资源访问的功能，现在好了，Flex2诸多激动人心更新中的一个就是本地化特性（localization feature），这倒是Adobe加强推广Flex2的一个强助力了（这一特性可以本地化Flex组件，这样估计以后会有中文版的Flex2了…），使用Flex2的本地化特性我们可以很容易创建多语言本地化的Flex应用，为我们的Flex应用打入国际市场添威助力，不过不像Java的本地化资源动态获取的方式，目前Flex2的本地化特性只支持静态的本地化资源嵌入，还不支持运行时动态获取本地化资源…

 

创建过Java多语言本地化应用的朋友应该都很熟悉Java的本地化资源访问的功能，现在好了，Flex2诸多激动人心更新中的一个就是本地化特性（localization feature），这倒是Adobe加强推广Flex2的一个强助力了（这一特性可以本地化Flex组件，这样估计以后会有中文版的Flex2了…），使用Flex2的本地化特性我们可以很容易创建多语言本地化的Flex应用，为我们的Flex应用打入国际市场添威助力，不过不像Java的本地化资源动态获取的方式，目前Flex2的本地化特性只支持静态的本地化资源嵌入，还不支持运行时动态获取本地化资源。

要本地化Flex2应用，我们需要将本地化资源文件编译为SWC库文件，然后在Flex应用中使用ActionScript或者MXML访问资源集（resource bundles ）中的本地化值。

Flex2的本地化特性面向以以下人员：

• Web应用开发人员
• Web应用翻译人员
• Flex框架开发人员
• Flex框架翻译人员（中文版？！嘿嘿…）

本地化应用流程：

要本地化Flex代码，我们需要改变我们MXML和ActionScript代码，创建本地化属性文件和类，运行compc工具创建SWC库文件，最后使用mxmlc工具将我们的应用编译成SWF文件。

使用ResourceBundle API

要本地化Flex代码第一步是使用 mx.resource.ResourceBundle API替换期待本地化的硬编码内容。我们可以在ActionScript和MXML代码中使用ResourceBundle API。

ResourceBundle是ActionScript 3.0语言规范的一部分，其包含如下与本地化资源交互的方法：

• static getBundle(name:String):ResourceBundle,这里name指的是属性文件名或ResourceBundle子类名。
• getString(key:String):String, 这里key指的是属性文件或ResourceBundle子类中明值对名称
• getObject(clsName:String):Object

使用本地化字符串

在下面的例子的ActionScript代码中，ResourceBundle API被用来设置某一按钮的label值，ResourceBundle.getBundle()方法获取某一资源集，然后使用 ResourceBundle.getString() 方法资源集中某一键值。

 

...
var myBundle:ResourceBundle = ResourceBundle.getBundle(getSystemManager(),
'MyBundle');
myButton1.label = myBundle.getString('myButton1_label');
...

 

在MXML中，我们指定资源集名称和键名给@Resource指令来获取特点资源集中的特定值。如果，我们只标明键名，默认资源集名称为当前类名称。资源集名称为包含特定键的属性文件或ResourceBundle子类名称。@Resource有以下两种形式：

• @Resource(”key”)
• @Resource(bundle=”bundle”, key=”key”)

以下例子使用@Resource指令设置Button控件的label属性：

 

<mx:Button id="myButton1" label="@Resource(bundle='MyButtonResources',
key='myButton1_label')"
click="ti1.text='myButton1.label='+myButton1.label;"/>

 

在本地化字符串中使用绑定(Using binding with localized strings)

我们可以使用绑定表达式将@Resource指令的键参数绑定到相应属性文件的键值中，以下MXML代码使用绑定表达式作为@Resource指令的键参数：
<mx:Label id=”lab” text=”@Resource(’lab.text’, {product.name})”/>

以下示例是相应属性文件中键值对，{0}将会被product.name替代：

lab.text = We do not have {0} in stock.

我们也可以使用多个参数，例如在@Resource指令有多个参数时的：{0}和{1}。

如果需要的话，我们必须确保product.name是本地化的。

掉换本地化字符串顺序

我们可以基于区域使用某一本地化字符串或其他，例如，默认的英语属性文件可能包含如下键：

MYTEXT = {0} and {1}

而另外一个English属性文件可能包含如下值：

MYTEXT = {1} and {0}

某一MXML文件可能包含如下@Resource指令：

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

以上两个字符串在第二个区域中被掉换了。

以下是与以上@Resource指令等价的ActionScript代码：

 

var r:ResourceBundle;
r = ResourceBundle.getBundle(sm, "MyComponent1");
StringUtil.substitute(r.MYTEXT, "My name is Anant", "I am in the Flex team");

 

使用本地化对象和嵌入资源

在应用中，如果要使用ActionScript类或嵌入资源，如图像，我们可以调用ResourceBundle.getObject()方法，当我们获取一个ResourceBundle子类后，可以使用该ResourceBundle子类的getObject()方法从资源集中获取特定的类：

 

var bundle:ResourceBundle = ResourceBundle.getBundle(sm, "LocaleClasses");
var obj:Object = bundle.getObject("FormattingClass");

 

因为这里并没有到类的直接引用，我们必须使用ActionScript增加任意的可视子对象，例如：

 

var bundle:ResourceBundle = ResourceBundle.getBundle(sm, "LocaleClasses");
var obj:DisplayObject = DisplayObject(bundle.getObject("FormattingClass"));
myLocaleParent.add(obj);

 

以上示例中，LocaleClasses是某一我们创建的用来存放嵌入类的ResourceBundle子类， 该类引用了被ResourceBundle的getContent()方法返回的对象的类（这句有些拗口：This class references the classes that are needed in the ResourceBundle in an
Object returned from its getContent() method. ）。以下LocaleClasses示例：

 

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;
 }
}

 

处理的过程类似嵌入资源，一共有三个步骤，首先我们必须使用基于类版本的嵌入，这就意味着我们必须为每个需要嵌入的资源创建一个类，例如，如果我们有一个JPG图片需要本地化，我们可以将以下RedJpg类添加到本地化目录中：

 

package {
 import mx.core.SkinSprite;
 [Embed(source='red_jpg.jpg')]
 public class RedJpg extends SkinSprite {
 }
}

 

第二步，将RedJpg类添加到某一扩展ResourceBundle的类中，这样是为了让编译器就有个需要处理的资源集了 。通常我们将所有需要的类放置在同一个资源集类中。

以下是一个包含RedJpg类的ResourceBundle子类：

 

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 here
     return contentArr;
   }
 }
}

 

在我们创建包含资源集的SWC文件后，我们的第三步在ActionScript中使用ResourceBundle.getObject()方法获取该对象并且将其添加到我们应用需要的任意地方。以下是使用RedJpg对象的示例：

 

...
<mx:Image id="testJPG"/>
<mx:Script>
 import mx.resource.ResourceBundle;
 import mx.core.SkinSprite;
 public function initialize () {
   // We get the bundle here that is the name of the class in step 2.
   ResourceBundle bundle = ResourceBundle.getBundle(sm,
   "MyClassesBundle");
   // here we 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>

 

使用本地化属性文件和ResourceBundle子类

属性文件和目录结构

我们将存放需要本地化的字符串属性的属性文件放置在某一用户创建的本地目录中。

为了避免MXML @Resource指令的bundle参数，我们可以将属性文件名命名为与类的一样的名称。当然，标明资源集名称是个很好的练习。如果我们没有标明bundle参数，那么属性文件名必须与类名称一致，例如，/myApp/MyAlert.as的属性文件将为：/
fr_FR/myApp/MyAlert.properties，fr_FR为区域（locale ）标识，类似的，我们可以在多个区域目录中包含多个属性文件，区域（locale ）通过compc的locale选项设置，Locale不能在运行时使用Locale类修改。

locale目录必须为compc 的ActionScript类路径的一部分，但是不能为mxmlc编译主SWF文件时的ActiongScript类路径的一部分。

本地化属性文件与Java属性文件的格式一致，都是简单文本格式的名值对，例如：

 

Button1_label = Button1
Link1_label = Link1
CheckBox1_label = CheckBox1
RadioButton1_label = RadioButton1
RadioButton2_label = RadioButton2
RadioButton3_label = RadioButton3
PopUpButton1_label = PopUpButton1

 

属性文件中所有的文本必须为Latin-1 或者（和）Unicode-encoded (\udddd 符号)编码。

我们可以使用Java的native2ascii工具转换其他的格式，对于要处理大量的属性文件的情况，我们可以使用Ant的native2ascii任务批量转换属性文件为ASCII格式。

本地化文件和类搜索顺序

我们将本地化属性文件和ResourceBundle子类添加到相应的locale名称的目录下，更多本地化ActiongScript类信息，请查看“Using localized objects and embedded assets” 。

compc工具使用特定的locale法则搜索文件：精确locale名称、不带变种和国家的locale名称、最后是en_EN。

以下表格说明如果我们在使用compc命令编译本地化SWC文件时设置locale为fr_FR时的属性文件搜索顺序：

本地化文件描述

/en_EN/Grape.as	未使用该文件，因为在fr_FR目录下有一个同名文件，该文件的优先级比更高
/en_EN/AppCommon.properties	该文件被使用，因为没有其他版本或者更高优先级的文件。
/fr/Grape.as	未使用该文件，因为在fr_FR目录下有一个同名文件，该文件的优先级比更高
/fr/Apple.as	未使用该文件，因为在fr_FR目录下有一个同名文件，该文件的优先级比更高
/fr_FR/Grape.as	该文件被使用，因为其优先级最高
/fr_FR/Orange.as	该文件被使用，因为其优先级最高

我们可以与本地化我们自己代码一样的方法本地化Flex框架资源文件集，Flex框架的en_EN区域属性文件在Flex Builder安装目录的Flex Framework 2/
frameworks/locale/en_EN 目录下。包括Adobe用来创建缺省Flex框架SWC文件的属性文件：framework_rb.swc和包含给Flex框架使用的如用于日期、验证和格式化的字符串和符号的名值对的SharedResources.properties属性文件。

创建SWC文件

我们必须使用compc工具将本地化属性文件和ActionScript类打包进SWC文件中，我们可以使用以下compc参数创建SWC文件：

compc选项描述

actionscript-classpath	该选项标明用户创建的本地化目录，我们必须使用{locale}符号，如果我们的文件在 / myfiles/locale_dir/en_EN 和/myfiles/ locale_dir/ja_JP两个位置，那么actionscript-classpath值为：/myfiles/ locale_dir/{locale}.
include-resource-bundles	标明需要包含进SWC文件的资源集文件，可以是属性文件名（名称不应包含前缀或基本文件路径）和ResourceBundle 子类名称。
output	要创建的SWC文件名称，必须指定。
locale	locale选项标明要打包进SWC文件的locale，如果有多个locale，必须以不同的locale选项运行compc工具多次。

以下例子使用compc命令创建fr_FR资源集SWC文件：

compc -locale fr_FR -actionscript-classpath locale/{locale} -include-resource-bundles HelloWorld -output locale/fr_FR/HelloWorld.swc

更多compc工具信息，请查看： “Using the Command Line Compilers。”

创建应用SWF文件

我们使用mxmlc工具创建应用SWF文件。使用mxmlc命令的include-library选项标明我们要使用的本地化SWC文件位置，所有的SWC文件内容将在SWF文件创建的时候静态链接进SWF文件中。我们必须为每个区域创建相应的SWF文件。

注意：不需要在mxmlc中指定locale选项

以下使用mxmlc命令创建一个en_EN资源集的本地化SWF文件：

当我们使用mxmlc的include-libraries选项时，我们必须标明framework_rb.swc的位置，该文件是给framework.swc使用的，更多mxmlc工具信息，请看出 “Using the Command Line Compilers。”

创建一个简单的本地化应用

以下步骤组合了之前我们讨论的创建本地化应用的各章节。

1. 创建文件：locale/en_US/HelloWorld.properties，包含如下内容：

hello=Hello World</p>

2. 创建文件：locale/en_FR/HelloWorld.properties，包含如下内容：

hello=Salut le Monde

3. 创建文件：HelloWorld.mxml，包含如下代码:

 

<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml"
 width="400" height="400">
 <mx:Label text="@Resource(key='hello', bundle='HelloWorld')" />
</mx:Application>

 

4. 使用compc命令编译en_US区域资源：

 

compc -locale en_US -actionscript-classpath locale/{locale} -include-resource-bundles HelloWorld -output locale/en_US/HelloWorld.swc

 

5. 使用compc命令编译fr_FR区域资源：

 

compc -locale fr_FR -actionscript-classpath locale/{locale} -include-resource-bundles HelloWorld -output locale/fr_FR/HelloWorld.swc

 

6. 运行mxmlc命令使用en_US资源集编译SWF:

 

mxmlc -include-libraries locale/en_US/HelloWorld.swc ${Flex FrameWork安装位置}/locale/en_EN/framework_rb.swc -- HelloWorld.mxml

 

使用mxmlc的include-libraries，必须标明framework_rb.swc的位置以给framework.swc使用，运行以上命令后，将HelloWorld.swf重命名为HelloWorld_en_US.swf或其他类似的名称。

7. 运行mxmlc命令使用fr_FR资源集编译：

 

mxmlc -include-libraries locale/fr_FR/HelloWorld.swc ${Flex FrameWork安装位置}/locale/en_EN/framework_rb.swc -- HelloWorld.mxml

 

运行以上命令好，将HelloWorld.swf重新命名为HelloWorld_fr_FR.swf。

8. 运行以上两个swf文件将会看到 “Hello World”和”Salut le Monde”.