Question

我试图熟悉扩展SAPUI5应用程序。为此，我在文件夹test-resources/sap/m/demokit

中使用了 splitapp

根据开发者指南 - 扩展SAPUI5应用程序的规定，您只需为自定义应用程序项目创建Component.js。现在有两个问题：

如何在没有index.html的情况下引导扩展的应用程序？
如何解决相对路径问题（例如在函数createContent内）？

我目前的解决方案是从 splitapp 复制index.html，将其粘贴到 splittapp-ext 并修改所有路径......但此解决方案似乎不是非常模块化的：

原始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.问题，我没有模块化解决方案。 splitapp 的createContent内的匿名函数Component.js定义了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应用程序？

Answer 1

您可以使用SAP Web IDE尝试扩展应用程序。您可以在SAP SCN上找到试用链接。基于组件的方法的整个想法是使应用程序能够在更广泛的环境中启动，例如Fiori Launchpad。如果要在本地测试它，可以考虑从此链接设置本地启动板sandbo： Set up local Fiori Launchpad

Answer 2

可以运行启动板的本地测试版本（有限制）。

first three search results

detailed wiki

关于第二个问题，请记住控件正在寻找一个匹配内部绑定路径的模型，后面是父项，然后冒泡到核心。因此，将模型设置为一个视图不是最佳选择。您可以将模型直接设置为Component.js，因为整个应用程序可以访问核心 - sap.ui.getCore().setModel(myModel)，或仅用于测试核心 - 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"); } }); });。这是来自ui文档的示例，其中包含已分配模型的Component.js的正确定义（对于版本1.30，对于之前的版本，您可能不会使用'define'）：

JSONObject json = new JSONObject(response.getEntity(String.class));                                 
Jobs[] obj = new Gson().fromJson(json.toString(), Jobs[].class);
System.out.println(obj.toString());

openui5中记录的类似示例，您可以在这里找到：

component and model sample

扩展SAPUI5应用程序

2 个答案: