Hello Experts,
I'm new SAP UI5 , i'm developing App by following project structure ,please help me to i18n model is loading in manifest.json file ,it's urgent
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>SAP UI5</title>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-compatVersion="edge"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{"sap.myApp" : "./", "i18n" : "./i18n" }'>
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.getCore().attachInit(function()
{
new sap.m.Shell(
{
app:new sap.ui.core.ComponentContainer(
{
height:"100%",
name:"sap.myApp"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
//"HelloWorld/model/models"
//"sap/myApp/model/models"
], function(UIComponent, Device, models) {
"use strict";
return UIComponent.extend("sap.myApp.Component", {
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* @public
* @override
*/
init: function() {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
var oModel = new sap.ui.model.json.JSONModel("model/car.json");
this.setModel(oModel);
// set the device model
//this.setModel(models.createDeviceModel(), "device");
}
});
});
manifest.json
{
"_version": "1.5.0",
"sap.app": {
"id": "sap.myApp",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.40.12"
}
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_hcb",
"sap_belize"
]
},
"sap.ui5": {
"rootView": {
"viewName": "sap.myApp.view.App",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.30.0",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.layout": {},
"sap.ushell": {},
"sap.collaboration": {},
"sap.ui.comp": {},
"sap.uxap": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.myApp.i18n/i18n"
}
}
},
"resources": {
"css": [{
"uri": "css/style.css"
}]
}
}
}
App.view.xml
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="sap.myApp.controller.App" xmlns:html="http://www.w3.org/1999/xhtml">
<Image src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Pigeony.jpg"/>
<Input value="{/car/carModel}"
description="Hello {/car/carModel}"
valueLiveUpdate="true"
width="40%"/>
<Button type="{i18n>Click}" press="onClick"></Button>
</core:View>
i18n.properties
Click = click me
Mar 27, 2017 at 09:47 AM
Hello
May I ask why you are binding the button "type" to the value "click me"? Shouldn't it be "text"?
i.e:
<Button text="{i18n>Click}" press="onClick"></Button>
Regards
Antonette
Mar 27, 2017 at 10:05 AM
Sorry Antonette,
For button text only I'm binding ,by mistake I type like that please help me ,
My i18n Model is not loading in Network tab I checked in Debugging mode also it is not loading please help me ....
Regards,
fayaz
Mar 27, 2017 at 10:39 AM
Try fixing your bundle name of the i18n model in your manifest, remove the "/". (see below)
Regards
Antonette
"i18n": {"type": "sap.ui.model.resource.ResourceModel","settings": {"bundleName": "sap.myApp.i18n.i18n"}}
Mar 27, 2017 at 11:38 AM
Yes I removed "/" slach ... Still it not working ..
Regards,
fayaz
Mar 27, 2017 at 12:39 PM
Use the below code...
Manifest.json
{
"_version": "1.5.0",
"sap.app": {
"id": "sap.myAppsap.myApp",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.40.12"
}
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_hcb",
"sap_belize"
]
},
"sap.ui5": {
"rootView": {
"viewName": "sap.myAppsap.myApp.view.View1",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.30.0",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.layout": {},
"sap.ushell": {},
"sap.collaboration": {},
"sap.ui.comp": {},
"sap.uxap": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.myAppsap.myApp.i18n.i18n"
}
}
},
"resources": {
"css": [{
"uri": "css/style.css"
}]
}
}
}
Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"sap/myAppsap/myApp/model/models"
], function(UIComponent, Device, models) {
"use strict";
return UIComponent.extend("sap.myAppsap.myApp.Component", {
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* @public
* @override
*/
init: function() {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// set the device model
this.setModel(models.createDeviceModel(), "device");
}
});
});
Index:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>sap.myApp</title>
<script id="sap-ui-bootstrap"
src="../../resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"sap.myAppsap.myApp": ""}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "sap.myAppsap.myApp"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
Mar 27, 2017 at 12:22 PM
Can you please post a screenshot of your console for the initialization of the app
Antonette
Mar 27, 2017 at 12:31 PM
Try removing the i18n from your bootstrap:
data-sap-ui-resourceroots='{"sap.myApp" : "./"}'>
Mar 27, 2017 at 12:19 PM
Yes App is initialized ,I'm not getting any error also...
Regards,
fayaz