We know that UI5 framework provides a convenient Diagnostics tool for application developer to set breakpoint on a given method of control class. The Diagnostics tool could be launched via Ctrl+Alt+Shift+S.

We can select the control and its methods where we would like to set breakpoint. Once we click “Add breakpoint” button, next time if the corresponding method is called, the breakpoint would be triggered, without application developers’ manual set in Chrome development tool any more.

/wp-content/uploads/2016/05/clipboard1_952586.png

It looks like a magic? Today my colleague asked me how this feature is implemented, so I have a look at UI5 framework source code.

We can again simply use Chrome development tool for research.

For example I would like to set breakpoint on method _bindAggregation:

/wp-content/uploads/2016/05/clipboard2_952587.png

Here the AOP idea is used.

/wp-content/uploads/2016/05/clipboard3_952588.png

/wp-content/uploads/2016/05/clipboard4_952592.png

The hook implementation is simply returning a new function via closure within which the original method is called ( line 521 ) with the new feature injected via keyword debugger.

/wp-content/uploads/2016/05/clipboard5_952593.png

After the logic is understood, we can practice in our application code.

Suppose I would like to have my button press event handler supported by this mechanism, I can simply write the following pseudo code:


var myButton = new sap.ui.commons.Button("btn",{
   text: "press me~"
  });
var handler = function(oEvent){
   oController.onPress(oEvent);
};
handler = bDebugModeActivated? util.tool.methodHook(handler): handler;
myButton.attachPress(handler);

In the runtime, once I press the button, debugger will be triggered with the following callstack:

/wp-content/uploads/2016/05/clipboard6_952594.png

Just step into line 36:


/wp-content/uploads/2016/05/clipboard7_952595.png

and then our event handler could be debugged:

/wp-content/uploads/2016/05/clipboard8_952596.png

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply