Question

我是openui5编程的初学者。我尝试了一些教程，但现在我遇到了一些关于ux3.shell的麻烦。什么是简单的退出，但我无法解决我的问题。我将在顶部有一个菜单栏，并在点击菜单项后显示内容。

这是我的编码（我会粘贴超过需要的，因为在这个时候，我不知道问题出在哪里：

的index.html



AccessTypeEnum e = gson.fromJson(inputJson, AccessTypeEnum.class);

component.js

的MainView

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">

    <title>Stall</title>

    <script id="sap-ui-bootstrap"
        src="../../resources/sap-ui-core.js"
        data-sap-ui-libs="sap.m"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-resourceroots='{"com.sp": ""}'>
    </script>

    <link rel="stylesheet" type="text/css" href="css/style.css">

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

<body class="sapUiBody" role="application">
    <div id="content"></div>
</body>

MainView控制器

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

return UIComponent.extend("com.sp.Component", {

    metadata: {
        manifest: "json"
    },

    init: function() {
        // call the base component's init function
        UIComponent.prototype.init.apply(this, arguments);

        // set the device model
        this.setModel(models.createDeviceModel(), "device");
      var oView = sap.ui.view({
        id: "MainViewShell",
        viewName: "com.sp.view.MainView",
        type: "XML",
        viewData: { component : this }
    });

    // set i18n model
    var i18nModel = new sap.ui.model.resource.ResourceModel({
        bundleUrl : "i18n/messageBundle.properties"
    });
    oView.setModel(i18nModel, "i18n");

    // done
    return oView;        

    }
  });
});

ShellView

<?xml version="1.0" encoding="UTF-8" ?>
<mvc:View controllerName="com.sp.controller.MainView"      displayBlock="true" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
<App id="idMainView">
    <mvc:XMLView viewName="com.sp.view.ShellView" id="idShellView" />
</App>
</mvc:View>

ShellView控制器

sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";

return Controller.extend("com.sp.controller.MainView", {


onInit: function(oEvent) {

    this.oApp = this.getView().byId("idMainView");

    // Have child views use this controller for navigation
    var that = this;
    this.oApp.getPages().forEach(function(oPage) {
        oPage.getController().navigation = that;
    });

},
navTo: function(sPageId, oContext) {

    this.oApp.to(sPageId);
    if (oContext) {
        this.oApp.getPage(sPageId).setBindingContext(oContext);
    }

},
navBack: function() {

    this.oApp.back();

} 
});
});

TempView和OverviewView的视图几乎相同，仅填充了一个小的文本字段，但它们永远不会显示。有时看起来，它们显示在“shell”视图下面（短暂闪烁）。

对我来说真的很奇怪，如果我在switch语句下添加ShellView控制器：

<mvc:View controllerName="com.sp.controller.ShellView" 
      xmlns:html="http://www.w3.org/1999/xhtml" 
      xmlns:ux3="sap.ui.ux3"  
      xmlns:mvc="sap.ui.core.mvc" 
      xmlns:l="sap.ui.layout"
      xmlns="sap.m">
<App>
    <pages>
<ux3:Shell id="idShellView" appTitle="Stall" worksetItemSelected="onNavigate">

    <ux3:worksetItems>

        <ux3:NavigationItem text="Seite1" key="key1">
        </ux3:NavigationItem>

        <ux3:NavigationItem text="Seite2" key="key2">
        </ux3:NavigationItem>

    </ux3:worksetItems>

    <ux3:content>
            <mvc:XMLView viewName="com.sp.view.TempView" id="idTempView" />
    </ux3:content>

</ux3:Shell>

    </pages>
</App>
</mvc:View>

它会出现错误“Uncaught TypeError：this.placeAt不是函数”，但会显示内容。

有没有人有想法可以帮助我？

非常感谢Stefan

Answer 1

在您的Controller函数中，this是对Controller实例的引用，该实例没有placeAt方法，因为它本身没有显示。

在任何情况下placeAt将SAPUI5 Control 放置在由给定ID定义的 DOM-Element 中。在您的应用中，您应该在index.html中仅使用。要在以后添加控件（或视图），您应该使用控件提供的聚合。

要将初始视图添加到您的组件必须提供createContent方法而不是在init中返回的页面。

根据您的代码，查看this Plunker的工作示例。我通过删除MainView并将OverviewView作为Shell的默认内容加载来修改它。

Answer 2

你可以尝试在“sap.m”之后添加libs，如

“sap.m，sap.ui.ux3”

因为shell属于sap.ui.ux3

Openui5 ux3.Shell - 单击导航栏项后未显示的内容

2 个答案: