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>
	<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>

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  结果如下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/228132.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java安全之Commons Collections6分析

CC6分析 import org.apache.commons.collections.*; import org.apache.commons.collections.functors.ChainedTransformer; import org.apache.commons.collections.functors.ConstantTransformer; import org.apache.commons.collections.functors.InvokerTransformer; impo…

[⑧ADRV902x]: Digital Pre-Distortion (DPD)学习笔记

前言 DPD 数字预失真技术&#xff0c;是一种用于抑制功率放大器非线性失真的方法。 它通过在信号输入功率放大器&#xff08;PA&#xff09;之前插入一个预失真模块&#xff0c;对输入信号进行适当的调制&#xff0c;以抵消功率放大器引起的非线性失真&#xff0c;使功率放大器…

线上盲盒扭蛋机,开启潮玩新玩法

盲盒近几年非常火爆&#xff0c;因其不确定性、随机性吸引着盲盒爱好者&#xff0c;引起了潮玩文化风潮。扭蛋机是盲盒的一种新抽取模式&#xff0c;线上扭蛋机小程序在具有盲盒的优势外&#xff0c;还具有较大吸引力&#xff0c;用户参与率较高&#xff0c;这也使得扭蛋机成为…

C++_命名空间(namespace)

目录 1、namespace的重要性 2、 namespace的定义及作用 2.1 作用域限定符 3、命名空间域与全局域的关系 4、命名空间的嵌套 5、展开命名空间的方法 5.1 特定展开 5.1 部分展开 5.2 全部展开 结语&#xff1a; 前言&#xff1a; C作为c语言的“升级版”&#xff0c;其在…

西南科技大学C++程序设计实验十一(泛型程序设计与C++标准模板库)

一、实验目的 1. 掌握泛型程序设计概念; 2. 掌握vector、deque、list容器使用方法; 3.了解set、map容器使用方法。 二、实验任务 1.分析完善以下程序,理解vector容器使用方法: #include <iostream> __#include <vector>_______ //补充vector模板头文件 …

(C语言实现)高精度除法 (洛谷 P2005 A/B Problem II)

前言 本期我们分享用C语言实现高精度除法&#xff0c;可通过该题测试点我点我&#xff0c;洛谷 p2005。 那么话不多说我们开始吧。 讲解 大家还记不记得小学的时候我们是怎么做除法的&#xff1f;我们以1115为例。 我们的高精度除法也将采用这个思路进行&#xff0c;分别用两…

selenium 解决 id定位、class定位中,属性值带空格的解决办法

一、前置说明 selenium遇到下面这种元素&#xff1a; <th id"demo id" class"value1 value2 value3 ">1、虽然id一般不会有空格&#xff0c;但是前端错误的这种写法(如下图)&#xff0c;会造成使用id定位不到元素&#xff0c;如&#xff1a; find…

Windows本地如何添加域名映射?(修改hosts文件)

1. DNS(域名系统) Domain Name System(域名系统)&#xff1a;为了加快定位IP地址的速度, 将域名映射进行层层缓存的系统. 目的&#xff1a;互联网通过IP&#xff08;10.223.146.45&#xff09;定位浏览器建立连接&#xff0c;但是我们不易区别IP&#xff0c;为了方便用户辨识I…

SAP 后继物料简介

后继物料(Discontinued Part)是SAP系统提供的一项用于物料继承与物料永久性替换的功能。在企业的日常生产业务中,经常会出于技术原因或成本原因进行大批量的物料替换或物料升级。比如说,企业可以用一种可靠性更高的组件替换先前使用的组件,或者出于节省成本的目的,使用一…

Google Gemini Pro 测试

谷歌新发布了Gemini模型&#xff0c;说是吊打GPT4&#xff0c;上手使用了下&#xff0c;感觉一般&#xff0c;没有感觉到预期的吊打。下面是与Bard的对话。

条码生成器与Zint使用

文章目录 目的条形码zint支持条形码种类下载编译qt pro配置code保存条形码目的 1: 了解条形码数据理论知识 2: 了解zint第三方库相关, 如何编译引用到项目中 条形码 条形码(Barcode)一维码 和二维码(QR code)都是用于存储信息的图形化表示方式,通常应用于商品标识、库…

led护眼灯真的能护眼吗?热门口碑好的护眼台灯推荐

2023年我国青少年近视率为53.6%&#xff0c;其中6岁以下儿童近视率为14.5%&#xff0c;小学生近视率为36%&#xff0c;初中生近视率为71.6%&#xff0c;高中生近视率为81%&#xff0c;大学生近视率为90%。 也就是孩子上了大学&#xff0c;十个里面有九个是近视&#xff0c;不戴…

【C语言】vfprintf函数

vfprintf 是 C 语言中的一个函数&#xff0c;它是 fprintf 函数的变体&#xff0c;用于格式化输出到文件中。vfprintf 函数接受一个格式化字符串和一个指向可变参数列表的指针&#xff0c;这个列表通常是通过 va_list 类型来传递的。vfprintf 函数的主要用途是在需要处理不定数…

【文件上传系列】No.1 大文件分片、进度图展示(原生前端 + Node 后端 Koa)

分片&#xff08;500MB&#xff09;进度效果展示 效果展示&#xff0c;一个分片是 500MB 的 分片&#xff08;10MB&#xff09;进度效果展示 大文件分片上传效果展示 前端 思路 前端的思路&#xff1a;将大文件切分成多个小文件&#xff0c;然后并发给后端。 页面构建 先在页…

机器学习实验二:决策树模型

系列文章目录 机器学习实验一&#xff1a;线性回归机器学习实验二&#xff1a;决策树模型机器学习实验三&#xff1a;支持向量机模型机器学习实验四&#xff1a;贝叶斯分类器机器学习实验五&#xff1a;集成学习机器学习实验六&#xff1a;聚类 文章目录 系列文章目录一、实验…

公众号提高数量

一般可以申请多少个公众号&#xff1f;目前公众号申请数量的规定是从2018年底开始实施的&#xff0c;至今没有变化。规定如下&#xff1a;1、个人可以申请1个个人主体的公众号&#xff1b;2、企业&#xff08;有限公司&#xff09;可以申请2个公众号&#xff1b;3、个体户可以申…

数组指针与函数指针

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…

jetbrains卡顿(Pycharm等全家桶)终极解决方案,肯定解决!非常肯定!

话越短&#xff0c;越有用&#xff0c;一共四种方案&#xff0c;肯定能解决&#xff01;&#xff01;&#xff01;非常肯定&#xff01;&#xff01; 下面四种解决方案&#xff0c;笔者按照实际体验后的结果&#xff0c;按照优先级从高到低排序。你只要按顺序试试就知道了。 m…

labelme等标注工具/数据增强工具输出JSON文件格式检查脚本

标注的文件太多了&#xff0c;还有用数据增强工具生成了一票的新数据。在转换或使用训练时候会报错&#xff0c;错误原因是json中语法有问题&#xff0c;这样会中断程序运行&#xff0c;调试造成很大困扰。 检查确实最后有问题&#xff0c;多写了一次 写一个脚本&#xff0c;用…

Leetcode—219.存在重复元素II【简单】

2023每日刷题&#xff08;五十三&#xff09; Leetcode—219.存在重复元素II 实现代码 class Solution { public:bool containsNearbyDuplicate(vector<int>& nums, int k) {unordered_map<int, int> m;int n nums.size();for(int i 0; i < n; i) {if(m…