Setting coordinates of an object inside a page in SAPUI5

Question

I want to add an image in the page inside a view in sapui5 at a specific location using jquery.offset() method. However, it is not working. The debugger shows the default offset value of the image. Please help.

I have an image with id, "id_image", and I used the following code for setting the offset of the image :

var Image = new sap.m.Image("id_image",{
            src:"images/myImage.png"
        });
$("#id_image").offset({top:"200px", left:"300px"});
return new sap.m.Page("id_page",{
            title: "View",
            content: [Image

            ]
        });

Answer 1

As mentioned, there are a few issues with your code:

1. You are setting the offset of an element which isn't loaded in the DOM yet, so setting an offset at this stage would not have any effect. Best solution is to set it in the onAfterRendering event of the view.
2. According to the jQuery API, the coordinates of the offset() method only accepts numbers (10, 20, etc) whereas you have provided a CSS unit ('100px' etc)

See this working jsbin example http://jsbin.com/jafuk/1/edit where the offset is set in the onAfterRendering event.

And since you have asked about animation in another topic, I have added that as a bonus. I'll leave it as an exercise on how to detach a control/image from one MatrixLayout(Cell) to another :-)

Answer 2

Generally, HTML transformations using JQuery is a not good idea. For your purposes you should use sap.ui.commons.layout.AbsoluteLayout to define image offset.

var oImage = new sap.m.Image("id_image",{
        src:"images/myImage.png"
    });
var oLayout = new sap.ui.commons.layout.AbsoluteLayout({
        width: "" //Adjust width
        height: "" //and height for container
    }).addContent(oImage, {top:"200px",left:"300px"});
return new sap.m.Page("id_page",{
        title: "View",
        content: [oLayout

        ]
    });