if(재능이 없으면 시간으로 극복하라){return 성공;}

Profile

Post

Project

SAP BTP - Luigi SAP UI5 Application에 다국어 기능 추가하기

Main.controller.js를 아래와 같이 수정해준다.
image

sap.ui.define(["luigi/controller/BaseController"], function (Controller) {
	"use strict";

	return Controller.extend("luigi.controller.Main", {
		onInit: function (Controller) {
			const oModel = new sap.ui.model.json.JSONModel();

			oModel.loadData("../model/products.json");
			this.getView().setModel(oModel);

			const updateCurrentLanguage = () => {
				const currentLanguage = LuigiClient.uxManager().getCurrentLocale();
				sap.ui.getCore().getConfiguration().setLanguage(currentLanguage);
			}

			LuigiClient.addInitListener(updateCurrentLanguage);
		},

		onListItemPress: function (oEvent) {
			const id = oEvent.getSource().getBindingContext().getProperty("id");
			
			const title = this.getView().getModel("i18n").getResourceBundle().getText("ModalText");
			
			LuigiClient.linkManager().openAsModal('/home/products/' + id, { title: 'Product Detail', size: 'm' });
		}
	});
});

언어 확장팩 properties를 만들어주고 내용을 아래와 같이 변경해준다.

image

i18n_de.properties

ModalText = Produktdetails
Quantity = Anzahl
appTitle=luigi
appDescription= Deutsch

i18n_en.properties

ModalText = Product Detail
Quantity = Quantity
appTitle=luigi
appDescription= English

i18n_ko.properties

ModalText = 제품 상세
Quantity = 수량
appTitle=luigi
appDescription= Korea

index.html을 아래와 같이 변경해준다.

image image

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="expires" content="0" />
		<meta charset="utf-8" />

		<title>UI5 Application: luigi</title>
		<script src="https://unpkg.com/@luigi-project/client@latest/luigi-client.js"></script>
		<script
			id="sap-ui-bootstrap"
			src="resources/sap-ui-core.js"
			data-sap-ui-resourceroots='{
				"luigi": "./"
			}'
			data-sap-ui-theme="sap_horizon"
			data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
			data-sap-ui-async="true"
			data-sap-ui-compatVersion="edge"
			data-sap-ui-frameOptions="allow"
			data-sap-ui-preload=""
			data-sap-ui-xx-waitForTheme="true"
			data-sap-ui-language="en-US"
			data-sap-ui-xx-supportedLanguages="en,de,ko"
		></script>
	</head>

	<body class="sapUiBody">
		<div data-sap-ui-component data-name="luigi"></div>
	</body>
</html>

Main.view.xml 수정 image

<ObjectAttribute text="{i18n>Quantity}: {orderQuantity}"></ObjectAttribute>

정상 반영 완료 image