UI5_Walkthrough_Step 17: Fragment Callbacks 对话框按钮事件处理 && Step 18: Icons图标使用

一、基本信息

此练习针对图标的使用和对话框事件的处理

二、练习

新建文件夹17，复制UI5_Walkthrough_Step 16: 对话框（Dialogs）和片段（Fragments) 练习文件夹下内容到17文件夹

2.1 HelloDialog.fragment.xml

新增content也标签加入图标信息

新增beginButton标签添加对话框事件

XML 复制代码

<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:core="sap.ui.core">
   <Dialog
      id="helloDialog"
      title="{i18n>textDesc} {/recipient/name}">
      <content>
         <core:Icon
            src="sap-icon://hello-world"
            size="8rem"
            class="sapUiMediumMargin"/>
      </content>
       <beginButton >
         <Button
            type="Emphasized"
            text="{i18n>dialogCloseButtonText}"
            press=".onCloseDialog"/>
      </beginButton>
    </Dialog>
</core:FragmentDefinition>

聚合名称对应XML标签位置与用途常见按钮类型

beginButton <beginButton> 位于对话框底部按钮栏的左侧（起始位置）。 "确认"、"同意"、"提交" 等主操作按钮（通常为 type="Emphasized"）。

endButton <endButton> 位于对话框底部按钮栏的右侧（结束位置）。 "取消"、"关闭"、"返回" 等辅助或否定操作按钮。

聚合名称	对应XML标签	位置与用途	常见按钮类型
`beginButton`	`<beginButton>`	位于对话框底部按钮栏的左侧（起始位置）。	"确认"、"同意"、"提交" 等主操作按钮（通常为 `type="Emphasized"`）。
`endButton`	`<endButton>`	位于对话框底部按钮栏的右侧（结束位置）。	"取消"、"关闭"、"返回" 等辅助或否定操作按钮。

2.2 HelloPanel.view.xml

按钮helloDialogButton 新增图标icon="sap-icon://world"

2.3 HelloPanel.controller.js

新增HelloDialog.fragment.xml 中新增按钮的press事件处理函数onCloseDialog

javascript 复制代码

sap.ui.define(
  ["sap/ui/core/mvc/Controller", "sap/m/MessageToast"],
  function (Controller, MessageToast) {
    "use strict";
    return Controller.extend("sap.ui5.walkthrough.controller.HelloPanel", {
      onPress: function () {
        var sRecipient = this.getView()
          .getModel()
          .getProperty("/recipient/name");
        var oBundle = this.getView().getModel("i18n").getResourceBundle();
        var sMsg = oBundle.getText("Msg", [sRecipient]);
        MessageToast.show(sMsg);
      },
      onOpenDialog: function () {
        // 1. 检查对话框是否已加载
        if (!this.pDialog) {
          // 1. 首次加载对话框（异步）
          this.pDialog = this.loadFragment({
            name: "sap.ui5.walkthrough.view.HelloDialog",
          });
        }
        this.pDialog.then(function (oDialog) {
          oDialog.open(); // 3. 等待加载完成并打开
        });
      },
      onCloseDialog: function () {
        this.byId("helloDialog").close();
      },
    });
  }
);

2.4 i18n 文件

i18n.properties 新增文本信息

javascript 复制代码

# App Descriptor
apptitle=SAPUI5 Walkthrough Step 16: Dialogs and Fragments
appTitle=SAPUI5 Walkthrough Step 16: Dialogs and Fragments
appDescription= Descriptor for Applications

homePageTitle=PageTitle
panelTitle1=PanelTitle

ButtonText=Click me
Msg=Hello {0}
inputText= Step 16: Dialogs and Fragments
textDesc=Hello
openDialogButtonText=Dialogs and Fragments
helloDialogMsg =helloDialoginf
dialogCloseButtonText=Ok

三、运行结果

备注：sap-icon 查找

Icon Explorer