以下是关于 SAP Fiori 开发中国际化（i18n）Properties 文件管理及语言切换的学习笔记，内容涵盖 Properties 文件的使用、语言切换示例、常用语言列表、关键规则与注意事项，帮助你快速掌握 Fiori 前端的国际化开发。

SAP Fiori 开发国际化（i18n）学习笔记

1️⃣ Fiori 国际化简介

Fiori 前端通过 i18n Properties 文件 实现文本的多语言支持。
i18n 文件是标准的键值对文件，定义界面显示的文本资源。
多语言版本通过不同的 Properties 文件进行区分，系统根据当前语言自动加载对应资源。

2️⃣ i18n Properties 文件结构与使用

默认文件：i18n.properties（英文或默认语言）
多语言文件：i18n_<语言代码>.properties，例如 i18n_zh_CN.properties 中文简体
文件内容格式：

welcomeText=欢迎使用Fiori应用
buttonSave=保存
buttonCancel=取消
errorMessage=发生错误，请稍后重试

在控制器或视图中，通过绑定 i18n 模型访问：

// 获取国际化文本示例
var oBundle = this.getView().getModel("i18n").getResourceBundle();
var sWelcome = oBundle.getText("welcomeText");

3️⃣ 语言切换示例代码

Fiori 语言切换通常通过更改启动参数或者修改用户设置实现，前端也可动态切换。

示例（动态切换 i18n 语言资源）：

var sNewLocale = "zh_CN"; // 目标语言代码

var oComponent = this.getOwnerComponent();
var oI18nModel = oComponent.getModel("i18n");

// 动态加载新的语言文件
var sBundlePath = "i18n/i18n_" + sNewLocale + ".properties";

var oResourceModel = new sap.ui.model.resource.ResourceModel({
  bundleUrl: sBundlePath,
  bundleLocale: sNewLocale
});

oComponent.setModel(oResourceModel, "i18n");

// 刷新界面或相关绑定，使语言生效
this.getView().getModel("i18n").refresh();

实际项目中，也可以结合启动参数sap-language或用户配置做语言切换。

4️⃣ 常用语言代码列表

语言名称	语言代码（Locale）	说明
英语（默认）	`en`	English
简体中文	`zh_CN`	Chinese Simplified
繁体中文	`zh_TW`	Chinese Traditional
德语	`de`	German
法语	`fr`	French
西班牙语	`es`	Spanish
日语	`ja`	Japanese
韩语	`ko`	Korean
葡萄牙语	`pt`	Portuguese
俄语	`ru`	Russian

语言代码遵循 ISO 标准，格式通常为语言代码_国家代码。

5️⃣ 国际化关键规则

键名唯一：所有 i18n 文件中的键名必须保持一致，方便切换语言时映射对应文本。
占位符支持：支持 {0}, {1} 等占位符，动态替换变量文本。
大小写敏感：键名大小写必须严格匹配。
编码格式：Properties 文件建议保存为 UTF-8 编码，避免乱码。
层级管理：大型项目建议分模块管理国际化资源，提升维护效率。

6️⃣ 国际化注意事项

前端缓存：语言切换后需确保模型刷新，避免缓存导致语言未更新。
日期、数字格式：注意不同语言环境下的本地化格式处理（可结合sap.ui.core.format.DateFormat等API）。
文本长度差异：设计界面时预留足够空间，防止不同语言文本溢出。
特殊字符转义：Properties 文件中冒号、等号等符号需要转义。
语言包加载性能：避免动态频繁切换导致加载延迟，可预加载常用语言资源。

明白！这里给你一个SAP Fiori 国际化 i18n 属性文件及语言切换完整示例代码，包含：

i18n Properties 文件结构
语言切换函数封装
视图中文本绑定示范

1. i18n 属性文件示例

i18n.properties （默认英文）

welcomeText=Welcome to Fiori App
buttonSave=Save
buttonCancel=Cancel

i18n_zh_CN.properties （简体中文）

welcomeText=欢迎使用Fiori应用
buttonSave=保存
buttonCancel=取消

2. 组件中 i18n 资源模型默认定义

// Component.js 中通常已有如下定义
this.setModel(
  new sap.ui.model.resource.ResourceModel({
    bundleName: "your.app.namespace.i18n.i18n"
  }),
  "i18n"
);

3. 语言切换函数示例（Component Controller）

onLanguageChange: function(sNewLocale) {
  var oComponent = this.getOwnerComponent();
  var sBundlePath = "your/app/namespace/i18n/i18n_" + sNewLocale + ".properties";

  var oResourceModel = new sap.ui.model.resource.ResourceModel({
    bundleUrl: jQuery.sap.getModulePath("your.app.namespace.i18n") + "/i18n_" + sNewLocale + ".properties",
    bundleLocale: sNewLocale
  });

  oComponent.setModel(oResourceModel, "i18n");

  // 可选刷新视图绑定
  this.getView().getModel("i18n").refresh(true);
}

调用示例：

this.onLanguageChange("zh_CN"); // 切换到简体中文

4. 视图中绑定 i18n 文本示例

XML View 绑定：

<Button text="{i18n>buttonSave}" />
<Text text="{i18n>welcomeText}" />

JS View 绑定：

var oBundle = this.getView().getModel("i18n").getResourceBundle();
var sText = oBundle.getText("welcomeText");
this.byId("myText").setText(sText);

5. 额外建议

