SAPUI5基础知识2 - 手动创建一个SAPUI5的项目

1. 前言

在本篇文章中,我们将手动一步一步建立出第一个SAPUI5的 ‘Hello World!’ 项目。

2. 步骤详解

2.1 在BAS中建立Dev Space

进入SAP Business Application Studio的Dev Space Manger,选择创建Dev Space。
在这里插入图片描述

勾选HTML5 Application Template插件,然后选择Create Dev Space。
在这里插入图片描述

2.2 建立项目文件夹

在Get Started页面,点击New Project, 给定项目名称。
在这里插入图片描述

2.3 建立package.json文件

创建node.js项目的“说明书”文件package.json,它定义了项目的基本信息,列出了项目的依赖,定义了项目的脚本命令,以及包含了一些项目的配置信息。

以下是 package.json 文件中的一些常见属性:

  • name:包的名称,必须是唯一的,不能和 npm 仓库中的其他包名称相同。
  • version:包的版本号,必须符合 semver 规范。
  • description:包的简短描述。
  • main:包的入口点,也就是包被引用时默认调用的模块。
  • scripts:定义了一组可以用 npm run 命令执行的脚本命令。
  • dependencies:项目运行所依赖的模块。
  • devDependencies:项目开发所需要的模块,比如测试框架等。
  • peerDependencies:表示当前包兼容的宿主版本。它要求宿主环境必须单独安装依赖。
  • optionalDependencies:如果有一些依赖项在某些环境下无法安装,或者安装失败,你可以把它放在这个属性下面,npm 会尝试安装这些依赖项,但是即使安装失败,也不会导致安装整个程序失败。
  • private:如果设置为 true,则阻止包被发布到 npm 仓库。
  • license:项目的许可证类型。
  • repository:项目代码存放的地方,通常是 git 仓库的地址。

