SAP UI5 之Bootstrap（引导）笔记二

已于 2023-04-30 15:14:50 修改
阅读量988 收藏 1
点赞数
分类专栏： SAP UI5 文章标签： bootstrap 笔记 javascript
于 2023-04-30 12:45:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45824905/article/details/130447587
版权
文章介绍了如何使用VisualStudioCode设置UI5开发环境，包括在index.html中添加script标签来加载和初始化SAPUI5，创建index.js文件作为应用入口点，以及启动UI5服务进行本地开发和调试。引导加载过程中，详细说明了各属性的作用，如数据属性data-sap-ui-theme和data-sap-ui-resourceroots等。
摘要由CSDN通过智能技术生成

文章目录

Setting up Visual Studio Code for UI5 development

学习链接

Setting up Visual Studio Code for UI5 development

1.0 官网 Walkthrough学习-Bootstrap 引导加载

Bootstrap加载引导过程

在使用 SAPUI5 执行某些操作之前，我们需要加载并初始化它。加载和初始化SAPUI5的过程称为 引导 。

1.0.1 在 index.html中新增script标签

标签的意义：

从服务中加载UI5框架，初始化核心模块
	•  src: 标签是指定加载的核心库，初始化SAP UI5运行所需要的资源
	•  data-sap-ui-theme: 默认主题，（SAPUI5控制支持不同的主题）
	•  data-sap-ui-libs: 指定所需的UI库
	•  data-sap-ui-compatVersion: 浏览器的版本
	•  data-sap-ui-async: 异步加载过程（后面解释）
	•  data-sap-ui-onInit：告诉 SAPUI5 核心，命名空间中的资源与位于同一文件夹
 data-sap-ui-resourceroots: '{ "sap.ui.demo.walkthrough": "./"}'(根目录后面解释)

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SAPUI5 Walkthrogh</title>
        <script
        id="sap-ui-bootstrap"
        src="https://sdk.openui5.org/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_belize"
        data-sap-ui-libs="sap.m"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true"
        data-sap-ui-onInit="module:sap/ui/demo/walkthrough/index"
        data-sap-ui-resourceroots='{
            "sap.ui.demo.walkthrough": "./"
        }'>
        </script>
    </head>
    <body>
        <div>Hello SAP UI5</div>
    </body>
</html>

1.0.2 在webapp 下面新增index.js文件

在这里插入图片描述
新增代码

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

1.0.3启动UI5的服务

打开浏览器输入： http://localhost:8080/index.html

首次加载会比较慢，
在这里插入图片描述
打开浏览器F12进调试模式-开发者模式
点击网络看到UI5 引导程序加载的过程中的资源，
在这里插入图片描述

