Question

我希望使用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-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>

但是，我没有在页面上显示任何内容，而且我的Chrome开发工具中出现以下错误：

＆＃39;未捕获的TypeError：undefined不是函数＆＃39;在index.html第13行，我的视图设置。

库已正确设置并正在链接。

Answer 1

我猜它加载你的视图失败了，因此调用了未定义的placeAt。您应该让UI5-Framework了解您的本地资源。否则它将尝试从“ressources”文件夹中获取所有资源（如视图，实用程序），这在您的情况下是不正确的。经常使用的项目结构如下所示：

WebContent
    | index.html
    | view
        | Splitter.controller.js
        | Splitter.view.js

当然，您可以将文件夹命名为不同的名称。如果我将此模式和下面的代码改编为您的项目，它对我有用。

的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（位于view / Splitter.controller.js中）

sap.ui.controller("view.Splitter", {

    onInit: function() {

    }

});

查看（位于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>

Answer 2

我认为您应该使用sap.ui.core.mvc.xmlview("Splitter")代替sap.ui.xmlview("Splitter");

基本的openUI5拆分视图应用程序

2 个答案:

的index.html

Controller（位于view / Splitter.controller.js中）

查看（位于view / Splitter.view.xml中）