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加载操作，并打开。