Austin_YB
关注
专栏目录
作为一名 ABAP 资深顾问，下一步可以选择哪一门 SAP 技术作为主攻方向？
汪子熙的专家技术分享
06-14 774
这是 Jerry 2021 年的第 41 篇文章，也是汪子熙公众号总共第 318 篇原创文章。 一位朋友向我发起了知乎咨询： 关于这个话题，Jerry 曾经写过一篇文章：ABAP开发人员未来应该学些什么。 其英文版发布在 SAP 社区博客上并被管理员置顶，获得了超过一万阅读量。 当时文章里我建议的四个学习方向是： (1) 熟悉一门函数式编程语言 (2) 了解 Spring (3) 熟悉 JavaScript (4) 了解一种 NoSQL 数据库 后来我补充了第五点，熟悉 SAP Cloud Platf
SAP UI5 的 sap-ui-bootstrap script 脚本标签各属性解析
汪子熙的专家技术分享
10-05 346
看这段测试代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SAPUI5 Walkthrough</title> <script id="sap-ui-bootstrap" src="./resources/sap-ui-core.js" data-sap-ui-theme="sap_fiori_3" data-sap-ui-lib
SAPUI5基础知识3 - 引导过程（Bootstrap）
SAP领域技术博客
05-30 1224
本文介绍了SAPUI5引导过程的概念，并通过示例程序，展示了为SAPUI5应用程序添加引导过程的步骤。
WalkthroughStep02_bootstrap SAP UI5 加载SAPui lib bootstrap
zb470434763的博客
03-27 275
1、加载SAPui lib src：指加载lib 的路径 data-sap-ui-theme:指UI5的主题，可以在resources\sap\ui\commons\themes下找到所有的主题 初始化UI,调用alert函数弹出窗口，显示消息。
SAP UI5 Bootstrap 脚本的实现原理
汪子熙的专家技术分享
09-01 903
Can I change the hard code ID? In SAP help the UI5 bootstrap logic is explained: Bootstrapping: Loading and Initializing SAPUI5 in HTML Pages. However, I was asked by my colleague about one question: the script id below is hard coded. Can I change its id t
SAP UI5 应用开发教程的学习目录 - 循序渐进，由浅入深，适合不同水平的 SAP UI5 开发人员
热门推荐
汪子熙的专家技术分享
10-05 2万+
笔者在业余时间设计了这份 SAP UI5 学习教程，把开发一个完整的 SAP UI5 应用的流程，拆分成若干个步骤，力求每个步骤里，把涉及到的知识点都涵盖到。建议零基础或者对 SAP UI5 知之甚少的 SAP UI5 初学者，按照顺序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字讲解，自己动手，以加深理解。 对于已经有一定基础的 SAPUI5 开发人员，可以通过本文的目录，跳过前面一部分比较基础的章节，直接挑选对自己工作项目有关，或者包含某些知识点自己尚未掌握的章节来有针对性地学习。
2. 千里之行，始于足下 - SAP UI5 框架的引导过程(Bootstrap)讲解
汪子熙的专家技术分享
10-05 5627
本教程的前一篇 Hello world 的文章，我们只是了解了一个最基本的 index.html 页面的开发方式，尚未真正接触到 SAP UI5. 从本文开始，我们将会在前一步骤的 index.html 的基础上，导入 SAP UI5 的库文件，真正开始 SAP UI5 的学习。 同本教程前一步骤一样，请在你的 SAP UI5 工程文件夹下新建一个 02 文件夹，然后在 02 文件夹里再创建一个 webapp 文件夹。 按照本文完成 02 步骤后，你的 Visual Studio Code 里呈现的 SAP
时尚的bootstrap5管理后台UI框架 - Neptune
04-17
Bootstrap5是目前非常流行的一款前端开发框架，尤其在构建用户界面（UI）方面表现出色，尤其是在制作管理后台界面时。Neptune是一款基于Bootstrap5的管理后台UI框架，它以其时尚的设计和丰富的功能，为开发者提供了...
SAP UI5基础知识:开发环境及程序结构简介
01-13
SAP UI5 的程序结构中，`<script id="sap-ui-bootstrap">` 是启动 UI5 应用的关键，它加载了 sap-ui-core.js 文件，包含了 jQuery、jQuery-ui-position 和 UI5 核心。`data-sap-ui-libs` 指定了使用的库，`data-sap-...
99. 深入探讨 SAP UI5 本地开发环境里的 package.json 和 ui5.yaml 配置文件
汪子熙的专家技术分享
06-18 1109
本教程之前介绍了 SAP UI5 本地开发环境的搭建。里面涉及到了 package.json 和 ui5.yaml 这两个文件，因为这两个文件同 SAP UI5 本身的开发知识关系不是特别大，所以我没有深入展开介绍。但是有部分朋友在按照本教程的步骤自己动手开发时，遇到了一些和开发环境相关的问题，在文件里向我问起这两个文件的作用，以及生成方式。本步骤就专门深入展开论述。本文分析了 SAP UI5 本地开发环境里的 package.json 和 ui5.yaml 这两个配置文件的存在原因和被解析的场景。...
Bootstrap学习与引导
qq_42335440的博客
07-04 358
Bootstrap:让web开发更迅速、简单：可以直接抄，抄过去就能用。链接：http://www.bootcss.com/Bootstrap核心学习：全局Css样式：布局容器：（★）布局容器：相当于一张画布，后期再画布中添加页面的内容。 翻译：在绘画之前，先准备一个画布，两个画布不要重叠。测试代码：&lt;!DOCTYPE html&gt;&lt;html lang="zh-CN"&gt;  &...
.Net8的AOT引导程序BootStrap
2301_78834737的博客
07-16 535
Net8的本地预编机器码AOT，它几乎进行了100%的自举。微软为了摆脱C++的钳制，做了很多努力。也就是代码几乎是用C#重写，包括了虚拟机，GC，内存模型等等。而需要C++做的，也就仅仅是引导程序，本篇通过代码来看下这段至关重要的引导程序的运作模式。.Net8的AOT引导程序BootStrap。
SAPUI5 (02) - OpenUI5 Hello World
王敏的专栏
12-21 7534
Hello World详细解释
OpenUI5 (SAPUI5) js框架简单介绍
matinal 當冬夜漸暖 。公众号：matinal
01-21 5376
点击进入：OpenUI5 (SAPUI5) js框架简单介绍 更多内容可以关注我的公众号 公众号：SAP Technical
SAP前端——使用SAPUI5来创建Web应用UI
天外野草技术专栏
06-23 6923
前言对于SAP产品开发而言，功能需求的实现当之无愧， 但是前端UI展示一直被吐槽，不够友好的界面，较为繁琐的操作流程，给用户增添了很多学习和使用上的烦恼。但是自从SAPUI5诞生以来，移动显示，多元化的页面，不仅美观，更加实用便捷，下面我们来看看如何简单创建一个SAPUI5的应用。首页创建首先一个web应用程序，需要一个入口文件index.html:<!DOCTYPE HTML> <html>
Window.history API学习笔记
常备不懈
11-12 630
在现代前端开发中，单页应用（SPA）的流行让我们对于页面的浏览历史管理需求愈加明显。`window.history` API作为浏览器提供的原生API，能够帮助开发者更加细致地控制用户的导航体验。本文将介绍`window.history` API的几个常见方法，并探讨它们的使用场景。
Spring学习笔记_32——事务TransactionStatus接口
LuckyLay的博客
11-12 293
TransactionStatus是Spring框架中用于表示事务状态的一个关键接口。它提供了一系列方法来查询和控制事务的执行状态，对于编程式事务管理尤为重要。TransactionStatus接口主要用来存储事务执行的状态，并且接口中定义了一组方法，用来判断或者读取事务的状态信息，
QT开发笔记之小知识
ZaiLuShang2121的博客
11-12 331
QT学习笔记 小知识点
计算机网络详细笔记【湖科大教书匠，内含B站链接】
最新发布
qq_25467441的博客
11-14 217
https://blog.csdn.net/weixin_45488428/article/details/115102326?ops_request_misc=%257B%2522request%255Fid%2522%253A%252228292A6B-6BE1-4A80-BEA2-234F3AA87798%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=28292A6B-6BE1-4A80-BEA2-2
深入理解Bootstrap5：全套开发笔记详解
资源摘要信息:"Bootstrap 5 全套笔记" Bootstrap 是一个流行的前端框架，用于开发响应式和移动优先的网站。Bootstrap 5 是该框架的最新版本，提供了许多新特性和改进。本笔记将详细解释 Bootstrap 5 的核心知识点和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值