SAP UI5 官方教程学习记录

这篇具有很好参考价值的文章主要介绍了SAP UI5 官方教程学习记录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近有闲跟着官方的Get Started教程学习了UI5,记录一下自己学习中遇到的几个问题。

本文链接:https://www.cnblogs.com/hhelibeb/p/17835722.html

1,文档和实际代码的一致性

注意文档可能不是最新的,和实际示例代码有出入,比如本文写作时,Data Binding Tutorial里面的Step 1: No Data Binding
教程里写的代码是,

sap.ui.require([
	"sap/m/Text"
], function (Text) {
	"use strict";

	// Attach an anonymous function to the SAPUI5 'init' event
	sap.ui.getCore().attachInit(function () {
		// Create a text UI element that displays a hardcoded text string
		new Text({text: "Hi, my name is Harry Hawk"}).placeAt("content");
	});
});

示例的实际代码却是,

sap.ui.require([
	"sap/ui/core/Core",
	"sap/m/Text"
], function (
	Core,
	Text
) {
	"use strict";

	// Chain an anonymous function to the SAPUI5 'ready' Promise
	Core.ready().then(function () {
		// Create a text UI element that displays a hardcoded text string
		new Text({text: "Hi, my name is Harry Hawk"}).placeAt("content");
	});
});

这是因为在新版UI5中,attachInit方法已经Deprecated。
通常这样的不一致没有太大影响,但某些不一致也有可能会导致程序运行失败,使用时需要注意。
截止目前,我已经向文档提出2个PR用来修复这类不一致导致的程序运行失败问题。

2,例子中的resources/sap-ui-core.js如何引用?

sap-ui-core.js是UI5的核心库,大部分教程的index.html都会有类似代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>UI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src="resources/sap-ui-core.js"
		data-sap-ui-theme="sap_horizon"
		data-sap-ui-libs="sap.m"
		data-sap-ui-compatVersion="edge"
		data-sap-ui-async="true"
		data-sap-ui-onInit="module:ui5/walkthrough/index"
		data-sap-ui-resourceroots='{
			"ui5.walkthrough": "./"
		}'>

	</script>
</head>
<body>
<div>Hello World</div>
</body>
</html>

其中src="resources/sap-ui-core.js"用来引用sap-ui-core.js,对于本地的项目,我们可以替换链接为:

src="https://ui5.sap.com/resources/sap-ui-core.js"

或者安装SAP Fiori Tools代理,并且通过ui5.yaml配置来为/resource路径设置代理,这样就不需要修改index.html中的src了。以下是部分配置代码参考,

server:
  customMiddleware:
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        ignoreCertError: false 
        ui5:
          path:
            - /resources
            - /test-resources
          url: https://ui5.sap.com

3,data-sap-ui-resourceroots

注意需要设置前文index.html中的data-sap-ui-resourceroots,这个东西可以修改应用中资源的加载路径,如果没有指定"ui5.walkthrough": "./",那么加载资源时会加载到/resource下,导致失败。
相关阅读:SAP UI5 应用 index.html 里 data-sap-ui-resourceroots 指令的含义和作用文章来源地址https://www.toymoban.com/news/detail-747363.html

