Fiori学习专题十五:Nested Views

Nested Views也就是嵌套页面,有时候我们同一个页面会用在多处,为了不重复构造页面,可以把这个页面剥离出来。

1.view文件夹下新建一个页面HelloPanel.view.xml

复制代码
<mvc:View
   controllerName="ui5.walkthrough.controller.HelloPanel"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Panel
      headerText="{i18n>helloPanelTitle}"
      class="sapUiResponsiveMargin"
      width="auto">
      <content>
         <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>

2.新建controller,webapp/controller/HelloPanel.controller.js

复制代码
sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast"
], (Controller, MessageToast) => {
   "use strict";

   return Controller.extend("ui5.walkthrough.controller.HelloPanel", {
      onShowHello() {
         // read msg from i18n model
         const oBundle = this.getView().getModel("i18n").getResourceBundle();
         const sRecipient = this.getView().getModel().getProperty("/recipient/name");
         const sMsg = oBundle.getText("helloMsg", [sRecipient]);

         // show message
         MessageToast.show(sMsg);
      }
   });
});

3.改造App.view.xml 以及 App.controller.js

复制代码
<mvc:View
	controllerName="ui5.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="ui5.walkthrough.view.HelloPanel"/>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], (Controller) => {
   "use strict";

   return Controller.extend("ui5.walkthrough.controller.App", {
   });
});

这里其实我们就是把Panel控件的内容抽出来放在一个新的页面上,再通过<mvc:XMLView viewName="ui5.walkthrough.view.HelloPanel"/>,放在App.view。同时对于新的页面,需要创建新的controller。

相关推荐
广州华锐视点7 分钟前
打破次元壁,VR 气象站开启气象学习新姿势
学习·vr
zizisuo9 分钟前
Java集合框架深度剖析:结构、并发与设计模式全解析
java·javascript·数据结构·设计模式
要加油哦~15 分钟前
刷题 | 牛客 - js中等题-下(更ing)30/54知识点&解答
java·开发语言·javascript
Python涛哥15 分钟前
前端流行框架Vue3教程:25. 组件保持存活
前端·javascript·vue.js
xixingzhe217 分钟前
监督学习与无监督学习区别
人工智能·学习·机器学习
Hello-Mr.Wang23 分钟前
基于 Vue3 与 exceljs 实现自定义导出 Excel 模板
前端·vue.js·excel
Raink老师1 小时前
1.3 如何安装 TypeScript?
前端·javascript·typescript
ST_小罗1 小时前
【Web前端】JavaScript入门与基础(二)
开发语言·前端·javascript
Greatlifeee1 小时前
VUE3+TS实现图片缩放移动弹窗
前端·javascript·vue.js
恰恰兄1 小时前
base 西安 | 前端面试问题汇总 (2023年8月)
前端·面试·职场和发展