Flex分享: ResouceManager应用于本地化与国际化开发

 

今年开发了多个涉及国际化应用与本地化应用的体验网。

也总结了ResourceManager的应用方法，总结归纳出来，分享给大家。

 

需求：网站多语解决方案

• 国际化应用：多语版本（英日韩……）en_US ja_JP ko_KR
• 本地化应用：简繁体（大陆，台湾，香港）zh_CN zh_HK zh_TW

多语解决方案应用准备：

1.制作语言包 

多语应用方案，Flex系统自带支持英文（en_US）及日文（ja_JP），如果你需要其他语种的国际化或本地化支持，在Flex Builder的安装目录下，选定你所使用的SDK，在其bin目录下找到copyLocale命令。

以win+R，键入cmd进入DOS命令窗口，在你的copyLocale文件目录径下，键入 copyLocale en_US zh_CN即可生成简体中文支持语言包

示例路径：D:/Program Files/Adobe/Flex Builder 3/sdks/3.0.0/bin>copyLocale en_US zh_CN 

2. 添加BuildPath & Flex Compiler

3.配置文件：

3.1 位置 与src目录同级

3.2  locale资源文件及其路径

3.3 资源文件写法

（由key-value构成）可以包括以下4类：

1.1 字符数据类 swf , jpg , png etc

1.2 Embed() 嵌入式类型

1.3 Embed特例，如xml文件

1.4 嵌入整个类

4.如何使用

4.1 在mxml文件中，添加元数据标签：

<mx:Metadata>

[ResourceBundle('资源文件名')]

</mx:Metadata>

4.2 示意用法：

     ResourceManager.getString / getClass / getInteger / getObject

5.供参考代码

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">

<mx:Style>

Application{

fontSize:12pt;

}

ToolTip{

fontSize:12pt;

}

</mx:Style>

<mx:Metadata>

[ResourceBundle('mylocale')] 

</mx:Metadata>

<mx:Script>

<![CDATA[

private var lang:Array = ['zh_CN','en_US','ja_JP','ko_KR','zh_HK'];

private function init():void{

selectLang('zh_CN');

}

private function selectLang(type:String):void{

resourceManager.localeChain = [type];

imgLang.source = resourceManager.getObject('mylocale','flag');

}

]]>

</mx:Script>

<mx:Panel id="myPanel" title="{resourceManager.getString('mylocale','userlogin')}">

<mx:Form>

<mx:FormItem id="localNameItem" label="{resourceManager.getString('mylocale','loginname')}">

<mx:TextInput id="tiNam" />

</mx:FormItem>

<mx:FormItem>

<mx:Button id="btnLogin" label="{resourceManager.getString('mylocale','login')}" />

</mx:FormItem>

</mx:Form>

<mx:HBox>

<mx:Image id="imgLang" width="64" height="64" />

<mx:Label text="{resourceManager.getString('mylocale','langselection')}" />

<mx:Image source="assets/lang/zh.png" toolTip="{resourceManager.getString('mylocale','langchineseSimplifiled')}" 

 click="selectLang('zh_CN')" />

<mx:Image source="assets/lang/zh.png" toolTip="{resourceManager.getString('mylocale','langchineseTraditional')}" 

 click="selectLang('zh_HK')" />

<mx:Image source="assets/lang/en.png" toolTip="{resourceManager.getString('mylocale','langenglish')}"

 click="selectLang('en_US')" />

<mx:Image source="assets/lang/ja.png" toolTip="{resourceManager.getString('mylocale','langjapanese')}"

 click="selectLang('ja_JP')" />

<mx:Image source="assets/lang/kr.png" toolTip="{resourceManager.getString('mylocale','langkorea')}"

 click="selectLang('ko_KR')" />

</mx:HBox>

</mx:Panel>

</mx:Application>

效果示意：

6.其他情况测试类写法

上文案例以图片点击来转换语言，我还有一种更简洁的方法，方便大家测试多语。 

提供方案：直接写button,label即语言包名，如en_US,zh_CN,ja_JP,ko_KR,etc

Test_Demo:

private function onClick(event:MouseEvent):void{

    currentLocal =  event.currentTarget.label;

    resourceManager.localeChain = [currentLocal];

}

在测试页面加以下的代码：

ResourceManager.getInstance().addEventListener('change',onChange_locale);
因为ResourceManager本身是单例，直接侦听语言的变化，就可实现动态语言转换。

总结：

ResourceManager嵌入方式

RsourceManager实施步骤

• 添加多语标识至Compier,BuildPath中
• 创建locale文件夹，撰写bundle资源文件
• 在mxml中动态获取properties文件中所写的属性

哈哈，分享完毕，希望对大家在开发过程中遇到的问题能有所帮助。下一篇，我会分享FLEX学习路线图：）