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文件夹。

还需要删除resourcesMETA-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。

你可能感兴趣的:(Spring,Boot,ABAP/SAP,Web,Programming,SAP,CAP,SAP,CDS,Cloud,Native,Fiori,Elements,Spring,Boot)