Quantcast
Channel: SCN : All Content - SAPUI5 Developer Center
Viewing all articles
Browse latest Browse all 6178

Design Pattern for UI5 async behavior

$
0
0

Hi all,

I'm facing a design issue which I guess is pretty common in UI5/JS/Ajax development.

The topic is related to ajax calls being asynchronous and the subsequent needs to provide handlers to the typical ajax call:

 

//Controller.js
doSomething: function(){
jQuery.ajax({  type : 'POST',  url : executionUri,  contentType : 'application/json',  processData : false,  success : function(jsonData) {  //update model with received data
....
 //do something with UI here
....  },  error : function(){
//handle error
}  });
}

This method is exposed by the controller and invoked by the view, e.g. when a button is clicked.

The point is that when the ajax call completes we might need to perform some action in the UI which cannot be handled only changing the model.

For instance, we might need to show a popup or to show a message somewhere in the view.

The first option would be to get a handle to the UI element from the controller like:

 

var uiControl = sap.ui.getCore().byId("myControlId");
//do something with the UiControl, like show a message to users

However I don't like the idea of the controller, or even a class dedicated to HTTP calls, being aware of the IDs of UI elements.

This looks like tight coupling to me.

A different alternative might be to let the view pass the handler function to the controller like:

 

//Controller.js
doSomething: function(uiSuccessHandler, uiErrorHandler /* these must be a functions performing UI tasks in the view */){
jQuery.ajax({  type : 'POST',  url : executionUri,  contentType : 'application/json',  processData : false,  success : function(jsonData) {  //update model with received data
.....
//now the UI is updated by the handler passed as parameter by the view itself
uiSuccessHandler();  },  error : function(){
//handle error
....
//now the UI is updated by the handler passed as parameter by the view itself
uiErrorHandler();
}
}

Is there any better alternative to prevent tight coupling while still staying asynchronous?

Thanks a lot

Regards

Vincenzo


Viewing all articles
Browse latest Browse all 6178

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>