标签:15 Views HelloPanel SAPUI5 Controller controller webapp sap view
https://sapui5.hana.ondemand.com/#/topic/df8c9c3d79b54c928855162bafcd88ee
嵌套视图。当我们页面上内容越来越多时,我们需要将内容进行分类并放置到不同的页面上。这样我们的程序将更便于管理和维护,同样页面也还可以被重复使用。
新增视图HelloPanel
选择中webapp目录, 右键New->SAPUI5 View。
在New SAPUI5 View页面上,View Type和 Namespace默认即可, 输入View Name: HelloPanel
创建完成后, 多出两个文件(webapp/view/HelloPanel.view.xml 和 webapp/controller/HelloPanel.controller.js )
修改webapp/view/HelloPanel.view.xml
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="sap.ui.demo.walkthrough.controller.HelloPanel" xmlns:html="http://www.w3.org/1999/xhtml"> <Panel headerText="{i18n>helloPanelTitle}" class="sapUiResponsiveMargin" width="auto"> <content> <Button text="{i18n>showHelloButtonText}" press=".onShowHello" class="myCustomButton"/> <Input value="{jsonModel>/recipient/name}" valueLiveUpdate="true" width="50%"/> <FormattedText htmlText="Hello {jsonModel>/recipient/name}" class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/> </content> </Panel> </mvc:View>
修改webapp/controller/HelloPanel.controller.js
sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast" ], function(Controller, MessageToast) { "use strict"; return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", { onShowHello: function() { var oBundle = this.getView().getModel("i18n").getResourceBundle(); var sRecipient = this.getView().getModel("jsonModel").getProperty("/recipient/name"); var sMsg = oBundle.getText("helloMsg", [sRecipient]); MessageToast.show(sMsg); } }); });
修改webapp/view/App.view.xml文件,删除Panel组件。使用 XMLView组件,引用我们的HelloPanel视图
<mvc:View controllerName="sap.ui.demo.walkthrough.controller.App" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"> <Shell> <App class="myAppDemoWT"> <pages> <Page title="{i18n>title}"> <content> <mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel"/> </content> </Page> </pages> </App> </Shell> </mvc:View>
修改webapp/controller/App.controller.js文件
sap.ui.define([ "sap/ui/core/mvc/Controller" ], function(Controller, MessageToast) { "use strict"; return Controller.extend("sap.ui.demo.walkthrough.controller.App", { }); });
执行
标签:15,Views,HelloPanel,SAPUI5,Controller,controller,webapp,sap,view
来源: https://www.cnblogs.com/keyuming/p/15021639.html
本站声明:
1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。