Question

UI5是否有可能获得诸如xml的依赖于屏幕大小的属性之类的任何行为？

我有一张桌子，上面有几列：

<table>
   <columns>
       <column id="column1">
       </column>
       <column id="column2" hAlign="Begin">
       </column>
       <column id="column3" minScreenWidth="Tablet">
       </column>
   <columns>
[...]
</table>

column 2的内容对齐方式为左（hAlign="Begin"）。但是在智能手机上，由于column3而无法看到minScreenWidth="Tablet"的情况下，它看起来并不是很好。因此，我想做的是在智能手机上查看时将column2的属性更改为hAlign="End"。我该如何实现？

我向控制器添加了以下代码行： sap.ui.Device.media.attachHandler(this.fnSizeChange, null, sap.ui.Device.media.RANGESETS.SAP_STANDARD);

但是在方法fnSizeChange中，我无法检索视图。 this.byId("column");以错误“ byId不是函数”结尾，因为它没有引用名为“ window”的名称。另外this.getView().byId("column");无效。

fnSizeChange: function (mParams){
    switch(mParams.name){
        case "Phone":
            this.byId("column").setHAlign("End");  // NOT working
            this.getView().byId("column").setHAlign("End"); //NOT working either
            break;
        case "Tablet":
            this.byId("column").setHAlign("Begin");
            break;
        case "Desktop":
            this.byId("column").setHAlign("Begin");
            break;
    }
}

Answer 1

使用设备相关属性和表达式绑定https://help.sap.com/saphelp_ewm94/helpdata/de/8d/bd35e1577b445d8077b2bc6ad8b958/frameset.htm https://sapui5.hana.ondemand.com/#/topic/c98d57347ba444c6945f596584d2db45.html

<table>
   <columns>
       <column id="column1">
       </column>
       <column id="column2" hAlign="{= ${device>/system/phone} === true ? 'End' : 'Begin' }">
       </column>
       <column id="column3" minScreenWidth="Tablet">
       </column>
   <columns>
[...]
</table>

或格式化程序功能（视图）：

<table>
   <columns>
       <column id="column1">
       </column>
       <column id="column2" hAlign="{
                    path: '',
                    formatter: '.formatter.yourFormatter'
                }">
       </column>
       <column id="column3" minScreenWidth="Tablet">
       </column>
   <columns>
[...]
</table>

formatter.js

sap.ui.define([
    "sap/ui/Device",
], function (Device) {
    "use strict";
    return {
        yourFormatter: function (sValue) {
            console.log(Device);
            var sReturn = "";
            switch (Device.system) {
            case "phone": // desktop, phone, tablet, combi
                sReturn = "sap.ui.core.HorizontalAlign.End"; // maybe only "End" not sure right now
                break;
            default:
                sReturn = "sap.ui.core.HorizontalAlign.Begin"; // maybe only "Begin" not sure right now
                break;
            }
            return sReturn;
        }
    };

});

Answer 2

我现在通过在我的onInit函数中为sap.ui.Device.media添加一个事件挂钩来解决此问题：

sap.ui.Device.media.attachHandler(
    this.reactResponsive,
    this,
    sap.ui.Device.media.RANGESETS.SAP_STANDARD
);

问题是我无法在事件处理程序中获得正确的上下文。这是因为我没有在this方法中将attachHandler()作为第二个参数传递。

更改此设置后，我可以毫无问题地访问整个内容：

reactResponsive: function (oEvent) {
    switch (oEvent.name) {
        case "Phone":
            this.byId("crit").setHAlign("End");
            this.getView().byId("crit").setHAlign("End");
            break;
        case "Tablet":
            this.byId("crit").setHAlign("Begin");
            break;
        case "Desktop":
            this.byId("crit").setHAlign("Begin");
            break;
    }
}

Answer 3

您可以通过设置设备型号

来实现

XML视图

<Table>
  <columns>
    <Column hAlign="{device>/isPhone}">
      <Text text="Amount" />
    </Column>

控制器

onInit: function() {
    // set device model
    var oDeviceModel = new sap.ui.model.json.JSONModel({ 
      'isPhone' : (sap.ui.Device.system.phone) ? "End" : "Begin"
    });
    oDeviceModel.setDefaultBindingMode("OneWay");
    this.getView().setModel(oDeviceModel, "device");
},

您可以向模型添加完整的设备属性，并根据需要进行更改。

XML

3 个答案: