The DWR framework is based on remote execution of java methods. Hence we end of invoking javascript functions that call the relevant java method using DWREngine.
The YUI has datasource component that retrieves the data from backend using any of the following datasource types as mentioned here.
- DataSource
- DataSourceBase
- Date
- DateLocale
- FunctionDataSource
- LocalDataSource
- Number
- ScriptNodeDataSource
- XHRDataSource
Since both of the frameworks can be used to get data asynchronously, we could use either of the frameworks for getting the data.
But there are few distinct advantages of using an approach where in we combine both the frameworks. Here are the few scenarios both the frameworks can be combined.
- Already using DWR framework and using YUI components for better usability and eye-candiness.
- XHRDataSource can be used to get data asynchronously but we need to give a url (usually a jsp page). This would lead us in breaking MVC rules because the jsp would then contain some logic etc. Another way of getting around (removing code from jsp) is providing a url of Spring Controller. But by doing this we are using controller for something not meant to be used.
Having described the reasons when to choose YUI+DWR approach, lets get into the specifics of how to implement this approach.
Since in DWR framework, we use javascript functions to marshal our requests to server, it makes sense for us to use FunctionDataSource in YUI framework. Below is the code snippet where we create YUI datasource of type FunctionDataSource and pass the function name. The server method returns the results in form of json string. Hence the response type is set to TYPE_JSON.
var myDataSource = new YAHOO.util.FunctionDataSource(getDataFromServer);
myDataSource.connMethodPost = true;
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.responseSchema = {
resultsList:"dataFromServer",
fields: [{key:"checked", parser:YAHOO.util.DataSource.parseBoolean},"name","title"]
};
Now lets look into function getDataFromServer.
function getDataFromServer()
{
var resultsToBeReturned="";
var callBackProxy = function(results){
resultsToBeReturned= results;
};
var callMetaData = { callback:callBackProxy, async:false};
var userId = document.getElementById("userIdForDialog").value;
javascriptObject.getDataFromServer(userId, callMetaData);
return resultsToBeReturned;
}
From the function above, lets examine highlighted piece of code.
javascriptObject.getDataFromServer(userId, callMetaData);
In the above statement we make a call to function getDataFromServer of DWR created javascriptObject Object. It takes one parameter userId. We also pass the callback function as the second parameter in the form of callMetaData(an array that defines callback function definition and mode of connection). We specify that async:false, because we want the execution to stop until the data is received. The callBack function is simple. It returns the json string we received from the server.
This datasource can be used in any of the YUI rendering elements such as datatable, tabview, treeview etc.
The inspiration for this approach is taken from the blog of Carlos on jroller.
Uploading ....