SAP UI5学习笔记之（五）Dialog and Fragment

接着上一篇的例子基础上做一个对话框的例子。

我们打算在Fragments里设计一个对话框，有两个按钮，

OK按钮按下把名字和公司添加到表格里，关闭对话框。

CANCEL按钮按下什么都不做，关闭对话框。

首先在view文件夹下新建一个AddDialog.fragment.xml。

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">    
<Dialog id="addDialog" title="确认追加">        
    <Label text="名字：{path: 'addModel>/Name'}" width="100%"/>        
    <Label text="公司：{path: 'addModel>/Company'}" width="100%"/>        
<beginButton>            
    <Button text="{i18n>dialogOkButtonText}" press=".onOkDialog"/>        
</beginButton>        
<endButton>            
    <Button text="{i18n>dialogCancelButtonText}" press=".onCancelDialog"/>        
</endButton>    
</Dialog>
</core:FragmentDefinition>

修改App.controller.js中的onClick事件，追加onOkDialog和onCancelDialog事件。

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/ui/core/Fragment"
], function (Controller, JSONModel, Fragment) {
    "use strict";

    return Controller.extend("sap.ui.demo.walkthrough.controller.App", {

        onClick: function () {

            var newName = this.byId("inputName").getValue();
            var newCompany = this.byId("inputCompany").getValue();
            var addModel = new JSONModel({
                "Name": newName,
                "Company": newCompany
            });
            this.getView().setModel(addModel, "addModel");

            var oView = this.getView();
            //如果没有相应Dialog，就调用sap.ui.xmlfragment实例化Fragment
            // create dialog lazily
            if (!this.byId("addDialog")) {
                // load asynchronous XML fragment
                Fragment.load({
                    id: oView.getId(),
                    name: "sap.ui.demo.walkthrough.view.AddDialog",
                    controller: this
                }).then(function (oDialog) {
                    // connect dialog to the root view of this component (models, lifecycle)
                    oView.addDependent(oDialog);
                    oDialog.open();
                });
            } else {
                this.byId("addDialog").open();
            }
        },
        onOkDialog: function () {
            this.byId("addDialog").close();
            this.getView().getModel().getProperty("/People").push({
                                                                "Name": this.getView().getModel("addModel").getProperty("/Name"),
                                                                "Company": this.getView().getModel("addModel").getProperty("/Company")
                                                            });
            this.getView().getModel().refresh();
        },
        onCancelDialog: function () {
            this.byId("addDialog").close();
        }
    });
});

 

 

i18n.properties加上Dialog上按钮的文本。

title=Title
appTitle=walkthrough
appDescription=App Description

dialogOkButtonText=OK
dialogCancelButtonText=CANCEL

这样就完成了Fragment实现dialog对话框的功能。测试一下。

 

 点击OK按钮，追加新记录到表中。