可以在 npm 官方文档(https://docs.npmjs.com/cli/v7/configuring-npm/package-json) 中查看 package.json 文件中所有可能的属性以及其解释。

在此练习中,我们先提供最基础的属性信息。

{"name": "zsapui5.test","version": "1.0.0","description": "My SAPUI5 Test Application","scripts": {"start": "ui5 serve -o index.html"}
}

在这里插入图片描述

2.4 初始化项目内容文件webapp

建立一个webapp文件夹,用于包含所有的应用程序资源。在webapp文件夹内,创建一个index.html的文件。

index.html:它是启动和加载SAPUI5/Fiori应用程序的关键,它定义了应用程序的基本结构和样式,并包含了加载和启动应用程序所需的代码。

在这里插入图片描述

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>My SAPUI5 Test</title>
</head>
<body><div>Hello World!</div>
</body>
</html>

2.5 创建应用程序描述文件manifest.json

manifest.json 是一个配置文件,主要用于描述一个Web应用或者网站的基本信息。它是一个JSON格式的文件,通常位于项目的根目录。这个文件主要用于PWA(Progressive Web App)技术,使得Web应用可以像原生应用一样在用户的设备上安装和运行。

以下是 manifest.json 文件中的一些常见属性:

  • name:应用的名称。
  • short_name:应用的简短名称,主要用于没有足够空间显示完整名称的地方。
  • description:应用的描述信息。
  • start_url:应用启动时打开的URL。
  • display:定义应用运行时的显示模式,如 fullscreen、standalone、minimal-ui 或 browser。
  • background_color:应用启动屏幕的背景颜色。
  • theme_color:应用的主题颜色,影响浏览器地址栏的颜色。
  • icons:应用的图标,可以指定多种尺寸和类型。
  • scope:定义应用的作用域,即应用可以访问的URL范围。
  • orientation:定义应用的默认屏幕方向,如 portrait 或 landscape。

可以在 MDN Web 文档(https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json) 查看 manifest.json 文件中所有可能的属性以及其解释。

在SAPUI5框架下,manifest.json文件用于定义应用程序的配置和设置,以下是manifest.json文件中SAPUI5相关的属性:

  • sap.app:这是一个对象,包含了应用程序的基本信息,如ID、类型、i18n文件的位置、应用程序版本等。
  • sap.ui:这个对象定义了应用程序的UI设置,如技术(例如HTML5)、主题、图标等。
  • sap.ui5:这个对象包含了SAPUI5应用程序的特定设置,如依赖项、模型、路由等。
  • sap.fiori:这个对象包含了Fiori应用程序的特定设置,如注册Fiori启动瓦片。
  • sap.platform:这个对象包含了应用程序的平台特定设置,如SAP Cloud Platform的目标设置。
  • sap.cloud:这个对象包含了SAP Cloud Platform的特定设置,如目标映射。

可以在SAPUI5官方文档(https://sapui5.hana.ondemand.com/#/topic/be0cf40f61184b358b5faedaec98b2da)中查看更多详细信息。

在此练习中,我们先提供最基础的配置属性信息。
在这里插入图片描述

{"_version": "1.58.0","sap.app": {"id": "my.sapui5.test"}
}

2.6 运行应用程序

2.6.1 安装UI5 Tooling

在BAS中打开terminal,同时执行npm i -D @ui5/cli 来安装UI5 Tooling。
在这里插入图片描述

可以看到,执行完成后,项目文件夹下新生成了node_modules文件夹和package-lock.json文件。

node_modules是Node.js项目的一个重要组成部分,这个目录包含了项目所需的所有Node.js模块和库。当你在项目中运行npm install命令时,所有在package.json文件中列出的依赖都会被安装到node_modules目录中。

package-lock.json文件锁定了项目依赖的确切版本,这意味着每次你或其他开发者在同一项目上运行npm install时,将会安装完全相同版本的依赖,从而确保了项目的一致性。

2.6.2 初始化UI5项目

执行ui5 init命令来通过生成ui5.yaml文件来初始化SAPUI5项目。

在这里插入图片描述

在SAP Business Application Studio (BAS)中,Fiori项目的ui5.yaml,ui5-mock.yaml,ui5-local.yaml,ui5-ci.yaml等文件是UI5工具套件(UI5 Tooling)的配置文件,用于定义和配置项目的构建,运行和测试设置。

ui5.yaml:这是UI5工具套件的主要配置文件,定义了项目的基本设置,如项目类型,依赖,构建任务等。

2.6.3 运行应用

执行npm start来启动web服务器来打开一个新的浏览器窗口运行我们刚刚创建的index.html文件。
在这里插入图片描述
在新打开的窗口中,可以看到我们的hello world!应用。
在这里插入图片描述

2.6.4 停止应用

在BAS 的terminal中,通过 ctrl + c 可以关停web server。
在这里插入图片描述
关停服务器后,在应用程序界面通过F5刷新页面的话,将会得到下面的错误消息。
在这里插入图片描述
如果需要再次启动应用程序,则在terminal中再次执行npm start即可。

3. 小结

本文通过一个hello world应用程序,展示了如何手动创建出一个SAPUI5的项目,并如何运行SAPUI5应用程序。
希望本文对你有帮助!

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

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

相关文章

[Linux] shell程序编写

一、shell是什么 Linux严格意义上说的是一个操作系统&#xff0c;我们称之为“核心&#xff08;kernel&#xff09;“ &#xff0c;但我们一般用户&#xff0c;不能直接使用kernel。而是通过kernel的“外壳”程序&#xff0c;也就是所谓的shell&#xff0c;来与kernel沟通。 …

数据读取及分隔方法

文章目录 读取数据1. 读取文本文件2.pandas库读取数据3.读取JSON文件 数据分隔方法1.split()2.re.split()3.splitlines() 读取数据 1. 读取文本文件 读取文本文件&#xff1a;可以使用内置的open()函数来打开文本文件&#xff0c;并使用read()或readlines()方法读取文件内容。…

Linux:网页的各种状态码及其解释

Linux&#xff1a;网页的状态码 定义&#xff1a;状态码由三位数值组成&#xff0c;第一位数值定义了响应的类别&#xff0c;且有五种可能取值 状态码含义详解1xx指示信息&#xff08;信息性状态码&#xff09;表示请求已接受&#xff0c;继续处理2xx成功表示请求已被成功接受…

overflow:scroll不生效解决

参考 问题 在给组织架构组件的外框设置overflow:scroll的时候不生效&#xff0c;没有显示滚动条 原因 这个组件里面实在是包裹太多层了&#xff0c;得找到离内容层最近的那层包裹层设置overflow才有效 解决 找到离内容层最近的那层包裹层设置overflow

OpenWrt改网桥模式(AP模式)

OpenWrt改网桥模式&#xff08;AP模式&#xff09; 点击“接口” 删掉所有 wan 接口 点击“设备”&#xff0c;配置“br-lan" 点击网桥接口&#xff0c;勾选所有接口 点击保存 添加新接口&#xff08;不添加的话路由器自身系统没网&#xff09; 返回 “网络” - “接…

k8s部署presto

&#xff08;作者&#xff1a;陈玓玏&#xff09; 一、前提条件 已部署k8s&#xff1b;已部署hadoop和hive&#xff0c;可参考以下链接&#xff1a; https://blog.csdn.net/weixin_39750084/article/details/136750613?spm1001.2014.3001.5502 https://blog.csdn.net/wei…

Linux-挂盘-分区-卸盘

Linux-挂盘-分区-卸盘 1. 添加硬盘 2. 查看硬盘 [rootlocalhost /]# lsblk # 查看我们新添加的磁盘 NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINT sda 8:0 0 80G 0 disk ├─sda1 8:1 0 1G 0 part /boot └─sda2 …

pdf使用pdfbox切割pdf文件MultipartFile

引入依赖&#xff1a; <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.25</version></dependency>测试代码&#xff1a; import io.choerodon.core.iam.ResourceLevel; impo…

百度智能云参与信通院多项边缘计算标准编制,「大模型时代下云边端协同 AI 发展研讨会」成功召开

1 中国信通院联合业界制定、发布多项标准化成果&#xff0c;推动产业发展 大模型开启了 AI 原生时代&#xff0c;云边端协同 AI 构建了「集中式大规模训练」、「边缘分布式协同推理」新范式&#xff0c;有效降低推理时延和成本&#xff0c;提升数据安全和隐私性&#xff0c;也…

微服务技术框架-注册中心-能解决的问题

在微服务架构中&#xff0c;注册中心是一个关键组件&#xff0c;它解决了许多微服务通信和管理中的问题。以下是注册中心能够解决的主要问题&#xff1a; 1. 动态服务发现 问题&#xff1a;微服务实例动态增加或减少&#xff0c;手动配置服务地址非常繁琐且容易出错。 解决方案…

python的Serial 串口缓存区数据处理

没头脑很久没有处理串口数据&#xff0c;今日测试一个测距传感模块&#xff0c;用简单的serial.read没十几秒就屏幕冻住了&#xff0c;不往下print了。后来反应过来是不停访问串口&#xff0c;导致串口数据缓存区溢出了。有一个比较保险的方式如下&#xff0c;简单而言是成块读…

【C++面试100问】第八十五问:有了const,C++11为什么还要引入constexpr

B站讲解视频 在大部分实际场景中&#xff0c;const 和 constexpr 是可以混用的&#xff1b;但是在创建数组用修饰的变量指定size的时候&#xff0c;只能用constexpr&#xff1b;总的来说&#xff0c;在 C 11 标准中&#xff0c;const 用于为修饰的变量添加“只读”属性&#xf…

AtCoder ABC352 A-D题解

比赛链接:ABC352 Problem A: 签到题。 #include <bits/stdc.h> using namespace std; int main(){int N,X,Y,Z;cin>>N>>X>>Y>>Z;if((X<Z && Z<Y) || (Y<Z && Z<X))cout<<"YES"<<endl;else…

数据采集与AI分析,亮数据+通义千问助力跨境电商前行

文章目录 前言工具介绍数据采集工具亮数据Web Scraper IDE亮点 AI数据分析工具 实战电商数据采集与AI分析电商平台选取数据采集完全托管数据集自定义数据集 AI分析 价格总结 前言 随着信息技术的飞速发展&#xff0c;数据采集与AI分析在跨境电商中扮演着越来越重要的角色。通过…

用ControlNet+Inpaint实现stable diffusion模特换衣

用ControlNetInpaint实现stable diffusion模特换衣 ControlNet 训练与架构详解ControlNet 的架构用于文本到图像扩散的 ControlNet训练过程Zero卷积层的作用解释 inpaintInpaint Anything 的重要性Inpaint Anything 的功能概述 在现代计算机视觉领域&#xff0c;稳定扩散&#…

微信小程序开发 tabbar组件常见问题

一、 tabbar不显示问题 问题 刚开始我在app.json中配置了下面的代码&#xff0c;但tabbar并没有显示。代码如下&#xff1a; "tabBar": {"custom": true,"color": "#7A7E83","selectedColor": "#3cc51f","…

【机器学习-08】 | Scikit-Learn工具包进阶指南:Scikit-Learn工具包之决策树算法实战分析

&#x1f3a9; 欢迎来到技术探索的奇幻世界&#x1f468;‍&#x1f4bb; &#x1f4dc; 个人主页&#xff1a;一伦明悦-CSDN博客 ✍&#x1f3fb; 作者简介&#xff1a; C软件开发、Python机器学习爱好者 &#x1f5e3;️ 互动与支持&#xff1a;&#x1f4ac;评论 &…

微信H5跳小程序 wx-open-launch-weapp ios显示且正常跳转,安卓不显示不报错解决方案

前提&#xff1a;在一切都正常(无报错&#xff0c;没有写法错误等)的情况下&#xff0c;出现这个问题: 去你的h5项目&#xff0c;用浏览器打开&#xff0c;在network随便找一个静态文件&#xff0c;在response响应标头中找找&#xff0c;是否有Content-Security-Policy这个头&…

线程池相关故障梳理总结

下面贴一些典型的常见 Case&#xff0c;开发同学基本一看就懂并不神奇。 数据库相关 热更新 在事务里热更新同一条数据容易引发锁等待造成慢 SQL&#xff0c;常见于一些 update count&#xff0c;update quota 类的业务场景。 故障案例1&#xff1a;某次压测对 DB 产生瞬时 6…

服务高峰期gc,导致服务不可用

随着应用程序的复杂性和负载的不断增加&#xff0c;对JVM进行调优&#xff0c;也是保障系统稳定性的一个重要方向。 需要注意&#xff0c;调优并非首选方案&#xff0c;一般来说解决性能问题还是要从应用程序本身入手&#xff08;业务日志&#xff0c;慢请求等&#xff09;&am…