Openui5 ux3.Shell -单击导航栏项目后未显示的内容
Openui5 ux3.Shell -单击导航栏项目后未显示的内容
提问于 2016-03-23 04:51:11
我是openui5编程的初学者。我尝试了一些教程，但现在我遇到了一些关于ux3.shell的问题。想要的是放弃简单，但我不能解决我的问题。我将在顶部有一个菜单栏，并将在单击菜单项后显示内容。
这是我的代码(我将粘贴比需要的更多，因为在这段时间，我不知道问题所在：
index.html
<!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>
component.js
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;
}
});
});MainView
<?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>MainView控制器
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();
}
});
});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>ShellView控制器
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("com.sp.controller.ShellView", {
onNavigate:function(evt){
switch(evt.getParameter("key")){
case "key1":
this.getView().byId("idShellView").setContent(sap.ui.xmlview("com.sp.view.OverviewView"));
break;
case "key2":
this.getView().byId("idShellView").setContent(sap.ui.xmlview("com.sp.view.TempView"));
break;
default:
this.getView().byId("idShellView").setContent(sap.ui.xmlview("com.sp.view.TempView"));
}
},
buttonPress: function() {
alert(this.getView().valueOf(name) );
}
});
});视图TempView和OverviewView几乎相同，只是填充了一个很小的文本字段，但它们永远不会显示。有时它看起来像是，显示在外壳视图下(短暂闪烁)。
对我来说真的很奇怪，如果我在switch语句下添加ShellView控制器：
this.placeAt("content");它会给出一个错误“未捕获的函数: this.placeAt不是一个函数”，但内容将被显示。
有没有人有办法可以帮我？
非常感谢Stefan
回答 2
Stack Overflow用户
发布于 2016-03-23 20:06:46
在控制器函数中，this是对控制器实例的引用，该实例没有placeAt方法，因为它本身不会显示。
在任何情况下，placeAt都会将SAPUI5控件放在由给定id定义的DOM元素中。在你的应用程序中，你应该在你的index.html中只使用一次。为了以后添加控件(或视图)，您应该使用控件提供的聚合。
要将初始视图添加到页面，您的组件必须提供createContent方法，而不是在init中返回它。
有关基于您的代码的工作示例，请参阅this Plunker。我对其进行了一些修改，删除了MainView，并将OverviewView加载为您的Shell的默认内容。
Stack Overflow用户
发布于 2016-03-23 12:38:34
你可以尝试在"sap.m“后面添加libs吗，比如
"sap.m，sap.ui.ux3“
因为shell属于sap.ui.ux3
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36164955
复制相关文章
相似问题
腾讯云开发者
