SAPUI5本地安装

问题描述 投票:0回答:7

我正在尝试使用 XAMPP 在本地计算机上安装 SAPUI5。 我将文件复制到 htdocs。 在 Chrome 中启动 localhost 我得到 SAPUI5 SDK - 演示套件概述页面。

之后,我将“HowTo in 20秒”代码的示例代码复制到记事本并将其另存为HTML文档。

在浏览器中运行此文件只会带来一个白色页面。

我在 Chrome 中查找开发者工具,看到了这样的东西:

“无法预加载‘sap.ui.core.library-preload’:未找到 - sap.ui.ModuleSystem”

我希望你能帮我解决这个问题,这样我就可以开始使用SAPUI5了

sapui5
7个回答
2
投票

关于此主题的有用链接,我可以推荐:

它们都使用来自 Github 的 UI5 SplitApp Boilerplate,这是一个示例应用程序,具有基本应用程序结构:https://github.com/6of5/UI5SplitApp-Boilerplate

也许这可以帮助你开始本地开发


2
投票

打开一个新的记事本文件。使用 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>

现在使用任何现代浏览器打开文件。仅供参考,我们不需要任何服务器来测试这个


1
投票

您可以将 Eclipse 配置为与 SAPUI5 配合使用,并在本地环境中使用 Apache Tomcat 来运行您的应用程序。

  1. 安装 Eclipse - http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/lunasr2
  2. 安装 Java 运行时环境 - http://www.oracle.com/technetwork/java/javase/downloads/jre7-downloads-1880261.html
  3. 安装 Apache Tomcat - http://tomcat.apache.org/download-80.cgi

在Eclipse中安装SAPUI5工具

  • Eclipse > 帮助 > 安装新软件
  • 在“可用软件站点”中添加新站点,网址为:https://tools.hana.ondemand.com/luna
  • 在“使用”选项中选择新站点。
  • 展开 HTML5 UI 开发工具包并选择 HTML5 UI 开发工具包(开发者版)
  • 下一步并安装(可能需要重新启动 Eclipse)
  • 现在您已经安装了 SAPUI5 工具。如果您创建一个新项目,您现在可以获得 SAPUI5 应用程序开发选项。

在服务器中配置 Apache Tomcat

  • 添加服务器,窗口 > 首选项 > 服务器 > 运行时环境 > 添加
  • 选择 Apache Tomcat 8.0(或您正在使用的任何版本)并选择下一步。
  • 选择Tomcat安装目录并完成。

现在一切准备就绪,可以出发了。创建一个新的 SAPUI5 项目(比如 myProject),添加一些代码。要在 tomcat 上运行它,请右键单击项目,选择“运行方式”>“在服务器上运行”。选择您的 Tomcat 服务器,下一步并完成。您的项目将在您的服务器上启动并运行,网址为 http://localhost:8080/myProject/


0
投票

“预加载失败”消息不应该是致命错误;库预加载文件是可选的捆绑优化,以减少 HTTP 请求的数量。

https://github.com/SAP/openui5/issues/119

我认为你可以忽略这个警告。我在加载

Cross origin requests
时遇到了
Component.js
问题,使用
python -m SimpleHTTPServer
解决了这个问题。你需要的只是一个服务器,选择你喜欢的。


0
投票

Daniel
我推荐您以 SAPUI 演练 作为起点。这是有关如何构建 SAPUI5 应用程序的分步指南/教程,包含有关基础知识和最佳实践的说明。
对于基础知识,您只需要一个编辑器和一个浏览器(没有网络服务器)。
这个 git 存储库包含所有演练步骤作为单独的分支。


0
投票
这是一个寻呼机 SAP UI5 应用程序的示例,其中

    带有表格的 XMLView
  • 带有 JSONModel 的控制器
  • 数据绑定表中的 JSONModel
SAP 资源的版本不是最新的,但它们(仍然!)可以工作。

<!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 服务器来提供此服务。


-1
投票
SAP UI5 只是一堆用于开发前端的 UI 库,就像 jQuery 等其他库一样。现在的问题是如何配置 Apache 来提供这些文件?这是服务文件的基本 Apache 配置,

此页面可能是一个很好的起点。

© www.soinside.com 2019 - 2024. All rights reserved.