Question

我正在尝试运行SAPUI5应用程序。我创建了一个带有视图饼图的视图，并通过引用其ID index.html

将它们添加到主体中的content中

<script>
  var app = new sap.m.App();
  var page = sap.ui.view({
    viewName: "...",
    type: sap.ui.core.mvc.ViewType.XML
  });
  app.addPage(page);
  app.placeAt("content");
</script>

我现在的问题是Component.js没有被调用。因此，由于路由器尚未初始化，因此我无法使用路由。

我尝试了一些不同的方法，例如：

<script>
  sap.ui.getCore().attachInit(function() {
    new sap.m.Shell({
      app: new sap.ui.core.ComponentContainer({
        height: "100%",
        name: "vizFrame.gettingStarted.demoVizFrame"
      })
    }).placeAt("content");
  });
</script>

使用此方法后，Component.js被触发，但是页面为空。我的根视图的内容没有显示。

manifest.json

{
  "_version": "1.12.0",
  "sap.app": {
    "id": "vizFrame.gettingStarted.demoVizFrame",
    "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
    }
  },
  "sap.ui5": {
    "flexEnabled": false,
    "rootView": {
      "viewName": "vizFrame.gettingStarted.demoVizFrame.view.VizChart",
      "type": "XML"
    },
    "dependencies": {
      "minUI5Version": "1.60.1",
      "libs": {
        "sap.ui.layout": {},
        "sap.ui.core": {},
        "sap.m": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "vizFrame.gettingStarted.demoVizFrame.i18n.i18n"
        }
      }
    },
    "resources": {
      "css": [
        {
          "uri": "css/style.css"
        }
      ]
    },
    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "async": true,
        "viewPath": "vizFrame.gettingStarted.demoVizFrame.view",
        "controlAggregation": "pages",
        "controlId": "app",
        "clearControlAggregation": false
      },
      "routes": [
        {
          "name": "RouteVizChart",
          "pattern": "RouteVizChart",
          "target": ["TargetVizChart"]
        },
        {
          "pattern": "detail",
          "name": "detail",
          "target": "detail"
        }
      ],
      "targets": {
        "TargetVizChart": {
          "viewType": "XML",
          "transition": "slide",
          "clearControlAggregation": false,
          "viewId": "VizChart",
          "viewName": "VizChart"
        },
        "testView": {
          "viewType": "XML",
          "viewName": "testView",
          "viewId": "testView",
          "viewLevel": 2
        },
        "detail": {
          "viewType": "XML",
          "viewName": "detailView"
        }
      }
    }
  }
}

Component.js

sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/Device",
  "vizFrame/gettingStarted/demoVizFrame/model/models"
], function (UIComponent, Device, models) {
  "use strict";

  return UIComponent.extend("vizFrame.gettingStarted.demoVizFrame.Component", {
    metadata: {
      manifest: "json"
    },

    init: function () {
      UIComponent.prototype.init.apply(this, arguments);
      this.getRouter().initialize();
      this.setModel(models.createDeviceModel(), "device");
    }
  });
});

VizChart.view.xml

这是仅显示页面标题的根视图：

<mvc:View controllerName="vizFrame.gettingStarted.demoVizFrame.controller.VizChart"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  xmlns:viz="sap.viz.ui5.controls"
  xmlns:chart="sap.suite.ui.commons"
  xmlns:l="sap.ui.layout"
>
  <Page title="Übersicht">
    <l:VerticalLayout
      width="100%"
      class="gridWrapper">
      <l:Grid containerQuery="true">
        <viz:VizFrame xmlns="sap.viz" id="l100" width="100%" selectData="onDataClick" />
        <viz:VizFrame xmlns="sap.viz" id="l300" width="100%" selectData="onDataClick" />
        <viz:VizFrame xmlns="sap.viz" id="l400" width="100%" selectData="onDataClick" />
        <viz:VizFrame xmlns="sap.viz" id="l430" width="100%" selectData="onDataClick" />
        <viz:VizFrame xmlns="sap.viz" id="l499" width="100%" selectData="onDataClick" />
      </l:Grid>
    </l:VerticalLayout>
  </Page>
</mvc:View>

Answer 1

主题 App Initialization: What Happens When an App Is Started? 解释了通常按什么顺序加载哪些文件。在大多数情况下，实例化Component后，manifest.json会加载其描述符（ComponentContainer）。

关于页面为空的问题，请参见stackoverflow.com/a/50951902中的其他答案。
对于您而言，根视图是缺少根控件（例如sap.m.App）。所以应该是：

<!-- Root view -->
<mvc:View xmlns:mvc="sap.ui.core.mvc">
  <App id="app" xmlns="sap.m">
    <!-- Leave this block empty if Router should be used. Otherwise, continue.. -->
    <Page title="Übersicht">
      <!-- content -->
    </Page>
  </App>
</mvc:View>

在第一个代码段中，您可以看到页面内容，因为已经有sap.m.App。

Answer 2

ComponentContainer从component.js加载index.html文件
component.js加载文件中引用的组件描述符（manifest.json-用于声明依赖项的应用程序描述符文件）。
component.js创建根视图，默认模型和资源（i18n）模型。

index.html

sap.ui.getCore().attachInit(function () {
    new sap.ui.core.ComponentContainer({
        name: "ABC.AppName"
    }).placeAt("content");
});

component.js

sap.ui.core.UIComponent.extend("ABC.AppName.Component", {
    metadata : {
        includes: [jQuery.device.is.phone ? "assets/css/mStyle.css" : "assets/css/dStyle.css"]
    },
    createContent: function () {
        // create root view
        var oView = sap.ui.view({
            id: "app",
            viewName: "ABC.AppName.ViewFolder.App",
            type: "JS",
            viewData: { component: this },
        });

        i18nGlobal = new sap.ui.model.resource.ResourceModel({
            bundleUrl: "i18n/i18n.properties",
            bundleLocale: "de" 
        });

        oView.setModel(i18nGlobal, "i18n");
        sap.ui.getCore().setModel(i18nGlobal, "i18n");      

        return oView;
    }
});

Component.js何时加载？

manifest.json

Component.js

VizChart.view.xml

2 个答案: