×
首页SAP正文
IT干货网

UI5-文档-4.15-Nested Views

qq123 2022年03月09日 SAP 197 0

我们的面板内容变得越来越复杂，现在是时候将面板内容移动到一个单独的视图中了。使用这种方法，应用程序结构更容易理解，应用程序的各个部分可以重用。

Preview

 

The panel content is now refactored to a separate view (No visual changes to last step)

Coding

You can view and download all files at Walkthrough - Step 15.

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" > 
 
   <App class="myAppDemoWT"> 
 
      <pages> 
 
         <Page title="{i18n>homePageTitle}"> 
 
            <content> 
 
               <mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel"/> 
 
            </content> 
 
         </Page> 
 
      </pages> 
 
   </App> 
 
</mvc:View>

 我们不会将面板及其内容直接放到App视图中，而是将其移动到一个新的单独的HelloPanel视图中。我们在面板的内容聚合中使用XMLView标记来引用它。

webapp/view/HelloPanel.view.xml (New)

<mvc:View 
 
   controllerName="sap.ui.demo.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="myAppDemoWT myCustomButton"/> 
 
         <Input 
 
            value="{/recipient/name}" 
 
            valueLiveUpdate="true" 
 
            width="60%"/> 
 
         <FormattedText 
 
            htmlText="Hello {/recipient/name}" 
 
            class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/> 
 
      </content> 
 
   </Panel> 
 
</mvc:View>

 面板的全部内容现在添加到新文件HelloPanel.view.xml中。我们还通过设置XML视图的controllerName属性来指定视图的控制器。

webapp/controller/HelloPanel.controller.js (New)

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 () { 
 
         // read msg from i18n model 
 
         var oBundle = this.getView().getModel("i18n").getResourceBundle(); 
 
         var sRecipient = this.getView().getModel().getProperty("/recipient/name"); 
 
         var sMsg = oBundle.getText("helloMsg", [sRecipient]); 
 
         // show message 
 
         MessageToast.show(sMsg); 
 
      } 
 
   }); 
 
});

 为了拥有可重用资产，onShowHello方法也从app控制器移动到HelloPanel控制器。

webapp/controller/App.controller.js

sap.ui.define([ 
 
   "sap/ui/core/mvc/Controller" 
 
], function (Controller) { 
 
   "use strict"; 
 
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", { 
 
   }); 
 
});

 我们现在已经将所有东西移出app视图和控制器。应用程序控制器目前仍然是一个空存根，我们稍后将使用它来添加更多的功能。

Parent topic: Walkthrough

Previous: Step 14: Custom CSS and Theme Colors

Next: Step 16: Dialogs and Fragments


评论关闭
IT干货网
IT干货网 SAP

微信公众号号：IT虾米 （左侧二维码扫一扫）欢迎添加！