SAP UI5 walkthrough step10 Descriptor for Applications

ABAP_RUN

已于 2023-12-08 15:00:12 修改

阅读量1.3k

点赞数 33

分类专栏： UI5 文章标签： abap SAP

于 2023-12-08 14:59:53 首次发布

本文链接：https://blog.csdn.net/IamRunjiang/article/details/134878240

版权

UI5 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

在这一步，我们将会把所有的应用相关的描述性的文件独立放到manifest.json

新建一个manifest.json文件

webapp/manifest.json (New)

{
  "_version": "1.58.0",
  "sap.app": {
	"id": "ui5.walkthrough",
	"i18n": "i18n/i18n.properties",
	"title": "{{appTitle}}",
	"description": "{{appDescription}}",
	"type": "application",
	"applicationVersion": {
	  "version": "1.0.0"
	}
  },
  "sap.ui": {
	"technology": "UI5",
	"deviceTypes": {
		"desktop": true,
		"tablet": true,
		"phone": true
	}
  },
  "sap.ui5": {
	"dependencies": {
	  "minUI5Version": "1.108.0",
	  "libs": {
		"sap.ui.core": {},
		"sap.m": {}
	  }
	},
	"models": {
	  "i18n": {
		"type": "sap.ui.model.resource.ResourceModel",
		"settings": {
		  "bundleName": "ui5.walkthrough.i18n.i18n",
		  "supportedLocales": [""],
		  "fallbackLocale": ""
		}
	  }
	},
	"rootView": {
		"viewName": "ui5.walkthrough.view.App",
		"type": "XML",
		"id": "app"
	}
  }
}

The sap.app namespace contains the following application-specific attributes:
- id (mandatory): The namespace of our application component.
  
  The ID must not exceed 70 characters. It must be unique and must correspond to the component ID/namespace.
- type: Defines what we want to configure; here: an application.
- i18n: Defines the path to the resource bundle file. The supportedLocales and fallbackLocale properties are set to empty strings, as our demo app uses only one i18n.properties file for simplicity and we'd like to prevent the browser from trying to load additional i18n_*.properties files based on your browser settings and your locale.
- title: Title of the application in handlebars syntax referenced from the app's resource bundle.
- description: Short description text what the application does in handlebars syntax referenced from the app's resource bundle.
- applicationVersion: The version of the application to be able to update the application easily later on.
sap.ui

The sap.ui namespace contributes the following UI-specific attributes:
- technology: This value specifies the UI technology; in our case we use SAPUI5
- deviceTypes: Tells what devices are supported by the app: desktop, tablet, phone (all true by default)
sap.ui5

The sap.ui5 namespace adds SAPUI5-specific configuration parameters that are automatically processed by SAPUI5. The most important parameters are:
- rootView: If you specify this parameter, the component will automatically instantiate the view and use it as the root for this component
- dependencies: Here we declare the UI libraries used in the application
- models: In this section of the descriptor we can define models that will be automatically instantiated by SAPUI5 when the app starts. Here we can now define the local resource bundle. We define the name of the model "i18n" as key and specify the bundle file by namespace. As in the previous steps, the file with our translated texts is stored in the i18n folder and named i18n.properties. We simply prefix the path to the file with the namespace of our app. The manual instantiation in the app component's init method will be removed later in this step. The supportedLocales and fallbackLocale properties are set to empty strings, as in this tutorial our demo app uses only one i18n.properties file for simplicity, and we'd like to prevent the browser from trying to load additional i18n_*.properties files based on your browser settings and your locale.
For compatibility reasons the root object and each of the sections state the descriptor version number 1.58.0 under the internal property _version. Features might be added or changed in future versions of the descriptor and the version number helps to identify the application settings by tools that read the descriptor.

修改index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>UI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src="resources/sap-ui-core.js"
		data-sap-ui-theme="sap_horizon"
		data-sap-ui-compatVersion="edge"
		data-sap-ui-async="true"
		data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
		data-sap-ui-resourceroots='{
			"ui5.walkthrough": "./"
		}'>
	</script>
</head>
<body class="sapUiBody" id="content">
	<div data-sap-ui-component data-name="ui5.walkthrough" data-id="container" data-settings='{"id" : "walkthrough"}'></div>
</body>
</html>

修改i18n

webapp/i18n/i18n.properties

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}

修改component

webapp/Component.js

sap.ui.define([
   "sap/ui/core/UIComponent",
   "sap/ui/model/json/JSONModel"
], (UIComponent, JSONModel) => {
   "use strict";

   return UIComponent.extend("ui5.walkthrough.Component", {
      metadata : {
         interfaces: ["sap.ui.core.IAsyncContentCreation"],
         manifest: "json"
      },

      init() {
         // call the init function of the parent
         UIComponent.prototype.init.apply(this, arguments);

         // set data model
         const oData = {
            recipient : {
               name : "World"
            }
         };
         const oModel = new JSONModel(oData);
         this.setModel(oModel);
      }
   });
});

Conventions

The descriptor file is named manifest.json and located in the webapp folder.
Use translatable strings for the title and the description of the app.