SAP CAP篇八：为CAP添加App Router并支持Fiori Launchpad (Sandbox环境)

本系列文章

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添加App Router并支持Fiori Launchpad (Sandbox环境)
SAP CAP篇九：升级为SAP CDS 7.0, CAP Java 2以及Spring Boot 3
SAP CAP篇十：理解Fiori UI的Annoation定义
SAP CAP篇十一：支持Media Object：图片、附件等
SAP CAP篇十二：AppRouter 深入研究

前提

注意，本篇的前提是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。