X5的国际化设置

zhaixin

X5支持国际化设置，即多国语言设置。
方法是建立locals目录，在locals目录下放文件对应的不同语言的资源文件。
根据文件类型（w文件，js文件，xml文件），使用不同的资源文件种类。

zhaixin

W文件的国际化设置是在locals目录下建立不同语言的属性文件，属性文件名的定义是w文件名加下划线加语言标识。
例如：mainActivity.w的英文属性文件名为mainActivity.w_en_US.properties

将w文件中需要进行语言转换的字符串使用i18n{标识}进行定义。
例如：按钮trigger的label属性，可以这样定义<xforms:label>i18n{新建}</xforms:label>
在w文件对应的语言属性文件中定义i18n{标识}中间标识的对应语言显示内容
例如：在w文件的英文属性文件中mainActivity.w_en_US.properties，定义i18n{新建}中新建在英文页面中的显示，如：新建=new

w文件及语言资源属性文件如图所示


案例
w文件中的源码一——按钮的label

1. 
   
2.           <xforms:trigger appearance="image-text" id="insertTrigger" image-text-mode="LR"
   
3.             src="/UI/system/images/standardToolbar/standard/insert.gif">
   
4.             <xforms:label>i18n{新建} </xforms:label>  
   
5.             <xforms:action ev:event="DOMActivate">
   
6.               <xforms:script> <![CDATA[mainActivity.newItemClick(event)]]> </xforms:script>
   
7.             </xforms:action>
   
8.           </xforms:trigger>

复制代码

w文件中的源码二——grid的列名

1. 
   
2.     <xhtml:div component="/UI/system/components/grid.xbl.xml#grid" data="dataMain"
   
3.       id="grdMain" show-header-menu="hide-column,save-layout,group-column,adjust-column">
   
4.       <column id="default1" label="i18n{物品编码}" ref="fWPBM" type="ro" width="100px"/>  
   
5.       <column id="default2" label="i18n{物品名称}" ref="fWPMC" type="ro" width="100px"/>  
   
6.       <column id="default6" label="i18n{规格}" ref="fGG" type="ed" width="100px"/>  
   
7.       <column id="default7" label="i18n{单位}" ref="fDW" type="html" width="100px" onRender="mainActivity.grdMain_fDWRender"/>  
   
8.     </xhtml:div>  

复制代码

英文属性文件中的内容

1. 新建=new
   
2. 物品编码=Code
   
3. 物品名称=Name
   
4. 规格=Spec
   
5. 单位=Unit

复制代码

zhaixin

每个应用下的config目录下的 XXX.function.xml 是功能树配置文件，设置这个文件的语言资源文件即可实现功能树的国际化设置

功能树配置文件及语言资源文件，如下图所示


功能树配置文件的资源文件名定义为XXX.function加语言标识.xml
例如：(1)sys.function.xml的英文资源文件名为(1)sys.function_en_US.xml

功能树配置文件的语言资源文件里面的内容和功能树配置文件里面的内容一样，只是将需要显示的文字替换成某种语言的文字即可

案例
/UI/SA/config/(1)sys.function.xml

1.   <item icon="xt.gif" label="协同平台">
   
2.     <item icon="/UI/system/images/menu/tasks.gif" label="任务管理">
   
3.       <item label="任务中心" url="/SA/task/taskCenter/mainActivity.w" process="/SA/task/taskCenter/taskCenterProcess"
   
4.         icon="/UI/SA/task/taskCenter/images/icon16.png" icon32="/UI/SA/task/taskCenter/images/icon32.png"
   
5.         icon64="/UI/SA/task/taskCenter/images/icon64.png" activity="mainActivity"/>  

复制代码

/UI/SA/config/locals/(1)sys.function_en_US.xml

1.   <item icon="xt.gif" label="Platform">
   
2.     <item icon="/UI/system/images/menu/tasks.gif" label="Task Manage">
   
3.       <item label="Task Center" url="/SA/task/taskCenter/mainActivity.w" process="/SA/task/taskCenter/taskCenterProcess"
   
4.         icon="/UI/SA/task/taskCenter/images/icon16.png" icon32="/UI/SA/task/taskCenter/images/icon32.png"
   
5.         icon64="/UI/SA/task/taskCenter/images/icon64.png" activity="mainActivity"/>  

复制代码

zhaixin

JS文件的国际化设置有两种方法，类似w文件和功能树配置文件的配置方法

方法一：将整个JS文件作为语言资源文件

使用方法同功能树配置文件的国际化设置

JS文件及语言资源文件，如下图所示


方法二：将JS文件中的需要语言转换的字符串抽取成变量，定义在单独的JS文件中，并将此JS文件进行国际化设置，这样就实现了语言属性文件的效果（推荐）

案例
将/UI/ttt/buy/process/goods/mainActivity.js文件中需要语言转换的字符串抽取成变量

1. mainActivity.trigger1Click = function(event){
   
2. //        alert("中文信息");
   
3.         alert(information);
   
4. };

复制代码

新建/UI/ttt/buy/process/goods/lang.js文件，在lang.js中给这个变量赋值，并将lang.js文件进行国际化设置

1. information="English";

复制代码

在w文件中增加对lang.js文件的引用

1.   <xui:resource id="rsMain">
   
2.     <xhtml:script id="htmlScript1" src="mainActivity.js"/>  
   
3.     <xhtml:script id="htmlScript2" src="/UI/ttt/buy/process/goods/lang.js"/>
   
4.   </xui:resource>

复制代码

JS文件及语言资源文件，如下图所示

zhaixin

部件（widget）的国际化设置同功能树的国际化设置

zhaixin

组件的国际化设置同w文件的国际化设置

可以参考分页工具条及语言资源文件
/UI/system/components/pageNavigator.xbl.xml
/UI/system/components/pageNavigator/locals/pageNavigator.xbl.xml_zh_CN.properties

zhaixin

在登录页面中增加语言选择下拉框，系统获得语言标识，即可使用相应语言的资源文件，显示相应的语言页面

修改 /UI/portal2/process/portal/components/login/login.js
在init方法中增加如下代码

1.                                         '<select id="language">' +
   
2.                                                 '<option value="en_US" id="default19">英文</option>' +
   
3.                                                 '<option value="zh_CN" id="default18">中文</option>' +
   
4.                                         '</select>' +

复制代码

完整代码如下图所示

zhaixin

将下面的三个文件进行国际化设置，门户即可显示国际化效果
/UI/portal2/process/portal/index.w
/UI/portal2/process/portal/index.js
/UI/portal2/process/portal/components/all.js

门户右上角显示日期的方法，调用的是/UI/portal2/process/portal/lib/util.js文件中的time方法，修改此方法以适应国际化显示

zhaixin

打开ontology文件，在本体设计器中选中一个关系，点鼠标右键，在弹出的菜单中选择多语言设置，如下图所示


在多语言设置窗口中，添加语言及相应的文字，如下图所示


设置关系的多语言设置后，w文件中的controlLabel(组件标签)组件即可相应的显示定义的对应语言的文字

韩超峰

谢谢分享