Fiori学习笔记 - 事件之常用控件

在Fiori开发过程中，CheckBox、Select，List控件会经常用到，本文记录了这三种控件的事件定义、触发的用法。

view

<mvc:View controllerName="demo.eventDemoCase.controller.FirstView" xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core">
    <App>
        <pages>
            <Page title="{i18n>title}">
                <content>
                    <CheckBox text="testCheckBoxEvent" select="selectedCheckBox"></CheckBox>
                    <Select items="{path: '/UserList'}" change="selectionChange">
                        <core:Item key="{ID}" text="{Name}"/>
                    </Select>
                    <List headerText="My Test List" selectionChange="onSelectionChange" itemPress="onSelectionChange"
                        mode="{= ${device>/system/phone} ? 'None' : 'SingleSelectMaster'}" items="{path: '/UserList'}">
                        <items>
                            <CustomListItem type="{= ${device>/system/phone} ? 'Active' : 'Inactive'}">
                                <HBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom">
                                    <Label text="{Name}"/>
                                </HBox>
                            </CustomListItem>
                        </items>
                        <swipeContent>
                            <Button text="Delete Item" type="Reject" press="handleReject"/>
                        </swipeContent>
                    </List>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

controller

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

    return Controller.extend("demo.eventDemoCase.controller.FirstView", {
        onInit: function() {
            this.router = sap.ui.core.UIComponent.getRouterFor(this);
            this.currentModel = new JSONModel({
                UserList: [{
                    ID: 0,
                    Name: 'Name 1'
                }, {
                    ID: 1,
                    Name: 'Name 2'
                }]
            });
            this.getView().setModel(this.currentModel);
        },
        onSelectionChange: function(oEvent) {
            MessageToast.show(oEvent.getParameter("listItem").getBindingContext().sPath);//显示当前点击该条对象的路径
            console.log(this.getView().getModel().getProperty(oEvent.getParameter("listItem").getBindingContext().sPath));//输出该点击对象路径所对应的值
        },
        selectedCheckBox: function(oEvent) {
            //oEvent包含所有参数信息
            MessageToast.show(oEvent.getParameter('selected'));
            //oEvent.getParameters();可以拿到该组件下所有parameter的集合
        },
        selectionChange: function(oEvent) {
            //oEvent.getParameter('selectedItem').getKey();拿到该选中条目的key值
            MessageToast.show(oEvent.getParameter('selectedItem').getBindingContext().sPath);
        }
    });
});

其中几个参数特在此进行说明。

selectionChange 和 itemPress ：都是用于点击事件的处理，selectionChange一般用于PC端， itemPress一般在手机端触发
{= ${device>/system/phone} ? 'None' : 'SingleSelectMaster'}：一个三目运算，作用是判断当前设备是桌面还是手机，从而设定在不同设备上的选中状态。${}是取到相应路径下的值，=用来判断是true还是false
device： 在 Component.js 中 init 方法里定义，

this.setModel(models.createDeviceModel(), "device");

这里的models则是定义在model文件夹下的一个文件，便于模块化管理代码。
下面将分别贴出Component.js和models.js的代码。

Component.js

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "demo/eventDemoCase/model/models"
], function(UIComponent, Device, models) {
    "use strict";

    return UIComponent.extend("demo.eventDemoCase.Component", {
        metadata: {
            manifest: "json"
        },
        init: function() {
            jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);
            var router = this.getRouter();
            this.routeHandler = new sap.m.routing.RouteMatchedHandler(router);
            router.initialize();
            // set the device model
            this.setModel(models.createDeviceModel(), "device");
        }
    });
});

models.js

sap.ui.define([
    "sap/ui/model/json/JSONModel",
    "sap/ui/Device"
], function(JSONModel, Device) {
    "use strict";
    return {
        createDeviceModel: function() {
            var oModel = new JSONModel(Device);
            oModel.setDefaultBindingMode("OneWay");
            return oModel;
        }
    };
});

希望系统学习Fiori的朋友可以移步到下方视频链接， 了解更多Fiori开发流程和编程技巧。
http://edu.csdn.net/course/detail/5046