扩展SAPUI5应用程序
我试图熟悉如何扩展SAPUI5应用程序。为此，我在文件夹 test-resources/sap/m/demokit中使用了拆分程序
正如开发人员指南-扩展SAPUI5应用程序中所指定的，您只需为自定义应用程序项目创建Component.js。现在有两个问题：
- 如何在没有index.html的情况下引导扩展应用程序？
- 如何解决相对路径问题(例如函数
createContent中的路径问题)？
我目前的解决方案是从splittapp-ext拆分应用程序中复制index.html，将其粘贴到中，并修改所有的paths...but --这个解决方案似乎不是非常模块化：
原始index.html (分离程序)：
<!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>修改后的index.html (Splitapp 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": "../splitapp",
"sap.ui.demo.splitapp" : "../splitapp",
"view" : "../splitapp/view",
"model" : "../splitapp/model",
"util" : "../splitapp/util"
}' >
</script>
<link rel="stylesheet" type="text/css" href="../splitapp/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> 对于第二个问题，我没有模块化的解决方案。匿名函数createContent在Component.js的splitapp中定义了到JSON模型的相对路径。在splitapp-ext应用程序中找不到模型。我发现的唯一方法就是修改Component.js
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;
}是否有更好的方法来扩展SAPUI5应用程序？
回答 2
Stack Overflow用户
发布于 2015-06-12 09:58:00
您可以使用SAP尝试应用程序的扩展。您可以在SAP SCN上找到试用链接。基于组件的方法的整个思想是使应用程序能够在更广泛的背景下启动，例如Fiori Launchpad。如果您想在本地测试它，可以考虑从这个链接：设置本地Fiori Launchpad中设置一个本地启动板sandbo。
Stack Overflow用户
发布于 2015-06-25 12:46:35
可以运行本地测试版本的launchpad (有限制)。
至于第二个问题，请记住，控件正在寻找一个模型，该模型与其内部的绑定路径相匹配，稍后与父级匹配，并一直到核心。因此，将模型设置为一个视图并不是最好的选择。您可以直接将模型设置为Component.js，因为整个应用程序都可以访问内核- sap.ui.getCore().setModel(myModel)，或者仅仅用于测试。这是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");
}
});
});您可以在openui5中找到类似的示例：
https://stackoverflow.com/questions/29280926
复制相似问题
腾讯云开发者