到了这里,关于SAP UI5 官方教程学习记录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 以前编写好能够正常运行的 SAP UI5 代码,几个月后忽然不能运行了该怎么办?

    以笔者本套教材为例,每一步骤的源代码都托管在本人 Github 仓库里,每次上传之前,都确保本地测试通过。 但笔者编写过程中发现,之前测试通过的代码,可能几个月之后再执行,就会遇到白屏现象,即应用无法正常加载,或者无法在调试模式下正常加载。 举个具体的例子

    2024年02月03日
    浏览(37)
  • Ubuntu学习---跟着绍发学linux课程记录(第4部分)

    Ubuntu的学习过程的笔记分为4个部分来记录: 1、Ubuntu学习—跟着绍发学linux课程记录(第1部分) 2、Ubuntu学习—跟着绍发学linux课程记录(第2部分) 3、Ubuntu学习—跟着绍发学linux课程记录(第3部分) 4、Ubuntu学习—跟着绍发学linux课程记录(第4部分) 视频链接: Ubuntu 21.04乌班

    2024年02月08日
    浏览(46)
  • Ubuntu学习---跟着绍发学linux课程记录(第二部分)

    Ubuntu的学习过程的笔记分为4个部分来记录: 1、Ubuntu学习—跟着绍发学linux课程记录(第1部分) 2、Ubuntu学习—跟着绍发学linux课程记录(第2部分) 3、Ubuntu学习—跟着绍发学linux课程记录(第3部分) 4、Ubuntu学习—跟着绍发学linux课程记录(第4部分) 视频链接: Ubuntu 21.04乌班

    2024年02月09日
    浏览(38)
  • Ubuntu学习---跟着绍发学linux课程记录(第一部分)

    Ubuntu的学习过程的笔记分为4个部分来记录: 1、Ubuntu学习—跟着绍发学linux课程记录(第1部分) 2、Ubuntu学习—跟着绍发学linux课程记录(第2部分) 3、Ubuntu学习—跟着绍发学linux课程记录(第3部分) 4、Ubuntu学习—跟着绍发学linux课程记录(第4部分) 视频链接: Ubuntu 21.04乌班

    2024年02月10日
    浏览(32)
  • [UI5 常用控件] 01.Text

    Text是UI5中最常用的控件之一。 记录Text常用的功能。 控件路径是sap.m.Text Controller View 普通绑定: 别名绑定: binding绑定: 别名binding绑定: bindText bindText with alias bindProperty bindElement setText getText

    2024年01月24日
    浏览(40)
  • [UI5] ODATA V4中的CRUD

    ODATA V4在CRUD方面与V2截然不同。 这篇文章简单介绍V4中是如何进行CRUD操作 Model不再有read方法, 一般是把Path绑定到View中进行读取, 如果需要额外的读取数据,可使用如下方法 需要在Context中调用requestObject方法才能实现数据的读取 oModel.bindContext方法需要绑定对应的Entity或者路

    2024年01月21日
    浏览(34)
  • [UI5 常用控件] 09.IconTabBar,IconTabHeader,TabContainer

    本章节记录常用控件 IconTabBar,IconTabHeader, TabContainer 其路径分别是: sap.m.IconTabBar sap.m.IconTabHeader sap.m.TabContainer 在SAP UI5中,IconTabBar 是一种用户界面控件,通常用于创建具有多个标签页的导航界面。它允许用户通过标签切换内容区域,每个标签通常与一个特定的视图或功能相关

    2024年02月20日
    浏览(41)
  • [UI5 常用控件] 02.Title,Link,Label

    本章节记录常用控件Title,Link,Label。 其路径分别是: sap.m.Title sap.m.Link sap.m.Label Title可以结合其他控件一起使用 可以在Panel-headerToolbar-OverflowToolbar中添加Title 记录Link的5种用法: 绑定press事件,不可用状态,绑定地址,下划线,加粗 Labe一般是给Input添加标签时使用 分别是必输

    2024年01月25日
    浏览(37)
  • XILINX VIVADO2018.2官方下载全教程记录.

    毕设涉及FPGA,准备记录一下准备过程。 首先是Vivado的下载过程。 1.进入赛灵思下载官网。(https://www.xilinx.com/support/download/index.html/content/xilinx/en/downloadNav/vivado-design-tools/archive.html) 2.注册用户(已有账号跳过) 按照指示注册好账号(过于简单就不说了。。) 3.登陆上账号,再次

    2024年02月13日
    浏览(86)
  • 官方项目《内容示例》中Common UI部分笔记:Common UI 分场景使用教程

    Common UI给虚幻的UI系统带来了很多新特性,这些新特性往往面向不同的使用场景。目前我看到很多的Common UI教程,都是把这些特性很笼统地展示一遍,这就很容易造成初学者的困惑:“我当前做的这些工作,到底是为了实现什么?”所以本文采用分场景介绍的方式,希望能够

    2024年01月25日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包