我正在尝试制作一个hello world web全屏应用程序。所以,我创建了一个名为Hello world的新项目。然后,我创建了一个名为WebContent的文件夹。在其中,我将以下代码放在index.html中,如下所示。
WebContent / index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{"com.Project":""}'>
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
var app = new sap.m.App({initialPage:"idpage1"});
var page1 = sap.ui.view({id:"idpage1", viewName:"com.Project.HelloWorld.Page1", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(Page1);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
然后,在这个目录WebContent/ HelloWorld
中,我放了一个名为Page1.controller.js的文件,其中包含以下代码
WebContent / HelloWorld / Page1.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("com.Project.HellowWorld.Page1", {
});
});
另外,我创建了另一个文件
WebContent / HelloWorld / Page1.view.xml
<!DOCTYPE xml>
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="com.Project.HellowWorld.Page1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Full screen App">
<content>
</content>
</Page>
</core:View>
问题在于背景出现。但是,整个内容不会按要求显示在页面上。
顺便说一句,我正在学习这门课程 SAPUI5 - Split Application
在6:30,应用程序完美运行,与我的应用程序不同。
我只知道解决问题的方法。 1-在index.html:20我的代码的这一部分写得像app.addPage(Page1);
所以,我只是用app.addPage(page1);
替换它,错误就消失了。
2-另一个错误出现在XML文件中。我刚刚用<core:View>....</core:View>
<core:view>....</core:view>
现在,应用程序运行正常。
答案 0 :(得分:1)
您的<page>
写成小写。它应该是<Page>
。
您应该在控制台中收到以下错误:
Uncaught Error: failed to load 'sap/m/page.js' from .../resources/sap/m/page.js: 404 - Not Found
答案 1 :(得分:0)
我只知道解决问题的方法。
1- index.html:20
我的代码的这一部分写得像app.addPage(Page1);
所以,我只是用app.addPage(page1);
替换它,错误就消失了。
2-另一个错误出现在XML文件中。我刚刚用<core:View>....</core:View>
<core:view>....</core:view>
现在,应用程序运行正常。