SAP CAP篇八：为CAP添加App Router并支持Fiori Launchpad (Sandbox环境)
本篇目录
- 本系列此前的文章
- 前提
- 修改`app`文件夹
-
- 添加`appconfig`子文件夹
- 添加`package.json`
- 添加`fiori.html`
- 添加`xs-app.json`
- 修改 `manage-books`
- 修改 `browse-books`
- 修改`srv`
- 为`approuter`添加Local开发环境
- 编译运行
-
- 运行`srv`
- 运行`approuter`
本系列此前的文章
SAP CAP篇一: 快速创建一个Service，基于Java的实现
SAP CAP篇二：为Service加上数据库支持
SAP CAP篇三：定义Model
SAP CAP篇四：为CAP添加Fiori Elements程序(1)
SAP CAP篇五：为CAP添加Fiori Elements程序(2)
SAP CAP篇六：为CAP添加Fiori Elements程序(3)
SAP CAP篇七：为CAP添加Fiori Launchpad入口 (Sandbox环境)
前提
注意，本篇的前提是SAP CAP篇六：为CAP添加Fiori Elements程序(3) ，而不是SAP CAP篇七：为CAP添加Fiori Launchpad入口 (Sandbox环境)
本篇中，将UI部分从srv逻辑剥离出来，所以本篇中，需要单独运行srv，并单独运行approuter的程序。
修改app文件夹
添加appconfig子文件夹
添加appconfig子文件夹，并添加fioriSandboxConfig.json文件。
{
"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=managebooks",
"url": "/manage-books/webapp"
}
},
"browse-books": {
"semanticObject": "Books",
"action": "display",
"signature": {
"parameters": {},
"additionalParameters": "allowed"
},
"resolutionResult": {
"applicationType": "SAPUI5",
"additionalInformation": "SAPUI5.Component=BrowseBooks",
"url": "/browse-books/webapp"
}
}
}
}
}
}
}
}
添加package.json
在app文件夹下添加package.json。
{
"name": "approuter",
"dependencies": {
"@sap/approuter": "^13"
},
"scripts": {
"start": "node node_modules/@sap/approuter/approuter.js"
}
}
运行：
npm i
这会生成对应的package-lock.json。
添加fiori.html
添加fiori.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 Launchpad (Sandbox)title>
<script>
window["sap-ushell-config"] = {
defaultRenderer: "fiori2",
applications: {}
};
script>
<script id="sap-ushell-bootstrap" src="https://sapui5.hana.ondemand.com/test-resources/sap/ushell/bootstrap/sandbox.js">script>
<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/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>
添加xs-app.json
添加xs-app.json文件：
{
"welcomeFile": "/app/fiori.html",
"authenticationMethod": "none",
"routes": [
{
"source": "^/api/(.*)$",
"target": "$1",
"authenticationType": "none",
"destination": "backend",
"csrfProtection": false
},
{
"source": "^/app/(.*)$",
"cacheControl": "no-cache, no-store, must-revalidate",
"target": "$1",
"localDir": "./"
},
{
"source": "^/appconfig/(.*)$",
"localDir": "./",
"authenticationType": "none"
},
{
"source": "^/browse-books/webapp/(.*)$",
"localDir": "./",
"authenticationType": "none"
},
{
"source": "^/manage-books/webapp/(.*)$",
"localDir": "./",
"authenticationType": "none"
}
]
}
修改 manage-books
修改manage-books文件下的manifest.json中的dataSource，这里的修改就是在URI上加上/api以适配上面的xs-app.json：
"dataSources": {
"mainService": {
"uri": "/api/odata/v4/AdminService/",
"type": "OData",
"settings": {
"odataVersion": "4.0"
}
}
}
修改 browse-books
同样调整dataSource的URI，加上/api/为前缀。
修改srv
删除UiIndexContentProviderFactory.java及其index文件夹。
还需要删除resources下META-INF文件夹及其文件。
同样，删除application.yaml中关于static-files的定义。
为approuter添加Local开发环境
为Local开发环境，设置default-env.json：
{"destinations":[{"name":"backend","url":"http://localhost:8080/"}]}
注意，修改.gitignore以避免将此文件上传。
编译运行
所有修改完成了。按照一下顺序来编译运行。
运行srv
因为修改过srv的内容，必须先Build在运行：
mvn clean install
然后：
mvn spring-boot:run
运行approuter
运行如下指令：
cd app && npm run start
下一篇，会讲述Fiori Elements的annotation。