扩展SAPUI5应用程序
我试图熟悉扩展SAPUI5应用程序。为此，我使用了testresources/sap/m/demokit文件夹中的splitapp 按照《开发人员指南-扩展SAPUI5应用程序》中的规定，您只需为自定义应用程序项目创建Component.js。现在有两个问题： 如何在没有index.html的情况下引导扩展应用程序？ 如何解决相对路径问题，例如函数createContent内部的问题？ 我目前的解决方案是从splitapp复制index.html，将其粘贴到splittapp ext中，并修改所有路径……但此解决方案似乎不是非常模块化： 原始index.html splitapp：扩展SAPUI5应用程序,sapui5,extending,Sapui5,Extending,我试图熟悉扩展SAPUI5应用程序。为此，我使用了testresources/sap/m/demokit文件夹中的splitapp 按照《开发人员指南-扩展SAPUI5应用程序》中的规定，您只需为自定义应用程序项目创建Component.js。现在有两个问题： 如何在没有index.html的情况下引导扩展应用程序？ 如何解决相对路径问题，例如函数createContent内部的问题？ 我目前的解决方案是从splitapp复制index.html，将其粘贴到splittapp ext中，并修改所
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta charset="UTF-8">
<title>'sap.m.SplitApp' Demo Application</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='../lib/openui5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'
data-sap-ui-resourceroots='{
"res": "./",
"sap.ui.demo.splitapp" : "./",
"view" : "./view",
"model" : "./model",
"util" : "./util"
}' >
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
new sap.m.Shell("Shell", {
title : "sap.m splitapp",
showLogout : false,
app : new sap.ui.core.ComponentContainer({
name : 'sap.ui.demo.splitapp'
}),
homeIcon : {
'phone' : 'img/57_iPhone_Desktop_Launch.png',
'phone@2' : 'img/114_iPhone-Retina_Web_Clip.png',
'tablet' : 'img/72_iPad_Desktop_Launch.png',
'tablet@2' : 'img/144_iPad_Retina_Web_Clip.png',
'favicon' : 'img/favicon.ico',
'precomposed': false
}
}).placeAt('content');
</script>
</head>
<body class='sapUiBody' id="content">
</body>
</html>
是否有更好的方法扩展SAPUI5应用程序？您可以尝试使用SAP Web IDE扩展应用程序。您可以在SAP SCN上找到试用链接。基于组件的方法的整体思想是使应用程序能够在更广泛的环境中启动，如Fiori Launchpad。如果您想在本地测试它，您可以考虑从这个链接设置本地启动板SoSbO：
.可以在有限制的情况下运行本地测试版本的launchpad 至于第二个问题，请记住，控件正在寻找一个模型，该模型与自身内部的绑定路径相匹配，稍后与父对象匹配，并冒泡到核心。因此，将模型设置为一个视图并不是最佳选择。您可以直接将模型设置为Component.js，因为整个应用程序都可以访问该组件，或者只是为了测试，您可以将模型设置为core-sap.ui.getCore.setModelmyModel。 这是ui文档中正确定义Component.js并为版本1.30分配模型的示例，对于以前的版本，您可能不会使用“定义”：
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel",
"sap/ui/model/resource/ResourceModel"
], function (UIComponent, JSONModel, ResourceModel) {
"use strict";
return UIComponent.extend("sap.ui.demo.wt.Component", {
metadata : {
manifest: "json"
},
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// set data model
var oData = {
recipient : {
name : "World"
}
};
var oModel = new JSONModel(oData);
this.setModel(oModel);
// set i18n model
var i18nModel = new ResourceModel({
bundleName : "sap.ui.demo.wt.i18n.i18n"
});
this.setModel(i18nModel, "i18n");
}
});
});
createContent : function () {
// create root view
var oView = sap.ui.view({
id : "app",
viewName : "view.App",
type : "JS",
viewData : { component : this }
});
// --> WORKAROUND: add the module path to the JSON-paths
var rootPath = jQuery.sap.getModulePath("sap.ui.demo.splitapp");
// set navigation model
// load the global data model
var oJSONDataModel = new sap.ui.model.json.JSONModel(rootPath + "/model/data.json");
oView.setModel(oJSONDataModel);
// load the global image source model
var oImgModel = new sap.ui.model.json.JSONModel(rootPath + "/model/img.json");
oView.setModel(oImgModel, "img");
// done
return oView;
}
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel",
"sap/ui/model/resource/ResourceModel"
], function (UIComponent, JSONModel, ResourceModel) {
"use strict";
return UIComponent.extend("sap.ui.demo.wt.Component", {
metadata : {
manifest: "json"
},
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// set data model
var oData = {
recipient : {
name : "World"
}
};
var oModel = new JSONModel(oData);
this.setModel(oModel);
// set i18n model
var i18nModel = new ResourceModel({
bundleName : "sap.ui.demo.wt.i18n.i18n"
});
this.setModel(i18nModel, "i18n");
}
});
});