SAPUI5学习第四天-----(07)应用程序描述符,manifest.json!

Descriptor for Applications

官网代码

manifest.json

所有特定于应用程序的配置设置现在将进一步放在名为manifest.json的单独描述符文件中。这清楚地将应用程序编码与配置设置分开,使我们的应用程序更加灵活。例如,所有sapfiori应用程序都实现为组件,并附带一个描述符文件,以便托管在sap fiori launchpad中。

SAP Fiori launchpad充当应用程序容器并实例化应用程序,而无需为bootstrap提供本地HTML文件。相反,描述符文件将被解析,组件将被加载到当前的HTML页面中。这允许在同一上下文中显示多个应用程序。每个应用程序都可以定义本地设置,例如语言属性、支持的设备等。我们还可以使用描述符文件加载额外的资源,并实例化i18n资源包之类的模型。

注意
自动实例化模型仅适用于SAPUI5 1.30版。如果您使用的是旧版本,那么可以在Component.js文件的init方法中手动实例化资源包和应用程序的其他模型,就像我们在步骤:组件配置中所做的那样。

webapp/manifest.json(新建)

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

在本教程中,我们只介绍描述符文件最重要的设置和参数。在SAP Web IDE中,可能会出现验证错误,因为缺少某些设置———在此上下文中可以忽略这些设置。

manifest.json文件的内容是一个json格式的配置对象,包含所有全局应用程序设置和参数。manifest文件称为应用程序、组件和库的描述符,在用于应用程序时也称为“描述符”或“应用程序描述符”。它存储在webapp文件夹中,由SAPUI5读取以实例化组件。manifest.json文件中的名称空间定义了三个重要部分:

  • sap.app
    sap.app命名空间包含以下特定于应用程序的属性:

    • id(强制):应用程序组件的命名空间
      ID不能超过70个字符。它必须是唯一的,并且必须与组件ID/命名空间相对应。
    • type:定义我们想要配置什么,这里是:application
    • i18n:定义资源包文件的路径
    • title:从应用程序资源包中引用的句柄(handlebars)语法中的应用程序标题
    • description:从应用的资源包中引用的句柄语法的简短描述文本
    • applicationVersion:应用程序的版本,以便以后能够轻松地更新应用程序
  • sap.ui
    sap.ui命名空间提供了以下ui特定的属性:

    • technology:这个值指定了UI技术;在我们的例子中,我们使用SAPUI5
    • deviceTypes:告诉应用程序支持什么设备类型:桌面,平板,手机(所有默认为true)
  • sap.ui5
    sap.ui5命名空间添加了与SAPUI5相关的配置参数,由SAPUI5自动处理。最重要的参数是:

    • rootView:如果指定此参数,组件将自动实例化视图,并将其用作该组件的根
    • dependencies: 这里我们声明应用程序中使用的UI库
    • models: 在描述符的这一部分,我们可以定义models,当应用程序启动时,SAPUI5会自动实例化这些模型。现在我们可以定义本地资源包。我们将模型的名称“i18n”定义为键,并通过命名空间指定包(bundle)文件。与前面的步骤一样,翻译文本的文件存储在i18n文件夹中,名称为i18n.properties。我们只需用app的命名空间作为文件路径的前缀。app组件的init方法中的手动实例化将在稍后的步骤中删除。将supportedLocales和fallbackLocale属性被设置为空字符串,如在本教程中只有一个我们的演示应用程序使用i18n.properties为简单起见,我们希望防止浏览器尝试i18n_*.properties根据您的浏览器设置和区域设置加载其他文件。

出于兼容性原因,根对象和每个部分均在内部属性_version下声明了描述符版本号1.12.0。在描述符的未来版本中可能会添加或更改功能,版本号有助于通过读取描述符的工具识别应用程序设置。

资源包的属性包含在描述符中的两个花括号中。这不是SAPUI5数据绑定语法,而是在句柄语法中的描述符中对资源包的变量引用。引用的文本在本教程中构建的应用程序中是不可见的,但可以被应用程序容器如SAP Fiori launchpad读取。

webapp\index.html

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

现在我们在index.html的body中声明我们的组件。在index.html的bootstrapping 脚本中,我们启用了ComponentSupport模块并删除了sap.m库。然后,我们通过div标签在body中声明我们的组件。这将在onInit事件执行时实例化组件。

从现在开始,我们将不再需要index.js,因为描述符会处理一切。

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}

在资源包中,我们简单地为应用添加文本,并添加注释来从语义上分离bundle文本。

webapp/Component.js

sap.ui.define([
   "sap/ui/core/UIComponent",
   "sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
   "use strict";
   return UIComponent.extend("sap.ui.demo.walkthrough.Component", {
      metadata : {
            manifest: "json"
      },
      init : function () {
         // call the init function of the parent
         UIComponent.prototype.init.apply(this, arguments);
         // set data model
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.setModel(oModel);
      }
   });
});

在组件的metadata(元数据)部分,我们现在用属性键manifest和值json替换rootView属性。这定义了一个对描述符的引用,该描述符将在组件实例化时自动加载和解析。现在我们可以完全删除包含资源包模型实例化的代码行。SAPUI5在描述符中的配置条目的帮助下自动完成。我们还可以删除对sap/ui/model/resource/ResourceModel和相应的正式参数ResourceModel的依赖,因为我们不会在匿名回调函数中使用它。

在SAPUI5的早期版本中,应用程序的其他配置设置,如服务配置、根视图和路由配置,必须添加到Component.js文件的元数据部分。从SAPUI5版本1.30开始,我们建议您在manifest.json描述符文件中定义这些设置。基于更老的SAPUI5版本创建的应用程序和示例仍然使用Component.js文件来实现这个目的——所以它仍然被支持,但不推荐。

约定:
1、描述符文件名为manifest.json,位于webapp文件夹中。
2、为应用的标题和描述使用可翻译的字符串

在这里插入图片描述
在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值