Basic openUI5 Split View App
Question
I'm looking to set up a two pane splitter view with openUI5 / SAPUI5
My code is as follows:
index.html
<!DOCTYPE html>
<html><head>
meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Hello World</title>
<script id='sap-ui-bootstrap'
src='resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'>
</script>
<script>
//Set an object
var myView = sap.ui.xmlview("Splitter");
// put the View onto the screen
myView.placeAt('content');
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
Splitter.controller.js:
sap.ui.controller("Splitter", {
onInit: function () {
}
});
Splitter.view.xml:
<mvc:View
controllerName="Splitter"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.ui.commons">
<l:Splitter height="500px">
<Button height="100%" width="100%" text="Content 1">
<layoutData><l:SplitterLayoutData size="30%" resizable="false"/></layoutData>
</Button>
<Button height="100%" width="100%" text="Content 2">
<layoutData><l:SplitterLayoutData size="auto" /></layoutData>
</Button>
</l:Splitter>
</mvc:View>
However, I have nothing displaying on the page and in my Chrome Dev tools I have the following error:
'Uncaught TypeError: undefined is not a function' on index.html line 13, the set up on my view.
The library is set up correctly and is linking.
2 answers
solution1
0 ACCPTED 2015-02-18 14:36:11
I guess it fails in loading your view and thus calls placeAt of undefined. You should make the UI5-Framework aware of your local ressources. Otherwise it will try to fetch all ressources (like views, utilites) from the "ressources" folder which is incorrect in your case. A frequently used project structure looks like this:
WebContent
| index.html
| view
| Splitter.controller.js
| Splitter.view.js
Of course you can name the folder different. If I adapt this pattern and the code below to your project it works for me.
index.html
<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.layout,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- load "sap.m", "sap.ui.layout" and "sap.ui.commons" as you´re using them in your view -->
<script>
// make the framework aware of your ressource folder:
sap.ui.localResources("view");
// instantiate your view by its full qualified name:
var myView = sap.ui.xmlview("view.Splitter");
// put the View onto the screen
myView.placeAt('content');
</script>
Controller (located in view/Splitter.controller.js)
sap.ui.controller("view.Splitter", {
onInit: function() {
}
});
View (located in view/Splitter.view.xml)
<mvc:View
controllerName="view.Splitter"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.ui.commons">
<l:Splitter height="500px">
<Button height="100%" width="100%" text="Content 1">
<layoutData><l:SplitterLayoutData size="30%" resizable="false"/></layoutData>
</Button>
<Button height="100%" width="100%" text="Content 2">
<layoutData><l:SplitterLayoutData size="auto" /></layoutData>
</Button>
</l:Splitter>
</mvc:View>
solution2
0 2015-02-18 15:57:42
我认为您应该使用sap.ui.core.mvc.xmlview("Splitter")而不是sap.ui.xmlview("Splitter") ；
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.