SAPUI5教程——ActionSheet的应用

前言

ActionSheet是一个点击弹出popover的基本效果，可以让用户执行一定操作事件，如下图：

定义controller

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

    var CController = Controller.extend("richard.demo.ActionSheet.C", {
        handleOpen : function (oEvent) {
            var oButton = oEvent.getSource();

            // create action sheet only once
            if (!this._actionSheet) {
                this._actionSheet = sap.ui.xmlfragment(
                    "richard.demo.ActionSheet.ActionSheet",
                    this
                );
                this.getView().addDependent(this._actionSheet);
            }

            this._actionSheet.openBy(oButton);
        }
    });

    return CController;

});

代码中主要通过sap.ui.xmlfragment实例加载一个fragment，添加到当前view当中。并公国openBy执行打开的操作。

定义ActionSheetFragment

<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <ActionSheet
        title="Choose Your Action"
        showCancelButton="true"
        placement="Bottom">
        <buttons>
            <Button text="Reject" icon="sap-icon://decline" />
            <Button text="Accept" icon="sap-icon://accept" />
            <Button text="Email" icon="sap-icon://email" />
            <Button text="Forward" icon="sap-icon://forward" />
            <Button text="Delete" icon="sap-icon://delete" />
            <Button text="Other" />
        </buttons>
    </ActionSheet>
</core:FragmentDefinition>

fragment的定义可以通过core:FragmentDefinition来定义，已达到部分view的重用效果。

定义触发的按钮，打开actionsheet

<Button text="Open Action Sheet"
                press="handleOpen"
                class="sapUiSmallMarginBottom" />

这里主要是通过Button的press方法触发handleOpen，执行controler中的fragment加载操作，并打开。