https://sapui5.hana.ondemand.com/#/topic/4da72985139b4b83b5f1c1e0c0d2ed5a

對話方塊和Fragments

fragment是一種特殊的檢視，他沒有自己的控制器（即controller.js檔案），因此fragment只能依賴於其他檢視。

通常，fragment都用於彈出視窗的開發。

新建檔案 webapp/view/HelloDialog.fragment.xml, 選中view目錄， 右鍵 New->File, 輸入File Name：HelloDialog.fragment.xml

新增title屬性（標題）為 Hello

<
 
core:FragmentDefinition 
    xmlns="sap.m" 
    xmlns:core="sap.ui.core">
    <Dialog 
        id="helloDialog" 
        title="Hello">
    </Dialog>
</core:FragmentDefinition>

修改webapp/view/HelloPanel.view.xml檔案，增加helloDialogButton按鈕

<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
             
 
id="helloDialogButton"
             text="{i18n>openDialogButtonText}"
             press=".onOpenDialog"
             class="sapUiSmallMarginEnd"/>            
            <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/i18n/i18n.properties檔案， 增加openDialogButtonText對應的文字

openDialogButtonText=Say Hello With Dialog

修改webapp/controller/HelloPanel.controller.js檔案， 增加fragment的顯示

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);
        },
        onOpenDialog: function() {
            if (!this.oDialog) {
                this.oDialog = sap.ui.xmlfragment(
                    this.getView().getId(),//檢視ID
                    "sap.ui.demo.walkthrough.view.HelloDialog",//fragemtn檔案的路徑
                    this  //this表示控制器為當前controller.js
                ); //定義fragment對話方塊
                this.getView().addDependent(this.oDialog); //新增和檢視的依賴
            }
            this.oDialog.open(); //開啟對話方塊
        }
    });
});

執行