6、SAP UI5 之 Step 10 Descriptor for Applications 及Step 11: Pages and Panels

本文链接：https://blog.csdn.net/weixin_40703303/article/details/90483573

本文介绍了SAP UI5应用程序的关键组件。在Step 10中，焦点放在manifest.json（应用描述符）上，它是全局配置文件，用于组件和库的设置。接着，讨论了webapp/index.html如何通过声明component.js来初始化组件。同时提到了i18n资源文件和Component.js的作用。在Step 11中，讲解了Pages和Panels，包括App.view.xml中的视图加载和控制器实例化流程，以及与manifest.json的交互。

摘要由CSDN通过智能技术生成

Step10:Descriptor for Applications

1. webapp/manifest.json (New)

manifest.json是全局配置文件，The manifest file is called the descriptor for applications, components and libraries and is also referred to as “descriptor” or “app descriptor” when used for applications

{
  "_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"
	},
	"ach": "CA-UI5-DOC"
  },
  "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"
		}
	  }
	}
  }
}

2. webapp\index.html

在<div>标签中声明component .js， This will instantiate the component when the onInit event is executed.

3. webapp/i18n/i18n.properties

4. webapp/Component.js

Step 11: Pages and Panels

1. webapp/view/App.view.xml

如果指定了controller，则在加载view之后实例化它。

这里index.html--index.js--component.js--调用--manifest.json --App.view.xml--App.controller.js

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc"
  displayBlock="true">
   <App>
      <pages>
         <Page title="{i18n>homePageTitle}">
            <content>
               <Panel
                  headerText="{i18n>helloPanelTitle}">
                  <content>

                     <Button
                        text="{i18n>showHelloButtonText}"
                        press=".onShowHello"/>
                     <Input
                        value="{/recipient/name}"
                        description="Hello {/recipient/name}"
                        valueLiveUpdate="true"
                        width="60%"/>
                  </content>
               </Panel>
            </content>
         </Page>
      </pages>
   </App>
</mvc:View>