Javascript 基本openUI5分割视图应用程序
我想用openUI5/SAPUI5设置一个两窗格的拆分器视图 我的代码如下: index.htmlJavascript 基本openUI5分割视图应用程序,javascript,model-view-controller,sapui5,Javascript,Model View Controller,Sapui5,我想用openUI5/SAPUI5设置一个两窗格的拆分器视图 我的代码如下: 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-
<!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.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>
但是,我没有在页面上显示任何内容,并且在我的Chrome开发工具中出现以下错误:
“Uncaught TypeError:undefined不是函数”位于index.html第13行,即“我的视图”上的设置
库已正确设置并正在链接。我猜它无法加载您的视图,因此调用了undefined的
placeAt
。您应该让UI5框架了解您的本地资源。否则,它将尝试从“ressources”文件夹中获取所有ressources(如视图、实用程序),这在您的情况下是不正确的。经常使用的项目结构如下所示:
WebContent
| index.html
| view
| Splitter.controller.js
| Splitter.view.js
当然,您可以将文件夹命名为不同的名称。如果我将此模式和下面的代码应用于您的项目,它将对我有效
index.html
视图(位于View/Splitter.View.xml中)
我认为应该使用sap.ui.core.mvc.xmlview(“拆分器”)
而不是sap.ui.xmlview(“拆分器”)
如果您在此处或JSBin、Plunkr或类似的代码片段中设置一个显示错误的示例,您可能会得到更多帮助。在我们心中调试是困难的:)
WebContent
| index.html
| view
| Splitter.controller.js
| Splitter.view.js
<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>
sap.ui.controller("view.Splitter", {
onInit: function() {
}
});
<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>