Maybe you know the
Walktrough Tutorial in SAPUI5 SDK - Demo Kit
There is one tutorial step
"Translatable Texts" that show you how to use the i18n files.
SAPUI5 SDK - Demo Kit Walktrough Step 8 Translatable Texts
And it shows also how you can use placeholders with the i18n files. BUT only in the controller, but what is if you want use it in your xml view? How does the source Code look?
There is an information in this tutorial:
The description text is not completely localized in this example for illustration purposes. To be on the safe side, we would have to use a similar mechanism as in the controller to use a string from the resource bundle and replace parts of it. This can be done with the jQuery.sap.formatMessage formatter.
Ok, and I will show you how.
At first we will build a similar app as the tutorial app:
In this code sample we have a "donate" button, a MessageToast (in java Script) which shows you how often you clicked (how much you've donated) the button, and a label which shows you the same (in XML). The text depends of the browser language, and also the position of the value which we define in the i18n files.
Create a new application with the template
SAPUI5 Application (we choose the quick way)
As the view, choose the
xml view and then click
Finish
The template creates a complete project with all important files like the view and the controller, css files, the default i18n file etc.
At first we create a
button on the
XML view.
<Button text="{i18n>donateButton}" press="showMessage"></Button>
Then we go to our
controller
onInit: function () {
var model = new sap.ui.model.json.JSONModel();
model.setData({
number: 0
});
this.getView().setModel(model, "view");
},
Here we create a really small
model with only one value
showMessage: function () {
var oResourceBundle = this.getView().getModel("i18n").getResourceBundle();
var oViewModel = this.getView().getModel("view");
oViewModel.setProperty("/number", oViewModel.getProperty("/number") + 1);
var oText = oResourceBundle.getText("donateText", [oViewModel.getProperty("/number")]);
sap.m.MessageToast.show(oText);
}
This is our function which is called when we click the button.
In the showMessage event handler function we access the i18n model to get the text from the message bundle file and replace the placeholder {0} with the number from our data model. The getProperty method can be called in any model and takes the data path as an argument. In addition, the resource bundle has a specific getText method that takes an array of strings as second argument.
Now we look into the i18n file.
in
i18n.properties add/change:
title=Donation App
appTitle = App Title
appDescription=App Description
donateButton=+ EUR 1
donateText=Already donated EUR {0}
add a
new i18n file "i18n_de.properties" and add the following:
title=Spenden Applikation
appTitle = App Titel
appDescription=App Beschreibung
donateButton=+1 EUR
donateText={0} EUR bereits gespendet
Right click on your
project folder, R
un -> Run Configurations, choose
"Run index.html" and choose the
"With Frame" Preview Mode.
And then,
run the App
You can switch between the different languages. It will use the i18n files to show the correct translation.
But how we can do this in XML e.g. for a label or on a button without using java script?
This can be done with the
jQuery.sap.formatMessage formatter.
SAPUI5 SDK - Demo Kit API reference jQuery.sap.formatMessage
The Formatter does the work: it replace the placeholders with the actuel values.
Open your view.xml file.
After your button
add a label:
<Label text="{parts: [
'i18n>donateText',
'view>/number'
],
formatter: 'jQuery.sap.formatMessage'}"/>
The Label gets parts which contain the text from the i18n file and the model data field which will fill out the placeholder {0} in the i18n text.
Note: If you use more than one placeholders in your i18n file (Hello {0} {1}) then your xml code should look like this
<Label text="{parts: ['i18n>text',
'view>/firstName',
'view>/lastName'
],
formatter: 'jQuery.sap.formatMessage'}"/>
You can pass as many parameters as you want, but the first "part" is the property key.
Save and run your application again and also test your different languages.
Here you can see the application.
And here you will find the Code.
More Web IDE stuff published by Technology RIG :smile:
See you
Claudi