Preview

The texts are now derived from a resource model (No visual change to last step)

Coding

You can view and download all files in the Demo Kit at Data Binding - Step 6.

1. Create a new entry in the manifest.json file under the models entry as shown in the coding below. The resource model is set to the component using the model name i18n. The data comes from the i18n.properties file as specified in the bundleName entry in the settings. Since we're creating a resource model, the file name is assumed to have the extension .properties; this does not need to be stated explicitly.

   webapp/manifest.json

   Hidden

   ...
   	"sap.ui5": {
   		"dependencies": {
   			"minUI5Version": "1.120.0",
   			"libs": {
   				"sap.m": {},
   				"sap.ui.core": {},
   				"sap.ui.layout": {}
   			}
   		},
   		"models": {
   			"": {
   				"type": "sap.ui.model.json.JSONModel",
   				"uri": "./model/data.json"
   			},
   			"i18n": {
   				"type": "sap.ui.model.resource.ResourceModel",
   				"settings": {
   					"bundleName": "ui5.databinding.i18n.i18n",
   					"supportedLocales": [
   						"",
   						"de"
   					],
   					"fallbackLocale": ""
   				}
   			}
   		},
   ...

   Note

   The configured supportedLocales represent the following i18n files present (see Step 7):

   • "" - i18n/i18n.properties
   • "de" - i18n/i18n_de.properties

   The configured fallbackLocale should represent one of these files. According to the fallback chain, the root bundle ("") is the last fallback. Configuring it explicitly avoids side effects when additional resource files are added. For more information, see Supported Locales and Fallback Chain.

2. Create a new folder i18n in the webapp folder and a new file i18n.properties within this folder. Add the code shown below.

   webapp/i18n/i18n.properties (New)

   Hidden

   # Field labels
   firstName=First Name
   lastName=Last Name
   enabled=Enabled
   
   # Screen titles
   panelHeaderText=Data Binding Basics

   The panelHeaderText property has been moved from the JSON model into the i18n resource bundle. Also, the field labels are no longer hard-coded in the XML view. This is because all of these text fields need to be translated.

   Language-specific text stored in resource models obeys the Java convention for internationalization (i18n).

3. Modify the data binding for the panel header and the labels in App.view.xml to include the model name. Note that a "greater than" character separates the model name and the property name. Also, i18n property names must not start with a slash character.

   webapp/view/App.view.xml

   Hidden

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

4. Remove the line panelHeaderText : "Data Binding Basics" from the model data in the data.json file. This text has now been moved to the resource model.

   webapp/model/data.json

   Hidden

   {
   	"firstName": "Harry",
   	"lastName": "Hawk",
   	"enabled": true
   }

5. Remove the init function and the import of sap/ui/model/BindingMode from Component.js as we do not want to set the one-way binding mode anymore.

   webapp/Component.js

   Hidden

   sap.ui.define([
   	"sap/ui/core/UIComponent"
   ], (UIComponent) => {
   	"use strict";
   	return UIComponent.extend("ui5.databinding.Component", {
   		metadata: {
   			interfaces: ["sap.ui.core.IAsyncContentCreation"],
   			manifest: "json"
   		}
   	});
   });

You can use multiple model instances by using different model names. The model name can be set as the second parameter when using the setModel(oResourceModel,"i18n") method. The model is then propagated under this name to all aggregated child controls (and their children, and so on …). All these controls have access to this model under the name i18n as well as to the JSONModel (default model, which has no name).