All three are the same ui.get() lookup of the BPM UI Toolkit; they differ in the starting point of the search:
- me.ui.get("X") - me is the coach view whose event handler is running (the control itself in a control event, e.g. a button's on click). The lookup starts at that control: me.ui.get("../Sibling") walks up, me.ui.get("Child") looks inside a container control. Use it inside control events and custom coach views where the view must not know the page layout (reusable).
- this.ui.get("X") - this depends on where the code runs: in a coach view's inline JavaScript (load / change / view handlers) this is the coach view, so it equals me; inside a nested function or a callback this is not the view any more (it is window or the event source) - that is why the toolkit passes me and why people write var _this = this; at the top (question 2506).
- page.ui.get("X") - page is the coach (the page root). The lookup starts from the top of the coach, so page.ui.get("Section1/Table/Amount") reaches anything on the coach by its full path, regardless of where the code runs. Use it in coach-level scripts and when a control must talk to an unrelated part of the page.
// button "Recalculate" inside a Collapsible Panel "Details", table "Lines" elsewhere on the page
me.ui.get("../Total").setData(sum); // relative: sibling of the button inside "Details"
page.ui.get("Lines").getData(); // absolute: any control by path from the coach root
var _this = this; // in a coach view handler; keep it for callbacks
setTimeout(function () { _this.ui.get("Status").setText("done"); }, 500); // "this" would be wrong hereRule of thumb: me in control events, _this (captured this) in coach view code with callbacks, page for absolute addressing; $${X} is a shortcut for page.ui.get("X") in control event handlers.
References