ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

SAPUI5 Walkthrough Step 15: Nested Views

2021-07-16 20:05:27  阅读:281  来源: 互联网

标签: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. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有