当前位置: 首页 > news >正文

SAP UI5 walkthrough step2 Bootstrap

我的理解,这就是一个引导指令

1.我们右键打开命令行--执行  ui5 use OpenUI5

2.执行命令:ui5 add sap.ui.core sap.m themelib_sap_horizon

执行完之后,会更新 yaml 文件

3.修改index.html 

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>UI5 Walkthrough</title><scriptid="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>

In this step, we load the SAPUI5 framework from the webserver provided by UI5 Tooling and initialize the core modules with the following configuration options:

  • The id attribute of the <script> tag has to be exactly "sap-ui-bootstrap" to ensure proper booting of the SAPUI5 runtime.
  • The src attribute of the <script> tag tells the browser where to find the SAPUI5 core library – it initializes the SAPUI5 runtime and loads additional resources, such as the libraries specified in the data-sap-ui-libs attribute.

  • The SAPUI5 controls support different themes. We choose sap_horizon as our default theme.

  • We specify the required UI library sap.m, which contains the UI controls we need for this tutorial.

  • To make use of the most recent functionality of SAPUI5 we define the compatibility version as edge.

  • We configure the bootstrapping process to run asynchronously. This means that the SAPUI5 resources can be loaded simultaneously in the background for performance reasons.

  • We define the module to be loaded initially in a declarative way. With this, we avoid directly executable JavaScript code in the HTML file. This makes your app more secure. We'll create the script that this refers to further down in this step.
  • We tell SAPUI5 core that resources in the ui5.walkthrough namespace are located in the same folder as index.html.

注意 这里src 的输入值是resources/sap-ui-core.js

我们需要先将resources文件先建立,并从从”https://openui5.hana.ondemand.com/resources/sap-ui-core.js“中将此文件保存进去

或者直接将src 的输入值改为 https://openui5.hana.ondemand.com/resources/sap-ui-core.js

这样之后才能正常加载

4.在webapp文件下创建一个index.js的文件

sap.ui.define([], () => {"use strict";alert("UI5 is ready");
});

5.输入npm start  结果如下

相关文章:

  • Html转PDF,前端JS实现Html页面导出PDF(html2canvas+jspdf)
  • PTA:哈夫曼编码
  • class067 二维动态规划【算法】
  • 自然语言处理:电脑如何理解我们的语言?
  • Spring Cloud + Vue前后端分离-第3章 SpringBoot项目技术整合
  • spring security面经-字节飞书生产力工具后端一面
  • Google Bard vs. ChatGPT 4.0:文献检索、文献推荐功能对比
  • Linux AMH服务器管理面板本地安装与远程访问
  • 30 剑指offer-动态规划求正则表达式匹配
  • 第九天:信息打点-CDN绕过篇amp;漏洞回链amp;接口探针amp;全网扫描amp;反向邮件
  • 数据结构和算法专题---2、算法思想
  • 把 Windows 11 装进移动硬盘:Windows 11 To Go
  • UDP协议实现群聊
  • C++ 多态性(Polymorphism)和 虚函数(Virtual Functions)
  • Kubernetes里的DNS;API资源对象ingress;Kubernetes调度;节点选择器NodeSelector;节点亲和性NodeAffinity
  • __proto__ 和 prototype的关系
  • 2017 前端面试准备 - 收藏集 - 掘金
  • 30秒的PHP代码片段(1)数组 - Array
  • Cookie 在前端中的实践
  • ES6核心特性
  • es的写入过程
  • in typeof instanceof ===这些运算符有什么作用
  • JavaScript 奇技淫巧
  • Java新版本的开发已正式进入轨道,版本号18.3
  • python3 使用 asyncio 代替线程
  • Shadow DOM 内部构造及如何构建独立组件
  • Vue 2.3、2.4 知识点小结
  • VuePress 静态网站生成
  • 从零开始的无人驾驶 1
  • 道格拉斯-普克 抽稀算法 附javascript实现
  • 机器学习学习笔记一
  • 如何打造100亿SDK累计覆盖量的大数据系统
  • 设计模式走一遍---观察者模式
  • 什么是Javascript函数节流?
  • 因为阿里,他们成了“杭漂”
  • 最近的计划
  • MyCAT水平分库
  • 扩展资源服务器解决oauth2 性能瓶颈
  • 容器镜像
  • 选择阿里云数据库HBase版十大理由
  • ​520就是要宠粉,你的心头书我买单
  • ‌Excel VBA进行间比法设计
  • #我与Java虚拟机的故事#连载14:挑战高薪面试必看
  • (09)Hive——CTE 公共表达式
  • (附源码)计算机毕业设计SSM基于java的云顶博客系统
  • (原创)攻击方式学习之(4) - 拒绝服务(DOS/DDOS/DRDOS)
  • * CIL library *(* CIL module *) : error LNK2005: _DllMain@12 already defined in mfcs120u.lib(dllmodu
  • ***php进行支付宝开发中return_url和notify_url的区别分析
  • .NET 4.0中的泛型协变和反变
  • .NET CF命令行调试器MDbg入门(一)
  • .Net OpenCVSharp生成灰度图和二值图
  • .net 调用海康SDK以及常见的坑解释
  • .NET 中的轻量级线程安全
  • .net利用SQLBulkCopy进行数据库之间的大批量数据传递
  • /bin/bash^M: bad interpreter: No such file ordirectory