今年开发了多个涉及国际化应用与本地化应用的体验网。
也总结了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本身是单例,直接侦听语言的变化,就可实现动态语言转换。
总结:
ResourceManager嵌入方式
RsourceManager实施步骤
- 添加多语标识至Compier,BuildPath中
- 创建locale文件夹,撰写bundle资源文件
- 在mxml中动态获取properties文件中所写的属性
哈哈,分享完毕,希望对大家在开发过程中遇到的问题能有所帮助。下一篇,我会分享FLEX学习路线图:)