Walkthrough-Step15 Nested Views

页面的复用，这节主要是把之前页面中的panel分离出来单独做一个view，它有自己单独的处理逻辑，这样就可以方便了view的复用

webapp/view/App.view.xml

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true">
	<Shell>
		<App class="myAppDemoWT">
			<pages>
				<Page title="{i18n>homePageTitle}">
					<content>
						<mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel"/>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

将之前页面page下的整个panel控件，包括它的子控件拿掉，写一个XMLView在这里<mvc:XMLView viewName="Step15_NestedView.view.HelloPanel"/>注意命名空间是mvc:

webapp/view/HelloPanel.view.xml
新建 一个xmlview HelloPanel.view.xml

向导创建完要把<app><pages><page>这些节点删除，然后把之前App View中的Panel的内容完全copy过来

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="Step15_NestedView.controller.HelloPanel"
	xmlns:html="http://www.w3.org/1999/xhtml">
	<Panel headerText="{i18n>panelTitle}" class="sapUiResponsiveMargin" width="auto">
		<content>
			<Button text="ClickMe" width="100px" class="myCustomButton" id="__button0" press="onClickMe"/>
			<Input width="200px" id="__input0" value="{aaa>/recipient/name}" description="Hello {aaa>/recipient/name}" valueLiveUpdate="true"/>
			<Text id="__text0" text="{i18n>newText}" class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
		</content>
	</Panel>
</mvc:View>

webapp/controller/HelloPanel.controller.js
同时也要把App controller中的按钮点击事件剪切过来：

sap.ui.define([
	"sap/ui/core/mvc/Controller", "sap/m/MessageToast"
], function(Controller, MessageToast) {
	"use strict";
	return Controller.extend("Step15_NestedView.controller.HelloPanel", {
		onClickMe: function(oEvent) {
			//read from i18n Model
			var oBundle = this.getView().getModel("i18n").getResourceBundle();
			var sRecipient = this.getView().getModel("aaa").getProperty("/recipient/name");
			//var sMsg = oBundle.getText("helloMsg", [sRecipient]);
			var aStr = "bbbb";
			var sMsg1 = oBundle.getText("newText", [sRecipient, aStr]);
			MessageToast.show(sMsg1);
			//This code was generated by the layout editor.
			//MessageToast.show("you Clicked me!");
		}
	});
});

执行效果是一样的