Расширение приложений SAPUI5
Я попытался познакомиться с расширяющимися приложениями SAPUI5. Для этого я использовал splitapp в папке test-resources/sap/m/demokit
Как указано в Руководстве разработчика - Расширение приложений SAPUI5, вам нужно только создать Component.js для пользовательского проекта приложения. Сейчас есть 2 вопроса:
- Как вы можете загрузить расширенное приложение, не имея index.html?
- Как вы решаете проблемы относительного пути (например, внутри функции
createContent)?
Мое текущее решение состоит в том, чтобы скопировать index.html из splitapp вставьте его в splittapp-ext и измените все пути... но это решение не кажется очень модульным:
original index.html (splitapp):
<!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>
Для вопроса 2. У меня нет модульного решения. Анонимная функция 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 ответа
Вы можете попробовать расширение приложения, используя SAP Web IDE . Вы можете найти пробные ссылки в SAP SCN . Вся идея подхода, основанного на компонентах, состоит в том, чтобы позволить приложениям запускаться в более широком контексте, таком как Fiori Launchpad . Если вы хотите протестировать его локально, вы можете подумать о создании локальной панели запуска sandbox по этой ссылке: Настройка локальной панели запуска Fiori.
Можно запустить локальную тестовую версию панели запуска (с ограничениями).
Что касается второго вопроса, помните, что элемент управления ищет модель, которая соответствует пути привязки внутри себя, позже для родителей, и поднимается до самого ядра. Таким образом, установка модели на один вид не лучший вариант. Вы можете установить модель непосредственно в Component.js, поскольку все приложение имеет доступ к ней или только для тестирования, к ядру - sap.ui.getCore().setModel(myModel), Это пример из документации пользовательского интерфейса правильного определения Component.js с назначенными моделями (для версии 1.30, для предыдущих, вы, вероятно, не будете использовать 'define'):
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, вы можете найти здесь: