0
Ben openui5 programlamada yeni başladım. Bazı öğreticiler denedim ama şimdi ux3.shell ile ilgili bazı sıkıntılarım var. Ne istemek basit, ama sorunumu düzeltemiyorum. Üstte bir menü çubuğu olacak ve menü maddesine tıkladıktan sonra içerik göstereceğim. İşte Openui5 ux3.Shell - içerik navbar öğesinde tıklatıldıktan sonra görüntülenmiyor
benim (I gerekli olandan daha fazla yapıştırın olacak kodlama bu süre içinde, ben sorunun bulunduğu hiçbir fikri, çünkü: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 kontrol
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 Kontrol
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));
}
});
});
defa TempView ve OverviewView yaklaşık küçük metin alanına sadece dolu aynıdır, ancak asla gösterilmeyecekler. Bazen "altında" kabuk görünümü (kısa yanıp sönen) görüntülenir gibi görünüyor. Bu bir hata verecektir
this.placeAt("content");
: Benim için
ben switch ifadesi altında ShellView denetleyicisi bu eklerseniz, gerçekten tuhaf "Yakalanmayan TypeError: this.placeAt bir işlev değil" ama içerik görüntülenecektir.
Kimsenin bir fikri var ve bana yardım edebilir mi?