IT干货网

UI5-文档-4.17-Fragment Callbacks

flyfish 2022年03月09日 SAP 163 0

现在我们已经集成了对话框,是时候添加一些用户交互了。用户肯定希望在某个时候再次关闭对话框,因此我们添加一个按钮来关闭对话框并分配一个事件处理程序。

Preview

 

The dialog now has an "OK" button

Coding

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

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 () { 
 
                       // 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); 
 
               }, 
 
  
 
               onOpenDialog : function () { 
 
                       var oView = this.getView(); 
 
                       var oDialog = oView.byId("helloDialog"); 
 
                       // create dialog lazily 
 
                       if (!oDialog) { 
 
                               // create dialog via fragment factory 
 
                               oDialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.walkthrough.view.HelloDialog", this); 
 
                               // connect dialog to view (models, lifecycle) 
 
                               oView.addDependent(oDialog); 
 
                       } 
 
  
 
                       oDialog.open(); 
 
               }, 
 
  
 
               onCloseDialog : function () { 
 
                       this.getView().byId("helloDialog").close(); 
 
               } 
 
        }); 
 
});

如前所述,片段是纯UI重用工件,没有控制器。ui的第三个参数 xmlfragment函数是可选的,它允许将引用传递给(控制器)对象。在我们的对话框中,我们引用HelloPanel控制器。然而,第三个参数不一定是控制器,但可以是任何对象。只是不要忘记这个关键字。

事件处理程序函数被放入相同的控制器文件中,它通过访问返回对话框的内部助手函数来关闭对话框。

webapp/view/HelloDialog.fragment.xml

<core:FragmentDefinition 
 
   xmlns="sap.m" 
 
   xmlns:core="sap.ui.core" > 
 
   <Dialog 
 
      id="helloDialog" 
 
      title ="Hello {/recipient/name}"> 
 
      <beginButton> 
 
         <Button 
 
            text="{i18n>dialogCloseButtonText}" 
 
            press="onCloseDialog"/> 
 
      </beginButton> 
 
   </Dialog> 
 
</core:FragmentDefinition>

在片段定义中,我们将一个按钮添加到对话框的beginButton聚合中。press处理程序引用的是一个名为onCloseDialog的事件处理程序,由于我们传递了对HelloPanel控制器的引用,所以在按下按钮时将在那里调用该方法。该对话框有一个名为beginButton和endButton的聚合。在这两个聚合中放置按钮可以确保beginButton位于UI上的endButton之前。然而,before的含义取决于当前语言的文本方向。因此,我们使用术语开始和结束作为“左”和“右”的同义词。在从左到右方向的语言中,beginButton将呈现在左边,endButton位于对话框页脚的右边;在特定语言的从右到左模式中,顺序是交换的。

webapp/i18n/i18n.properties

# App Descriptor 
 
appTitle=Hello World 
 
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5 
 
  
 
# Hello Panel 
 
showHelloButtonText=Say Hello 
 
helloMsg=Hello {0} 
 
homePageTitle=Walkthrough 
 
helloPanelTitle=Hello World 
 
openDialogButtonText=Say Hello With Dialog 
 
dialogCloseButtonText=Ok

文本包由两个用于打开按钮和对话框关闭按钮的新文本扩展。

Parent topic: Walkthrough

Previous: Step 16: Dialogs and Fragments

Next: Step 18: Icons

Related Information

Reusing UI Parts: Fragments

Instantiation of Fragments


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

UI5-文档-4.16-Dialogs and Fragments