上一章学习了 Fiori UI5的开发环境搭建
- 安装VSCode
- 安装Node.js
- 安装SAP UI5
SAP学习笔记 - 开发04 - Fiori UI5 开发环境搭建-CSDN博客
本章继续学习Fiori UI5开发环境搭建
- VSCode 安装Fiori Tools插件
- SEGW 创建后台程序，注册服务，Gateway Client确认服务
- OData官网，要查资料可以到这里查
- 使用SEGW公开的服务查询数据显示到页面
目录
3-1，SEGW - SAP Gateway Service Builder
3-6，SAP Gateway Client - 确认后台程序
a)，输入oData Service URL，SAP用户名，PW
c），输入Module名，比如 sap.ui.test.db
下面是详细内容。
1，VSCode安装SAP Fiori Tools插件
插件其实就是功能的扩展，咱们这里主要是安装 SAP Fiori Tools 开头这些插件。
任意点一个插件，然后右边就显示了插件的详细页，显示插件功能，开发者，是否在维护中等信息
比如这个 SAP Fiori Tools 的开发者是 SAP SE，表示是官方插件，这种相对比较稳定，最新更新时间也非常新。
这也能从侧面看出来SAP公司目前对待这个技术的态度，学的人也能安心学，像我最近也学了的那个ADT插件，那个好像SAP很久没更新了。
SAP学习笔记 - 开发03 - CDSView开发环境搭建，Eclipse中连接SAP，CDSView创建-CSDN博客
然后再把 SAPUI5 开头的几个也安装一下
2，新建SAP Fiori UI5 Project
按下 Ctrl+Shift+P，然后输入 Open Application Generator
或者按下 Ctrl+P，然后输入 > Open App 也是一样可以找到的
这样就显示出来这个插件的界面了
我们可以在这里面选择要创建的Fiori组件模板
我们这里就选 Basic，然后点 Next
这里可以选择Data Source
- None ：这种就是不选任何DS
- Connect to a System：可以像SAP Clinet那样连接到SAP系统
- Connect to an OData Service：OData URL
咱们这里就选 OData Service，然后点 Next
这里要求输入 OData service URL
这个是什么呢？其实就是SAP的后台
咱们都知道Web开发有前端和后端，SAP Fiori本质上也是这种程序，OData Service URL就是后台
后台程序咱们现在还没创建，
先创建一个后台程序，然后再继续 Fiori UI5 的Project创建。
已经建好后台程序的，可以直接跳到4
3，SEGW - 创建后台程序
后台程序是通过T-code SEGW来创建的。
3-1，SEGW - SAP Gateway Service Builder
输入 Project，Description，Package，然后点执行
咱们这里先不深入聊这些内容，只是简单的来试一下有个印象，等以后再一步步来深入
3-2，导入表结构
右键 Data Model > Import > DDIC Structure
输入
- Name：任意合法字符串（比如 ZTestFioriUI5001，不能含有空格等）
- ABAP Structure：比如 MARA 或Customize Table
这里就显示了该表里面的所有字段
既可以选所有字段，也可以选部分字段，咱们这里就选部分字段
- MATNR 品目
- MTART 品目Type
- MBRSH 产业Code
- MATKL 品目Group...
在下一界面，选择哪些字段是Key，基本上和表本身的Key字段一致即可，比如这里的 品目。
点 Finish 按钮之后，就可以创建成功
Properties里面也能显示咱们刚才选了哪些字段
ZTestFioriUI5001Set 里面也显示具体有哪些方法可以调用，一般也就是增删改查。
3-3，生成对象
点击 生成 图标，然后接着点 执行就可以生成了
继续点 Local Object
显示绿色，表示生成成功
左侧 Runtime Artifacts 下面也同步多了几个东西，这些东西是什么意思呢?
这其实是OO（Object-Oriented）概念，比如
- ZCL_ZTESTFIORIUT5001_DPC：父类
- ZCL_ZTESTFIORIUT5001_DPC_EXT：增强，相当于子类
- ZCL_ZTESTFIORIUT5001_MPC
- ZCL_ZTESTFIORIUT5001_MPC_EXT
就是说外界在调用后台的时候，比如GetEntity(Read)，会先到子类找，如果没有再去父类找。
GetEntitySet(Query) 这个是多条数据的意思。
3-4，生成实现代码
双击 ZCL_ZTESTFIORIUT5001_DPC_EXT 就可以跳到下面画面
然后展开Method 节点
- ZTESTFIORIUI5001_GET_ENTITY Related EntitySet Name: ZTestFioriUI5001Set
- ZTESTFIORIUI5001_GET_ENTITYSET Related EntitySet Name: ZTestFioriUI5001Set
右键 > 再定义
这样就生成了这两个方法
在 Method > 再定义 下面也能看到再定义好的这两个方法
3-5，注册服务
想被外部程序访问到，需要先注册一个服务，
下图点 Register
在Service追加页面，输入
- Package割当(分配)：$TMP
其他的也不用改，直接点执行图标
可以看到这次后面的白灯变绿灯，这就OK了
3-6，SAP Gateway Client - 确认后台程序
在没有前台程序的时候，想确认一下后台程序写得对不对，可以使用这个 SAP Gateway Client。
这样就打开了 SAP Gateway Client界面
咱们这里直接点 实行
可以看到 Status Code是 200，也就是说后台是OK的，也就是可以联通的。
上图是XML格式，除此之外还可以选择JSON格式
点 URI Option追加 > $format=json，然后点确定
再点一下实行，这次可以看得更清楚一点儿了
点 EntitySet，然后选 ZTestFioriUI5001Set，再点确定
报了个501错误，表示这个ZTestFioriUI5001Set的GetEntitySet代码还没实装。
咱们来实现这两个方法
GET_ENTITY
这是个得到1条数据的方法
得到数据之后，into 到内表 ER_ENTITYSET，那么外部就可以得到该条数据了，就像一个协议
data(lv_matnr) = IT_KEY_TAB[ name = 'MATNR' ]-value .
select SINGLE Matnr , Mtart , Mbrsh , Matkl , Meins , Bstme , Brgew , Ntgew , Gewei
from mara
into ER_ENTITY
where Matnr = lv_matnr .
GET_ENTITYSET
这是个得到复数条数据的方法
得到数据之后，into 到内表 ET_ENTITYSET，那么外部就可以得到内表数据了，就像一个协议
select Matnr , Mtart , Mbrsh , Matkl , Meins , Bstme , Brgew , Ntgew , Gewei
from mara
into TABLE ET_ENTITYSET .
然后点有效化的时候总出一个奇怪的错误。
TODO：看错误消息应该是 ET_ENTITYSET里面跟MARA整个表是对应的，
咱们这个希望取得的数据只是其中一部分，它按整个表去匹配就匹配不上了，估计 select * from table 以外的写法可能不太一样，这里先跳过。
换一个字段少一点儿的Customize表看一看
这次就OK了
相似的代码也贴一下：
select *
from ZPERSON01
into TABLE ET_ENTITYSET .
再次注册一个Service
这次数据就可以查出来了
改成JSON看得更清楚一点。
然后取单条数据的那个该怎么调用呢？
其实就是加个()，然后里面写Filter字段，就像下面这样
/sap/opu/odata/SAP/ZTESTFIORIUI5002_SRV/ZTestFioriUI5002Set(Mandt='400',Persionid='10001',Addressid='001')
注意这里的字段好像是首字母大写，其他小写，多个Key就用逗号分隔
在GET_ENTITY里面也要相同的拼写（比如 Personid，首字母大写，其他小写）
而且Mandt要传，但是SQL里面还不能作为Where条件。
相似的代码也贴一下：
data(lv_personId) = IT_KEY_TAB[ name = 'Personid' ]-value .
select SINGLE *
from ZPERSON01
into ER_ENTITY
where PERSONID = lv_personId .
参照：
SAP创建ODATA服务-Structure_sap odata教程-CSDN博客
然后这里还可以打个外部断点，看一下是不是真的执行了这个函数
打完断点之后，再到SAP Gateway Client界面执行一下，
可以看到参数全都传过来了
然后单条数据也抽出来了
3-7，Odata 官网
上面纠结的怎么写参数，URI为啥这么写，这些东西其实由Odata来规范的。
/sap/opu/odata/SAP/ZTESTFIORIUI5002_SRV/ZTestFioriUI5002Set(Mandt='400',Persionid='10001',Addressid='001')
OData的URL是 odata.org，SAP实现了这种规范，所以咱们也就可以这么用。
OData（Open Data Protocol）是一种使用 REST API 进行数据传输的 Web 协议，由 Microsoft 于 2007 年发布。目前，OASIS（结构化信息标准促进协会）正在对其进行标准化。
OData #1 触ってみる #PowerBI - Qiita
上边通过SEGW把后台程序给创建好了，下面继续来建Fiori UI5 Project。
4，使用SEGW公开的服务查询数据显示到页面
继续 【2，新建SAP Fiori UI5 Project】，咱们这里参照官网来做些例子。
官网：
新建一个表 ZPERSON01，然后再按照上面的 3 - SEGW 来建好后台程序。比如这里
- 取多条数据URL：/sap/opu/odata/SAP/ZPERSON01_SRV/ZPERSON01Set
- 取单条数据URL： /sap/opu/odata/SAP/ZPERSON01_SRV/ZPERSON01Set（Mandt='400',Personid='10001'）
注意1点，上图其实只是一个URI，外边还没法用，
拷一下下面的URL，这个外部可以用
http://mysap.goodsap.cn:50400/sap/opu/odata/SAP/ZPERSON01_SRV/
4-1，取单条数据，然后直接显示在画面上
a)，输入oData Service URL，SAP用户名，PW
输入完之后，如果是个正确的URL，会提示你输入SAP的用户名和密码
输完以后点Login图标，如果都OK的话，那么Next按钮就变可点了
点Next
b），输入View名称，比如App
点Next
c），输入Module名，比如 sap.ui.test.db
点Finish
到这一步Project就建好了，download一些依赖包稍微会花些时间
至此这个工程就建好了。
可以看到 manifest.json / index.html / ui5.yaml 这些文件都自动建好了，不用手工建了
因为咱们用了插件了嘛，所以VSCode就帮我们把这些必须的或可能会用的东西给自动建好了
SAP学习笔记 - 开发04 - Fiori UI5 开发环境搭建-CSDN博客
d），npm start 启动
打开Terminal，然后输入 npm start 来启动项目
VSCode很贴心的给你自动启动了浏览器
这里还要你输入SAP的用户名和密码
然后就可以进来了，可以让浏览器记住用户名密码，以后就不用再输了
e），双向绑定
直接参照官方文档
可能是某个插件导致的一大堆红色的错误消息
它们应该是那种check结果，比如违反了命名规则啥的
这些暂时先不去管它
我们把它的代码拷到App.view.xml里面，保存之后，服务器会自动重新加载
<mvc:View
xmlns="sap.m"
xmlns:form="sap.ui.layout.form"
xmlns:mvc="sap.ui.core.mvc">
<Panel headerText="{/panelHeaderText}" class="sapUiResponsiveMargin" width="auto">
<form:SimpleForm editable="true" layout="ColumnLayout">
<Label text="First Name"/>
<Input value="{/firstName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}"/>
<Label text="Last Name"/>
<Input value="{/lastName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}"/>
<Label text="Enabled"/>
<CheckBox selected="{/enabled}"/>
</form:SimpleForm>
</Panel>
</mvc:View>
刷新浏览器，页面上就变了，看这个是不是很熟悉：），点一下 App Title 东京老树根 那个Panel
这样就显示出来页面内容了，其实就是上面那段代码
输入框里面的内容该怎么填呢？官网上是给了个假数据
在mainifest.json里面加上 type，url 两个字段，指明了数据源
然后建一个文件 /model/data.json，这里的数据就可以显示在画面上了
包括Title，这4个字段的数值都正确显示了
那么双向绑定是什么意思呢？
简单来说就是我变了你也自动变，你变了我也自动变。
比如注意下面代码里面， enabled 属性都设置了 {/enabled} 变量
所以代码里enabled设置为true，那么画面上就显示为true（即各个字段可用）
画面上点一下checkbox变为false，{/enabled}就会设为false，
那么代码端也会字段设定为false，然后再去反映到页面所有用到的地方，(即页面各字段变不可用)
上面是假数据，那么该怎么从DB里面取数据呢？
跟传统的Web开发一样，前端有了，后端也要写，这样前后端才能互动起来。
这里就是要把后端，也就是Controller给写好就可以。
f），Controller
该Controller实现的功能是
- 调用 ZPERSON01SET_GET_ENTITY ，传入参数，返回1条数据，转成Json格式
- SAP中checkbox一般来说在DB中保存为X，所以到Fiori前端，就需要转成True/False
代码如下
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
],
function (Controller,JSONModel) {
"use strict";
return Controller.extend("sap.ui.test.db.controller.App", {
onInit: function () {
//Connect to URL
var oModel = this.getOwnerComponent().getModel();
//Controller
let controller = this;
oModel.read("/ZPERSON01Set(Mandt='400',Personid='10001')", {
success: function(oData){
//console.log("OK");
if(oData.Enabled == "X"){
oData.Enabled = true;
}else{
oData.Enabled = false;
}
let jsonModel = new JSONModel(oData);
controller.getView().setModel(jsonModel);
},
error: function(){
//console.log("NG");
}
});
}
});
});注意几点
- this：这是个狡猾多变的家伙，在不同的位置指的是不同的对象
- this.getOwnerComponent().getModel();
它的目的是 连接 /sap/opu/odata/SAP/ZPERSON01_SRV/ 这个服务
熟悉传统开发的朋友可以理解为Open DBConnection
- oModel.read("/ZPERSON01Set(Mandt='400',Personid='10001')", {}
它的目的是调用服务中的具体方法，需要传参的就传参
- this.getOwnerComponent().getModel();
这个语句为啥就能找到ZPERSON01_SRV/ 这个服务呢？
这个事儿分2步：主要都在manifest.json里面定义好了的
第1步，定义dataSource - mainService 为该 ZPERSON01_SRV/ 服务
第2步，在model 对象里面，无名的model 的属性dataSource 设为 mainService
因此 getModel(); 实际上就通过 mainService 这个名字直接找到了 ZPERSON01_SRV/ 服务
如果有多个服务，那 dataSource里面就应该写上具体的名称， getModel(); 也得传入这个名称
- 名称大小写匹配问题
这个主要指的是SAP 的Service中的属性名称，
包括大小写一定要和View.xml文件中的属性完全一致
好了，完事具备，保存
回到浏览器，这样就能抽出具体数据了。
本章主要讲了如下内容，可以说每一项都很重要
- VSCode安装SAP Fiori Tools插件
- SEGW - 创建后台程序
- 使用VSCode新建SAP Fiori UI5 Project
- 在Project中使用SEGW公开的服务查询数据显示到页面
以上就是本章的内容。
更多SAP顾问业务知识请点击下面目录链接
扫一扫
832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
