Step 6: Resource Models

이번 튜토리얼은 다국어 번역 기능에 대해서 알아본다.

일반적으로 언어 별 텍스트가 백엔드 시스템에서 직접 파생되지 않는 한 변환 가능한 텍스트를 모델에 직접 배치하는 것은 좋은 프로그래밍 방법으로 간주되지 않는다.
따라서 모든 번역 가능한 텍스트를 리소스 번들에 배치하여 동적으로 만든다.

Preview

Coding

Data Binding - Step 6.

webapp/index.js

sap.ui.require([
	"sap/ui/model/json/JSONModel",
	"sap/ui/core/mvc/XMLView",
	"sap/ui/model/resource/ResourceModel"
], function (JSONModel, XMLView, ResourceModel) {
	"use strict";

	// Attach an anonymous function to the SAPUI5 'init' event
	sap.ui.getCore().attachInit(function () {
		// Create a JSON model from an object literal
		var oModel = new JSONModel({
			firstName: "Harry",
			lastName: "Hawk",
			enabled: true
		});

		// Assign the model object to the SAPUI5 core
		sap.ui.getCore().setModel(oModel);

		// Create a resource bundle for language specific texts
		var oResourceModel = new ResourceModel({
			bundleName: "sap.ui.demo.db.i18n.i18n"
		});

		// Assign the model object to the SAPUI5 core using the name "i18n"
		sap.ui.getCore().setModel(oResourceModel, "i18n");

		// Display the XML view called "App"
		new XMLView({
			viewName: "sap.ui.demo.db.view.App"
		}).placeAt("content");
	});
});

sap.ui.getCore() 호출하여 oResourceModel의 bundleName과 i18n을 코어에 설정을 한다.
ResourceModel 참고 자료

note:
이전 튜토리얼의 oModel.setDefaultBindingMode(BindingMode.OneWay);을 지우고 해당 텍스트는 i18n이 있는 resourceMOdel로 바인딩 된다.

webapp/i18n/i18n.properties (New)

# Field labels
firstName=First Name
lastName=Last Name
enabled=Enabled

# Screen titles
panelHeaderText=Data Binding Basics

webapp/i18n 경로에 해당 파일을 생성한다.
panelHeaderText는 json 모델에서 i18n으로 이동이 되었다.
해당 i18n은 저장된 언어는 다국어 번역을 위한 java 규칙을 따른다.

webapp/view/App.view.xml

<mvc:View
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Panel headerText="{i18n>panelHeaderText}" class="sapUiResponsiveMargin" width="auto">
		<content>
			<Label text="{i18n>firstName}" class="sapUiSmallMargin"/>
			<Input value="{/firstName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}"/>
			<Label text="{i18n>lastName}" class="sapUiSmallMargin"/>
			<Input value="{/lastName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}"/>
			<CheckBox selected="{/enabled}" text="{i18n>enabled}"/>
		</content>
	</Panel>
</mvc:View>

해당 xml 파일에 대한 text들을 i18n에 있는 속성들로 바인딩 한다.
index.js에서 serModel에서 resourceModel의 이름을 i18n으로 설정하였기 때문에 바인딩 구문은 {i18>}구문으로 사용하면 자동으로 매치되어 바인딩 된다.

Related Information

Resource Model