我正在尝试使用 XAMPP 在本地计算机上安装 SAPUI5。 我将文件复制到 htdocs。 在 Chrome 中启动 localhost 我得到 SAPUI5 SDK - 演示套件概述页面。
之后,我将“HowTo in 20秒”代码的示例代码复制到记事本并将其另存为HTML文档。
在浏览器中运行此文件只会带来一个白色页面。
我在 Chrome 中查找开发者工具,看到了这样的东西:
“无法预加载‘sap.ui.core.library-preload’:未找到 - sap.ui.ModuleSystem”
我希望你能帮我解决这个问题,这样我就可以开始使用SAPUI5了
关于此主题的有用链接,我可以推荐:
它们都使用来自 Github 的 UI5 SplitApp Boilerplate,这是一个示例应用程序,具有基本应用程序结构:https://github.com/6of5/UI5SplitApp-Boilerplate
也许这可以帮助你开始本地开发
打开一个新的记事本文件。使用 html 扩展名保存以下代码,例如:helloworld.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SAPUI5 in 20 Seconds</title>
<!- 1.) Load SAPUI5, select theme and control library ->
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons"></script>
<!- 2.) Create a UI5 button and place it onto the page ->
<script>
// create the button instance
var myButton = new sap.ui.commons.Button("btn");
// set properties, e.g. the text
myButton.setText("Hello World!");
// attach an action to the button's "press" event (use jQuery to fade out the button)
myButton.attachPress(function() { $("#btn").fadeOut(); });
// place the button into the HTML element defined below
myButton.placeAt("uiArea");
// an alternative, more jQuery-like notation for the same is:
/*
$(document).ready(function() {
$("#uiArea").sapui("Button", "btn", {
text:"Hello World!",
press: function(){ $("#btn").fadeOut(); }
});
});
*/
</script>
</head>
<body class="sapUiBody">
<!- This is where you place the UI5 button ->
<div id="uiArea"></div>
</body>
</html>
现在使用任何现代浏览器打开文件。仅供参考,我们不需要任何服务器来测试这个
您可以将 Eclipse 配置为与 SAPUI5 配合使用,并在本地环境中使用 Apache Tomcat 来运行您的应用程序。
在Eclipse中安装SAPUI5工具
在服务器中配置 Apache Tomcat
现在一切准备就绪,可以出发了。创建一个新的 SAPUI5 项目(比如 myProject),添加一些代码。要在 tomcat 上运行它,请右键单击项目,选择“运行方式”>“在服务器上运行”。选择您的 Tomcat 服务器,下一步并完成。您的项目将在您的服务器上启动并运行,网址为 http://localhost:8080/myProject/
“预加载失败”消息不应该是致命错误;库预加载文件是可选的捆绑优化,以减少 HTTP 请求的数量。
https://github.com/SAP/openui5/issues/119
我认为你可以忽略这个警告。我在加载
Cross origin requests
时遇到了Component.js
问题,使用python -m SimpleHTTPServer
解决了这个问题。你需要的只是一个服务器,选择你喜欢的。
Daniel
我推荐您以 SAPUI 演练 作为起点。这是有关如何构建 SAPUI5 应用程序的分步指南/教程,包含有关基础知识和最佳实践的说明。
对于基础知识,您只需要一个编辑器和一个浏览器(没有网络服务器)。
这个 git 存储库包含所有演练步骤作为单独的分支。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SAPUI5 single file template</title>
<!-- decide what version you want to use, see http://scn.sap.com/community/developer-center/front-end/blog/2015/07/30/multi-version-availability-of-sapui5:
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
<script src="https://sapui5.hana.ondemand.com/1.28.11/resources/sap-ui-core.js"
<script src="https://openui5beta.hana.ondemand.com/resources/sap-ui-core.js"
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
<script src="https://openui5.hana.ondemand.com/1.30.7/resources/sap-ui-core.js"
-->
<script src='https://ui5.sap.com/1.110.0/resources/sap-ui-core.js'
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"></script>
<!-- use "sync" or change the code below if you have issues -->
<body class="sapUiBody">
<div id="content"></div>
</body>
<!-- XMLView -->
<script id="myXmlView" type="ui5/xmlview">
<mvc:View
controllerName="MyController"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:nabisoft="nabisoft.ui">
<l:HorizontalLayout xmlns:sap.ui.layout="sap.ui.layout" id="table_layt">
<l:content>
<Table noDataText="No Data Available" id="bud_table" class="table_layt">
<items></items>
<columns>
<Column id="c1">
<header><Label text="Number" id="aclab"/></header>
</Column>
<Column id="c2">
<header><Label text="Question" id="actlab"/></header>
</Column>
<Column id="c3">
<header><Label text="Answer" id="budglab"/></header>
</Column>
<Column id="c4">
<header>
<Label text="Answertype" id="Answertype"/></header>
</Column>
</columns>
</Table>
</l:content>
</l:HorizontalLayout>
</mvc:View>
</script>
<script>
sap.ui.getCore().attachInit(function () {
"use strict";
//### Controller ###
sap.ui.controller("MyController", {
onInit : function () {
this.getView().setModel(
new sap.ui.model.json.JSONModel({
root: [
{
Number: "1",
Question: "Question 1",
Answer: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l",
Answertype: "text"
},
{
Number: "2",
Question: "Question 2",
Answer: "yes",
Answertype: "yesno"
}
]
}));
var oTable = this.getView().byId("bud_table");
var oTemplate = new sap.m.ColumnListItem({
cells:[
new sap.m.Label({
text:"{Number}"
}),
new sap.m.Text({
text:"{Question}"
}),
new sap.m.Text({
text:"{Answer}"
}),
new sap.m.Text({
text:"{Answertype}"
})
]
});
oTable.bindItems("/root", oTemplate);
}
});
//### THE APP: place the XMLView somewhere into DOM ###
sap.ui.xmlview({
viewContent : jQuery("#myXmlView").html()
}).placeAt("content");
});
</script>
</head>
</html>
保存文件,在浏览器中打开,它就可以工作了。您还可以使用 XAMPP 或 ui5 serve
以及其他 Web 服务器来提供此服务。
此页面可能是一个很好的起点。