Is it possible in UI5 to get any behavior like screen size dependent properties for xml?
I got a table with a few columns:
<table>
<columns>
<column id="column1">
</column>
<column id="column2" hAlign="Begin">
</column>
<column id="column3" minScreenWidth="Tablet">
</column>
<columns>
[...]
</table>
The alignment of content for column 2
is left (hAlign="Begin"
). But on smartphone, where column3
is not visible due to the minScreenWidth="Tablet"
it looks not very well. So what I want to do is changing the property of column2 to hAlign="End"
when viewed on smartphone. How can I achieve this?
I added following line of Code to my controller:
sap.ui.Device.media.attachHandler(this.fnSizeChange, null, sap.ui.Device.media.RANGESETS.SAP_STANDARD);
But in the method fnSizeChange I am unable to retrieve the View..
this.byId("column");
ends in an error 'byId is not a function' because this does not refer to something named 'window'. Also this.getView().byId("column");
is not working.
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;
}
}
I solved this now by adding an event hangler for sap.ui.Device.media
in my onInit function like this:
sap.ui.Device.media.attachHandler(
this.reactResponsive,
this,
sap.ui.Device.media.RANGESETS.SAP_STANDARD
);
The problem was that I could not get the right context in the event handler. This was because I did not pass this
as second parameter in the attachHandler()
method.
After changing this I could access the whole thing without problems:
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;
}
}