本文目录
- 本系列之前的文章
- 在现有代码基础上继续增强
- 增强`app`文件夹
- 文件 `package.json`
- 文件夹`appconfig`
- 文件`fioriSandboxConfig.json`
- 文件 `fiori.html`
- 更新`Srv`中的`UiIndexContentProviderFactory`
- 再次检查代码
- 运行效果
- 代码库 (Gitcode)
本系列之前的文章
本系列之前的文章:
SAP CAP篇一:快速创建一个Service,基于Java的实现
SAP CAP篇二:为Service加上数据库支持
SAP CAP篇三:定义Model
SAP CAP篇四:为CAP添加Fiori Elements程序(1)
SAP CAP篇五:为CAP添加Fiori Elements程序(1)
SAP CAP篇六:为CAP添加Fiori Elements程序(3)
在现有代码基础上继续增强
根据从篇四到篇六的修改和增强,现有的代码结构如下:
增强app
文件夹
在app
文件夹中添加如下文件:
- package.json
appconfig
folder
文件 package.json
正如在篇四提到的那样,这里app
文件夹其实是为approuter
准备的,所以,package.json
的定义如下:
{
"name": "approuter",
"dependencies": {
"@sap/approuter": "^13"
},
"scripts": {
"start": "node node_modules/@sap/approuter/approuter.js"
}
}
文件夹appconfig
在app
文件夹下新建子文件夹appconfig
。该文件夹用来提供Fiori Launchpad
的Sandbox系统。真正Deploy到SAP BTP上时,需要遵循Launchpad 定义的标准。
文件fioriSandboxConfig.json
在新创建的appconfig
下创建fioriSandboxConfig.json
。该文件用来定义一个Launchpad的Sandbox环境。
{
"services": {
"LaunchPage": {
"adapter": {
"config": {
"catalogs": [],
"groups": [
{
"id": "Admin",
"title": "Admin",
"isPreset": true,
"isVisible": true,
"isGroupLocked": false,
"tiles": [
{
"id": "manage-books",
"tileType": "sap.ushell.ui.tile.StaticTile",
"properties": {
"targetURL": "#Books-manage",
"title": "Manage Books",
"description": "Find your favorite book"
}
}
]
}, {
"id": "Book",
"title": "Book",
"isPreset": true,
"isVisible": true,
"isGroupLocked": false,
"tiles": [
{
"id": "browse-books",
"tileType": "sap.ushell.ui.tile.StaticTile",
"properties": {
"targetURL": "#Books-display",
"title": "Display Books",
"description": "Find your favorite book"
}
}
]
}
]
}
}
},
"NavTargetResolution": {
"config": {
"enableClientSideTargetResolution": true
}
},
"ClientSideTargetResolution": {
"adapter": {
"config": {
"inbounds": {
"manage-books": {
"semanticObject": "Books",
"action": "manage",
"signature": {
"parameters": {},
"additionalParameters": "allowed"
},
"resolutionResult": {
"applicationType": "SAPUI5",
"additionalInformation": "SAPUI5.Component=manage-books",
"url": "/manage-books/webapp"
}
},
"browse-books": {
"semanticObject": "Books",
"action": "display",
"signature": {
"parameters": {},
"additionalParameters": "allowed"
},
"resolutionResult": {
"applicationType": "SAPUI5",
"additionalInformation": "SAPUI5.Component=browse-books",
"url": "/browse-books/webapp"
}
}
}
}
}
}
}
}
这里的Sandbox的inbound定义,完全对应了篇六的两个Fiori Elements程序的"semanticObject":和
“action”。
该配置要要求接入口为fiori.html
,所以,继续创建该HTML文件。
文件 fiori.html
文件fiori.html
是用作Fiori Launchpad
的入口程序——类似于绝大多数的HTML程序的index.html
一样。所以,这个fiori.html
是标准的Fiori Launchpad
的定义文件。
在app
文件夹下添加该HTML文件:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fiori</title>
<script>
window["sap-ushell-config"] = {
defaultRenderer: "fiori2",
applications: {}
};
</script>
<script id="sap-ushell-bootstrap" src="https://sapui5.hana.ondemand.com/1.115.0/test-resources/sap/ushell/bootstrap/sandbox.js"></script>
<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/1.115.0/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout"
data-sap-ui-compatVersion="edge"
data-sap-ui-theme="sap_horizon"
data-sap-ui-frameOptions="allow">
</script>
<script>
sap.ui.getCore().attachInit(()=> sap.ushell.Container.createRenderer().placeAt("content"))
</script>
</head>
<body class="sapUiBody" id="content"></body>
</html>
更新Srv
中的UiIndexContentProviderFactory
更新UI index的入口:
@Override
public void writeContent(PrintWriter writer, String contextPath) {
writer.print(ENDPOINT_START);
writer.printf(ENDPOINT, contextPath + "/fiori.html", "Fiori Launchpad");
writer.print(ENDPOINT_END);
}
再次检查代码
根据本篇的增强后,代码结构最新如下:
运行效果
代码库 (Gitcode)
与本文配套的代码
参考README.md
关于各个branch的详细介绍。
本篇对应的branch是3_withlaunchpad
。