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。

相关推荐
李匠20248 分钟前
C++负载均衡远程调用学习之消息路分发机制
运维·c++·学习·负载均衡
宁酱醇13 分钟前
CSS常用属性_(进阶)
前端·css
巴巴_羊18 分钟前
React useCallback函数
前端·react.js·前端框架
灏瀚星空38 分钟前
随机微分方程(SDE):股票价格模型、利率模型的构建
笔记·python·学习·数学建模·矩阵·开源·量子计算
渔舟唱晚@40 分钟前
React Native 从零开始完整教程(环境配置 → 国内镜像加速 → 运行项目)
javascript·react native·react.js
观测云1 小时前
端到端观测分析:从前端负载均衡到后端服务
运维·前端·负载均衡
kooboo china.2 小时前
Tailwind CSS实战技巧:从核心类到高效开发
前端·javascript·css·编辑器·html
卓怡学长2 小时前
w317汽车维修预约服务系统设计与实现
java·前端·spring boot·spring·汽车
sealaugh322 小时前
aws(学习笔记第四十课) image-content-search
笔记·学习·aws
Dovis(誓平步青云)2 小时前
【数据结构】励志大厂版·初阶(复习+刷题):栈与队列
c语言·开发语言·数据结构·经验分享·笔记·学习·算法