Step 16: Dialogs and Fragments

Step 16: Dialogs and Fragments

Fragments:中文是碎片的意思，我理解是组件的意思
可以把view拆分成更小的单位，也就是一个view可以由多个Fragments组成。Fragments里可以包含1个或者n个控件（比如按钮，输入框等）

Fragments是轻量级的组件，和view比，每个view必须有一个相应的controller，但是Fragments不需要controller，而且更小的组件更能够被重用。

Fragments里的组件在渲染成DOM后，是被嵌入到view里的。

webapp/view/HelloPanel.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.HelloPanel"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Panel
      headerText="{i18n>helloPanelTitle}"
      class="sapUiResponsiveMargin"
      width="auto" >
      <content>
      <Button
         id="helloDialogButton"
         text="{i18n>openDialogButtonText}"
         press=".onOpenDialog"
         class="sapUiSmallMarginEnd"/>

      <Button
         text="{i18n>showHelloButtonText}"
         press=".onShowHello"
         class="myCustomButton"/>
      <Input
         value="{/recipient/name}"
         valueLiveUpdate="true"
         width="60%"/>
      <FormattedText
         htmlText="Hello {/recipient/name}"
         class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
      </content>
   </Panel>
</mvc:View>

加了一个按钮，并且给它一个id=helloDialogButton，以后可以用这个唯一的id去找到这个控件，如果不指定id，SAPUI5会自动生产ID，但这个ID是变化的。比如“__button03”

webapp/view/HelloDialog.fragment.xml (New)

<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:core="sap.ui.core" >
   <Dialog
      id="helloDialog"
      title="Hello {/recipient/name}">
   </Dialog>
</core:FragmentDefinition>

创建一个fragment，里面只有一个对话框控件。
fragment的语法和view类似，只是少了controller，并且没有footprint。footprint类似一个控件的容器。
这里个Dialog也定义了id=helloDialog，方便HelloPanel的controller访问它。

webapp/controller/HelloPanel.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast",
	"sap/ui/core/Fragment"
], function (Controller, MessageToast, Fragment) {
	"use strict";

	return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", {

		onShowHello : function () {
			…
		},
		onOpenDialog : function () {
			var oView = this.getView();

			// create dialog lazily
			if (!this.pDialog1) {
				this.pDialog1 = Fragment.load({
					id: oView.getId(),
					name: "sap.ui.demo.walkthrough.view.HelloDialog"
				}).then(function (oDialog) {
					// connect dialog to the root view of this component (models, lifecycle)
					oView.addDependent(oDialog);
					return oDialog;
				});
			} 
			this.pDialog1.then(function(oDialog) {
				oDialog.open();
			});
		}

	});
});

if (!this.pDialog1) { ：其中pDialog1是任意写的变量，就是先判断有没有，如果没有就创建，创建成功后，以后就用这个名字了。

id: oView.getId() 是给最后生产的html页面里的对话框的id前加上view的前缀。
设置id属性的效果：Hello World
不设置id属性的效果：Hello World
name: "sap.ui.demo.walkthrough.view.HelloDialog" 是用来告诉ui5，这个Fragment是来自哪个文件。是view目录下的HelloDialog.fragment.xml文件。
当包含Fragment的view销毁后，Fragment也会被自动销毁

oView.addDependent(oDialog); 创建成功后，让对话框的生命周期和view一致，数据绑定也一致。
约定：

• 私有函数和变量应始终以下划线开头。
• 使用addDependent方法，让Fragment的生命周期和它所在的view保持相同，并让Fragment的数据绑定与它所在的view相同。

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}
homePageTitle=Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog

vx:xiaoshitou5854