XML 的 UI5 屏幕尺寸相关属性

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 不是函数”结尾，因为这不引用名为“窗口”的东西。 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

我现在通过在我的 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 2

您可以通过设置设备型号

来实现

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");
},

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

Answer 3

使用设备相关属性和表达式绑定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;
        }
    };

});