SAP Fiori UI5-环境搭建-2022-2024界面对比

news2024/11/22 16:01:50

文章目录

一、Fiori项目初始化实际操作
- 第一步：新建文件夹（项目文件）
- 第二步：打开我们项目
- 第三步：打开终端部署环境
- 第四步: XML中新增文本
二、 2023年Vscode中Fiori界面
三、2024年Vscode中Fiori界面

一、Fiori项目初始化实际操作

本文用到的SAP 官方的Odata文档
https://services.odata.org/V2/Northwind/Northwind.svc/Odata

第一步：新建文件夹（项目文件）

新建一个文件夹；SAPUI5 Fiori Demo01 作为nameSapce
在这里插入图片描述
打开Vscode 使用快捷键：ctrl+shift+p 打开I 输入Fiori (已经安装过SAP Fiori Tools )

如果没有安装好，参照里面Node Vscode部署的文章： https://blog.csdn.net/qq_45824905/article/details/142098960

在这里插入图片描述选择SAPUI5 Freestyle,(参考以前文章)

按照如下步骤，点击即可

Data Source :使用SAP 官方的Odata:https://services.odata.org/V2/Northwind/Northwind.svc/

视图的名字不变

定义项目的名字，Mo
dule Name ：小写规范，选择我们的NameSapce
定义项目的名字，Module Name ：小写规范，选择我们的NameSapce

等待即可首次加载很慢，。。。。。
加载完毕出现如下界面
在这里插入图片描述

第二步：打开我们项目

找到我们的项目 my.fisrt.fiori.demo01 在这里插入图片描述

第三步：打开终端部署环境

使用快捷键： ctrl+Shfit+` 打开终端
输入 npm install 安装所需的文件
在这里插入图片描述

查看npm --help 命令 run
切换的CMD界面（可以不用切换终端的操作方式）

查看 run 启动等方式

现在启动我们的UI5 服务在这里插入图片描述浏览器默认打开的界面

第四步: XML中新增文本

在我们XML试图中写入输出的文本就OK
在这里插入图片描述

<mvc:View controllerName="com.Austin.my.fisrt.fiori.demo01.controller.View"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.m">
    <Page id="page" title="{i18n>title}">
        <content>
            <Text text="Hello Myfirst Fiori Demo01"/>
        </content>
    </Page>
</mvc:View>