语言代码命名请遵守标准格式，如zh_CN、en_US。
确保所有 i18n 文件中的 Key 一致，避免找不到文本。
使用 UI5 的 jQuery.sap.getModulePath 动态获取路径，避免硬编码。
语言切换后可能需刷新页面或视图，确保 UI 更新。

SAP Fiori 国际化多语言切换 Demo 完整示范

1. i18n 目录结构和示例文件

假设你的项目命名空间是 your.app.namespace，i18n 文件放在 webapp/i18n/ 目录：

webapp/
 ├── i18n/
 │    ├── i18n.properties          （默认英文）
 │    ├── i18n_zh_CN.properties    （简体中文）
 │    └── i18n_de.properties       （德语示例）
 ├── view/
 │    └── App.view.xml
 ├── controller/
 │    └── App.controller.js
 └── Component.js

2. i18n.properties（默认英文）

welcomeText=Welcome to Fiori App
buttonSave=Save
buttonCancel=Cancel
languageSelect=Select Language

3. i18n_zh_CN.properties（简体中文）

welcomeText=欢迎使用Fiori应用
buttonSave=保存
buttonCancel=取消
languageSelect=选择语言

4. Component.js

sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/model/resource/ResourceModel"
], function(UIComponent, ResourceModel) {
  "use strict";

  return UIComponent.extend("your.app.namespace.Component", {
    metadata: {
      manifest: "json"
    },

    init: function() {
      UIComponent.prototype.init.apply(this, arguments);

      // 默认语言资源模型
      var i18nModel = new ResourceModel({
        bundleName: "your.app.namespace.i18n.i18n"
      });
      this.setModel(i18nModel, "i18n");
    }
  });
});

5. App.view.xml

<mvc:View
  controllerName="your.app.namespace.controller.App"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m">

  <VBox class="sapUiSmallMargin">
    <Text text="{i18n>welcomeText}" id="welcomeText" />
    <Button text="{i18n>buttonSave}" />
    <Button text="{i18n>buttonCancel}" />

    <Select
      id="languageSelect"
      change="onLanguageChange"
      items="{
        path: '/languages'
      }">
      <core:Item key="{key}" text="{text}" xmlns:core="sap.ui.core" />
    </Select>
  </VBox>

</mvc:View>

6. App.controller.js

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/resource/ResourceModel",
  "sap/ui/model/json/JSONModel",
  "jquery.sap.global"
], function(Controller, ResourceModel, JSONModel, jQuery) {
  "use strict";

  return Controller.extend("your.app.namespace.controller.App", {
    onInit: function() {
      // 语言选项数据模型
      var oLangModel = new JSONModel({
        languages: [
          { key: "en", text: "English" },
          { key: "zh_CN", text: "简体中文" },
          { key: "de", text: "Deutsch" }
        ]
      });
      this.getView().setModel(oLangModel);
    },

    onLanguageChange: function(oEvent) {
      var sSelectedKey = oEvent.getParameter("selectedItem").getKey();
      var oComponent = this.getOwnerComponent();

      // 生成对应语言的 i18n 文件路径
      var sBundleUrl = jQuery.sap.getModulePath("your.app.namespace.i18n") +
        (sSelectedKey === "en" ? "/i18n.properties" : "/i18n_" + sSelectedKey + ".properties");

      // 创建新的 ResourceModel
      var oNewResourceModel = new ResourceModel({
        bundleUrl: sBundleUrl,
        bundleLocale: sSelectedKey
      });

      // 设置新的 i18n 模型
      oComponent.setModel(oNewResourceModel, "i18n");

      // 刷新视图绑定，确保语言切换生效
      this.getView().getModel("i18n").refresh(true);
    }
  });
});

7. 运行效果

页面初始加载默认英文文本。
通过下拉框选择语言，界面文本动态切换为对应语言（简体中文、德语示例）。
支持动态切换，不用刷新页面。

SAP Fiori 开发国际化（i18n）学习笔记

目录

1️⃣ Fiori 国际化简介

2️⃣ i18n Properties 文件结构与使用

3️⃣ 语言切换示例代码

4️⃣ 常用语言代码列表

5️⃣ 国际化关键规则

6️⃣ 国际化注意事项

1. i18n 属性文件示例

2. 组件中 i18n 资源模型默认定义

3. 语言切换函数示例（Component Controller）

4. 视图中绑定 i18n 文本示例

5. 额外建议

SAP Fiori 国际化多语言切换 Demo 完整示范

1. i18n 目录结构和示例文件

2. i18n.properties（默认英文）

3. i18n_zh_CN.properties（简体中文）

4. Component.js

5. App.view.xml

6. App.controller.js

7. 运行效果

lichongyang

发表回复取消回复

Latest posts

Text widget

SAP Fiori 开发国际化（i18n）学习笔记

目录

1️⃣ Fiori 国际化简介

2️⃣ i18n Properties 文件结构与使用

3️⃣ 语言切换示例代码

4️⃣ 常用语言代码列表

5️⃣ 国际化关键规则

6️⃣ 国际化注意事项

1. i18n 属性文件示例

2. 组件中 i18n 资源模型默认定义

3. 语言切换函数示例（Component Controller）

4. 视图中绑定 i18n 文本示例

5. 额外建议

SAP Fiori 国际化多语言切换 Demo 完整示范

1. i18n 目录结构和示例文件

2. i18n.properties（默认英文）

3. i18n_zh_CN.properties（简体中文）

4. Component.js

5. App.view.xml

6. App.controller.js

7. 运行效果

lichongyang

发表回复 取消回复

Latest posts

Text widget

发表回复取消回复