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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AR + 通信,虚实结合让工作协同从线上到「现场」

在数字经济无所不在的当下&#xff0c;千行百业都与数智化办公接轨并因其实现转型升级。关注【融云 RongCloud】&#xff0c;了解协同办公平台更多干货。 升级的背后&#xff0c;是利用技术把工作用更自然的方式连接起来&#xff0c;让整个工作流协同更顺、体验更好。 而其中…

小白备战蓝桥杯:Java常用API

目录 一、什么是API 二、API帮助文档的使用 三、String String中的成员方法都不会修改原字符串 String是啥&#xff1f; String常见构造方法 equals&#xff1a;字符串比较&#xff08;区分大小写&#xff09;​编辑 equalsIgnoreCase&#xff1a;字符串比较&#xff0…

【接口自动化测试入门】从0到1落地接口自动化测试!

前段时间写了一系列自动化测试相关的文章&#xff0c;当然更多的是方法和解决问题的思路角度去阐述我的一些观点。这篇文章来聊聊新手如何从零到一落地实践接口自动化测试。 为什么要做接口测试 测试理念的演变 早些时候&#xff0c;软件研发交付流程大多遵循V型或W型的瀑布…

Java se之类和对象

目录 类的定义格式如何去自定义this的引用如何初始化对象构造方法的定义和使用 类的定义格式 class ClassName{ //属性(成员变量) //行为(成员方法) } 1>变量与方法 1.成员变量:普通成员变量 静态成员变量 2.成员方法:普通成员方法 静态成员方法 其中的静态变量与方法,在后…

文件同步及实现简单监控

1. 软件简介 rsync rsync 是一款开源的、快速的、多功能的、可实现全量及增量的本地或远程 数据同步备份的优秀工具。在同步备份数据时&#xff0c;默认情况下&#xff0c;Rsync 通过其 独特的“quick check”算法&#xff0c;它仅同步大小或者最后修改时间发生变化的文 件或…

1146-table performance-schema.session_variables don‘t exits打卡navicat连接MySQL报错

navicat连接MySQL时报错&#xff1a; 管理员权限打开cmd 输入下面代码&#xff1a; mysql_upgrade -u root -p --force输入密码 然后就可以正常连接了。 mysql_upgrade检查所有数据库中与mysql服务器当前版本不兼容的所有表。 mysql_upgrade也会升级系统表&#xff0c;以便你…

学习spring、springmvc、mybatis、ssm所有可能用到的依赖总结,父工程pom文件依赖,<packaging>pom</packaging>

1、父工程pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/PO…

idea报错——Access denied for user ‘root‘@‘localhost‘ (using password: YES)

项目场景&#xff1a; 使用idea启动SpringBoot项目报错&#xff0c;可以根据提示看到是数据库的原因&#xff0c;显示使用了密码&#xff0c;具体报错信息如下&#xff1a; 解决方案&#xff1a; 第一步&#xff1a;先去配置文件里面查看连接MySQL的url是否正确&#xff0c;如果…

微前端 -- wujie 预加载和原理 无界传参

目录 wujie 预加载和原理 原理解析 MessageChannel 无界传参 1.全局变量 2.Props 3.event bus wujie 预加载和原理 提前把无界实例创建好 runPreload 赋值给sandbox.preload 预先加载好 startApp 判断是否有preload 需要从wujie的实例导出preloadApp,参数跟startApp 一…

frp内网穿透部署,轻松实现内网服务对外访问

FRP&#xff08;Fast Reverse Proxy&#xff09;是一种轻量级、高性能的反向代理工具&#xff0c;利用反向代理技术将公网请求转发至内网服务器上&#xff0c;并将内网服务器的响应再次转发至公网请求者。在实现内网穿透时&#xff0c;FRP能够将公网与内网之间的隔离突破&#…

互联网Java工程师面试题·RabbitMQ篇

目录 1、什么是 rabbitmq 2、为什么要使用 rabbitmq 3、使用 rabbitmq 的场景 4、如何确保消息正确地发送至 RabbitMQ&#xff1f; 如何确保消息接收方消费了消息&#xff1f; 5、如何避免消息重复投递或重复消费&#xff1f; 6、消息基于什么传输&#xff1f; 7、消息如…

苹果mac电脑如何彻底删除卸载软件?

在苹果电脑上安装和使用软件非常容易&#xff0c;但是卸载软件却可能会变得复杂和困难。不像在Windows上&#xff0c;你不能简单地在控制面板中找到已安装的程序并卸载它们。因此&#xff0c;在这篇文章中&#xff0c;我们将讨论苹果电脑怎么彻底删除软件。 CleanMyMac X全新版…

el-tooltip (element-plus)修改长度

初始状态&#xff1a; 修改后&#xff1a; 就是添加 :teleported"false"&#xff0c;问题解决&#xff01;&#xff01;&#xff01; <el-tooltipeffect"dark"content"要求密码长度为9-30位&#xff0c;需包含大小写字母、数字两种或以上与特殊字…

AtCoder ABC周赛2023 11/4 (Sat) D题题解

目录 原题截图&#xff1a; 题目大意&#xff1a; 主要思路&#xff1a; 注意事项&#xff08;很多人再这个地方掉坑&#xff09;&#xff1a; 代码&#xff1a; 原题截图&#xff1a; 题目大意&#xff1a; 给你两个数组&#xff08;A和B)长度都为n&#xff0c;然你求出一…

【Spring 源码】 贯穿 Bean 生命周期的核心类之 AbstractAutowireCapableBeanFactory

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…

『 C++ 』BinarySearchTree搜索二叉树

文章目录 前言 &#x1f995;二叉搜索树的概念 &#x1f995;搜索二叉树的初始化 &#x1f995;Insert( )插入函数 &#x1f995;&#x1f47e; InsertR( ) 插入函数(递归) InOrder( ) 中序遍历打印 &#x1f995;Find( ) 查找函数 &#x1f995;&#x1f47e; Find( ) 查找函数…

C++新经典模板与泛型编程:用成员函数重载实现is_base_of

用成员函数重载实现is_base_of std::is_base_of是一个C 11标准中用于判断某个类是否是另一个类父类的类模板。 #include "killCmake.h"#include<string>using namespace std;class A { };class B : public A { public:B(int x): x_(x){} private:int x_; };/…

使用 GROUP BY 进行数据库分析:以图书销售数据库为例

让我们通过一个简单但实用的例子来理解 GROUP BY 的使用。我们将以一个图书销售数据库为例。这个数据库包含两张表&#xff1a;一张是图书信息表 (books)&#xff0c;另一张是销售记录表 (sales)。我们会先创建这两张表&#xff0c;然后插入一些数据&#xff0c;并展示如何使用…

PHP对接企业微信

前言 最近在做项目中&#xff0c;要求在后台管理中有企业微信管理的相关功能。相关准备工作&#xff0c;需要准备好企业微信账号&#xff0c;添加自建应用&#xff0c;获得相应功能的权限&#xff0c;以及agentid、secre等。 参考文档&#xff1a; 企业微信开发文档 功能实现 因…

2、Redis变慢原因排查(下)

感觉Redis变慢了&#xff0c;这些可能的原因你查了没 &#xff1f;(下) Redis变慢排查的上一篇【感觉Redis变慢了&#xff0c;这些可能的原因你查了没 &#xff1f;(上)】&#xff0c;我们是基于Redis命令为入口&#xff0c;比如命令使用不得当&#xff0c;bigkey问题&#xf…