i18nのライブラリ化
SAPUI5のi18nは、多言語対応用のテキストを格納するファイルです。
参考：【SAPUI5】i18nで多言語対応
通常はアプリケーションごとにi18nファイルを持ちますが、複数のアプリケーションで共通のテキストを使いたい場合もあると思います。そんなとき、ライブラリにi18nを定義し、ライブラリのi18nとアプリケーションのi18をマージして使うことができます。
以下のブログを参考に、i18nをライブラリ化してアプリケーションから使ってみます。
- SAPUI5アプリで再利用可能なライブラリを作る（ABAPリポジトリ）
- Merging Two I18n Text Bundles
- Implementing Re-use Components in SAPUI5 libraries and consuming them in SAPUI5 apps
※2020/2/5 追記
よりよいやり方
【SAPUI5】ライブラリのmessagebundleをアプリケーションから使う方法
ライブラリの登録
以下の記事を参考に、ライブラリを登録します。
SAPUI5アプリで再利用可能なライブラリを作る（ABAPリポジトリ）
つづいて、zdemolibraryの直下にreuseTextsというフォルダを作成します。
中にはi18n、Component.js、manifest.jsonを格納します。Component.jsがついているので、reuseTextsが小さなアプリケーションのように機能します。このため、独自のi18nを持つことができます。
Component.js
ここでは特別な処理はありません。
sap.ui.define([
"sap/ui/core/UIComponent"
], function (UIComponent, Device, models) {
"use strict";
return UIComponent.extend("demo.library.zdemolibrary.reuseTexts.Component", {
metadata: {
manifest: "json"
},
init: function () {
UIComponent.prototype.init.apply(this, arguments);
}
});
});
manifest.json
通常のアプリケーションと違うのは、sap.app.typeが"component"であることと、embeddedByにlibrary.jsへの相対パスを記載するところです。
{
"_version": "1.12.0",
"sap.app": {
"id": "demo.library.zdemolibrary.reuseTexts",
"type": "component",
"embeddedBy": "../",
"i18n": "i18n/i18n.properties",
"title": "{{compTitle}}",
"description": "{{compDescription}}",
"applicationVersion": {
"version": "1.0.0"
},
"resources": "resources.json"
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "sap-icon://task",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"dependencies": {
"minUI5Version": "1.66.0",
"libs": {
"sap.ui.core": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "demo.library.zdemolibrary.reuseTexts.i18n.i18n"
}
}
},
"resources": {
"css": [],
"js" : []
}
}
}
i18n
compTitle=Reuse i18n
compDescription=Library for reuse i18n
reuseText.comment1=Reuse Text 1
reuseText.comment2=Reuse Text 2
ライブラリを使用するアプリケーションを登録
SAPUI5のテンプレートを使って、簡単なアプリケーションを登録します。
App.view.xml
2つのテキストを表示します。1つ目はローカルのi18nを参照し、2つ目はライブラリのi18を参照します。
<mvc:View controllerName="demo.Train_17_UseLibraryText.controller.App" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="{i18n>title}">
<content>
<VBox>
<Text text="{i18n>local.comment1}"/>
<Text text="{i18n>reuseText.comment1}"/>
</VBox>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
i18n
title=Title
appTitle=Train_17_UseLibraryText
appDescription=App Description
local.comment1=Local Text 1
local.comment2=Local Text 2
この状態で実行すると、以下のようになります。上のテキストにはローカルのi18で定義したテキストが入っていますが、ライブラリのi18nを参照しているほうはまだ変換されていません。
ライブラリのi18nを使用する
プロジェクトを右クリックし、Project->Add Reference to Libraryでライブラリを参照します。
manifest.jsonに以下を設定します。
"sap.ui5": {
"flexEnabled": false,
"rootView": {
"viewName": "demo.Train_17_UseLibraryText.view.App",
"type": "XML",
"async": true,
"id": "App"
},
"dependencies": {
"minUI5Version": "1.65.6",
"libs": {
"sap.ui.layout": {},
"sap.ui.core": {},
"sap.m": {},
"demo.library.zdemolibrary": {
"minVersion": "1.0.0"
}
},
//追加
"components": {
"demo.library.zdemolibrary.reuseTexts": {
"lazy": true }
}
}
Component.jsの中で、ライブラリのコンポーネント（reuseTexts）からi18nをロードし、自身のi18nにマージします。
init: function () {
//...既存のコードは省略
sap.ui.component({
name: "demo.library.zdemolibrary.reuseTexts",
settings: {},
componentData: {},
async: true,
manifest: true
}).then(function(oComponent){
var oBundle = oComponent.getModel("i18n").getResourceBundle();
this.getModel("i18n").enhance(oBundle);
}.bind(this));
}
結果
ライブラリで定義したi18nも表示されました。
ただ、1行目のテキストに比べて2行目のテキストが遅れてロードされます。これは、コンポーネントを作る処理がasync（非同期）になっているためです。
sap.ui.component({
name: "demo.library.zdemolibrary.reuseTexts",
settings: {},
componentData: {},
async: true,
manifest: true
})
以下のようにすると両方のテキストが同じタイミングで表示されます。
var oComponent = sap.ui.component({
name: "demo.library.zdemolibrary.reuseTexts",
settings: {},
componentData: {},
async: false,
manifest: true
});
var oBundle = oComponent.getModel("i18n").getResourceBundle();
this.getModel("i18n").enhance(oBundle);
今回はビューにテキストしかないので画面の表示が速く、テキストの表示遅れが気になりましたが、実際はビューの初期処理などもあるので、非同期で問題ないと思います。