August 12, 2013 at 13:14jqGrid for Raudus
The purpose of this article is not an introduction to the technologies or tools of the developer that are mentioned in it in one way or another, the main goal is to give a little impetus to those who are just starting to become interested in these technologies or tools and would like to understand whether they will be useful and whether they will cover all current needs. However, despite this, I would like to say a few introductory words about Raudus .
Did you come acrosswith the task of rewriting the code of a rather successful and already used Windows application written in Delphi in order to turn it into a Web application, but at the same time limit it to the minimum number of source code changes? If yes, then this article is for you. There are several ways to solve this problem, but I would like to dwell on one of them. His name is Raudus .
Raudus is a web-framework and set of components for Delphi, allowing you to create Rich Internet Applications (RIA) . At the same time, the development process itself is not much different from the development of a regular desktop application. The set of visual components provided at the same time contains analogues of most standard components for Delphi - the so-called Raudus VCL. You use these visual components, as well as the non-visual ones familiar to you (for example, direct access components to the DBMS), and compile a console application that runs as an HTTP server . In fact, all the logic of your application remains on the side of this server, and the visual part, that is, the GUI, is transferred to the user's browser. The communication needs of the visual client and server are fully covered by the capabilities of AJAX . I will not dwell in more detail on the description of this solution. There are small examples on the Raudus website, you can also freely download the Raudus component library, install it and try to run the examples that come with the kit.
And yet, in my case, the standard set of components was not enough. For example, I really wanted to use a fully functional analogue of TDBGrid: with filters, with sorting, with colspan, with paging, etc. Immediately, jqGrid first came to mind . But how to make him “take root” in Raudus and is it even possible?
Fortunately , in extreme versions of Raudus there is a special class TRaExtendableControlGCD , inheriting which you can potentially convert any jQuery UI component, jQuery plugin, as well as components from ExtJS, QooxDoo, etc. to the Raudus component. At the same time, the newly-appeared component will look the same, both in DesignTime and in RunTime.
Class TRaExtendableControlGCDIt has three key methods: RaDrawExtend , RaUpgradeExtend and RaRouteExtend , overriding which you essentially write a shell around, for example, jqGrid, so that Raudus "understands" how to work with this component.
RaDrawExtend - overriding this method, you write JavaScript code that initializes jqGrid.
RaRouteExtend - overriding this method, you write the code that should be executed during some action in the client part of the jqGrid component. Those. this is the reaction place to any AJAX request from jqGrid.
RaUpgradeExtend- overriding this method, you write JavaScript code that should be executed after the code in the RaRouteExtend method. Those. this is the place where the server side of the component acts on the client side of the component.
How to use these three methods in general terms and what comes out of it, you can see in the examples supplied with the Raudus distribution. There, in particular, examples of embedding jqDatePicker and TinyMCE are contained.
The very first and obvious thing that needs to be implemented in the case of jqGrid is filling it with data and organizing paging. How to do this in this case?
It is known that jqGrid supports several datatype (methods of receiving data): json (jsonstring), xml (xmlstring), local, javascript and function. functionallows you to specify the javascript function as the source of data, and inside this function you can query the data from the server side of the application, then use the addJSONData method to fill the jqGrid with the received data. We will use this method.
So, in the jqGrid initialization line, we specify datatype and determine the function in which the request for the initial and next portion of data will be requested:
The me.route method inside our getData function is the way to access the client part of the component to the server part using AJAX. Thus, we request from the server side a data set based on the parameters contained in postdata . All request parameters are packed into a JSON string. postdata contains data request utility parameters, which are described in the jqGrid documentation, among them: the current page number with the next batch of data, the number of records in the batch of data, sorting, filter, etc. On the server side, the RaRouteExtend method is triggered, in which we process the sent request parameters, form the necessary portion of data in the form of a JSON string and send this portion back to jqGrid in the RaUpgradeExtend method like this:
So, what happens during the first call :
1. The user first loads the form with jqGrid. The server method RaDrawExtend is executed, jqGrid is initialized.
2. jqGrid performs the javascript getData () function to get the first chunk of data.
3. The server method RaRouteExtend is executed. A data set is generated based on the data request parameters, which indicate that the first data page is requested (page = 1). The data set is serialized to a JSON string.
4. The server method RaUpgradeExtend is executed, in which javascript code is added that adds data to jqGrid.
5.The javascript code written in the RaUpgradeExtend method is executed and the jqGrid is filled with data.
What happens when you go to the page with the next piece of data :
1. The user goes to the next page with the data in jqGrid.
2. jqGrid again performs the javascript getData () function to get the next batch of data.
3. The server method RaRouteExtend is executed. A data set is generated based on the data request parameters, which indicate that the next data page is being requested (page = 2, page = 3, etc.). The data set is serialized to a JSON string.
4. The server method RaUpgradeExtend is executed, in which javascript code is added that adds data to jqGrid.
5.The javascript code written in the RaUpgradeExtend method is executed and the jqGrid is filled with data.
That, in fact, is all. If you have any questions, ask. Perhaps the article will have to add a number of refinements.
Thank you for your attention and success to you!
Did you come acrosswith the task of rewriting the code of a rather successful and already used Windows application written in Delphi in order to turn it into a Web application, but at the same time limit it to the minimum number of source code changes? If yes, then this article is for you. There are several ways to solve this problem, but I would like to dwell on one of them. His name is Raudus .
Raudus is a web-framework and set of components for Delphi, allowing you to create Rich Internet Applications (RIA) . At the same time, the development process itself is not much different from the development of a regular desktop application. The set of visual components provided at the same time contains analogues of most standard components for Delphi - the so-called Raudus VCL. You use these visual components, as well as the non-visual ones familiar to you (for example, direct access components to the DBMS), and compile a console application that runs as an HTTP server . In fact, all the logic of your application remains on the side of this server, and the visual part, that is, the GUI, is transferred to the user's browser. The communication needs of the visual client and server are fully covered by the capabilities of AJAX . I will not dwell in more detail on the description of this solution. There are small examples on the Raudus website, you can also freely download the Raudus component library, install it and try to run the examples that come with the kit.
And yet, in my case, the standard set of components was not enough. For example, I really wanted to use a fully functional analogue of TDBGrid: with filters, with sorting, with colspan, with paging, etc. Immediately, jqGrid first came to mind . But how to make him “take root” in Raudus and is it even possible?
Fortunately , in extreme versions of Raudus there is a special class TRaExtendableControlGCD , inheriting which you can potentially convert any jQuery UI component, jQuery plugin, as well as components from ExtJS, QooxDoo, etc. to the Raudus component. At the same time, the newly-appeared component will look the same, both in DesignTime and in RunTime.
Class TRaExtendableControlGCDIt has three key methods: RaDrawExtend , RaUpgradeExtend and RaRouteExtend , overriding which you essentially write a shell around, for example, jqGrid, so that Raudus "understands" how to work with this component.
RaDrawExtend - overriding this method, you write JavaScript code that initializes jqGrid.
RaRouteExtend - overriding this method, you write the code that should be executed during some action in the client part of the jqGrid component. Those. this is the reaction place to any AJAX request from jqGrid.
RaUpgradeExtend- overriding this method, you write JavaScript code that should be executed after the code in the RaRouteExtend method. Those. this is the place where the server side of the component acts on the client side of the component.
How to use these three methods in general terms and what comes out of it, you can see in the examples supplied with the Raudus distribution. There, in particular, examples of embedding jqDatePicker and TinyMCE are contained.
The very first and obvious thing that needs to be implemented in the case of jqGrid is filling it with data and organizing paging. How to do this in this case?
It is known that jqGrid supports several datatype (methods of receiving data): json (jsonstring), xml (xmlstring), local, javascript and function. functionallows you to specify the javascript function as the source of data, and inside this function you can query the data from the server side of the application, then use the addJSONData method to fill the jqGrid with the received data. We will use this method.
So, in the jqGrid initialization line, we specify datatype and determine the function in which the request for the initial and next portion of data will be requested:
Expand / Collapse Code
AJavascript :=
'var me=this;' +
'me.onRender=function(){' +
// load jQuery library or ensure it is already loaded
'me.r=me.require(["js","/jquery-1.10.1/jquery-1.10.1.min.js"],function(){' +
'me.r=me.require(["js","/jquery.jqGrid-4.5.2/js/jquery.jqGrid.min.js",' +
'"js","/jquery.jqGrid-4.5.2/js/i18n/grid.locale-ua.js",' +
'"css","/jquery.jqGrid-4.5.2/css/ui.jqgrid.css",'+
'"css","/jquery-ui-1.10.3/themes/base/minified/jquery-ui.min.css"],function(){' +
'me.r=undefined;' +
'me.d=setTimeout(function(){' +
'me.d=undefined;' +
'if(typeof jQuery==="undefined"){' +
'me.getDOM().innerHTML="jQuery library was not loaded";' +
'return;' +
'};' +
'if(typeof $.fn.jqGrid==="undefined"){' +
'me.getDOM().innerHTML="jqGrid Class was not loaded";' +
'return;' +
'};' +
'me.e=document.createElement("table");' +
'me.e.id="grid' + IntToStr(ID) + '";' +
'me.getDOM().appendChild(me.e);' +
'me.p=document.createElement("div");' +
'me.p.id="pager' + IntToStr(ID) + '";' +
'me.getDOM().appendChild(me.p);' +
'function getData(postdata){' +
'me.route(JSON.stringify(postdata));' +
'};' +
'$(me.e).jqGrid({' +
'datatype:getData,' +
...
'rowNum:25,'+
'pager:"#"+me.p.id,'+
'caption:"jqGrid"' +
'});' +
'},0);' +
'});' +
'});' +
'};' +
...
The me.route method inside our getData function is the way to access the client part of the component to the server part using AJAX. Thus, we request from the server side a data set based on the parameters contained in postdata . All request parameters are packed into a JSON string. postdata contains data request utility parameters, which are described in the jqGrid documentation, among them: the current page number with the next batch of data, the number of records in the batch of data, sorting, filter, etc. On the server side, the RaRouteExtend method is triggered, in which we process the sent request parameters, form the necessary portion of data in the form of a JSON string and send this portion back to jqGrid in the RaUpgradeExtend method like this:
AJavascript := AJavascript +
'var me=this;' +
'if(me.e){' +
'var v=JSON.parse('''+FJSON+''');'+
'$(me.e)[0].addJSONData(v);' +
'};';
So, what happens during the first call :
1. The user first loads the form with jqGrid. The server method RaDrawExtend is executed, jqGrid is initialized.
2. jqGrid performs the javascript getData () function to get the first chunk of data.
3. The server method RaRouteExtend is executed. A data set is generated based on the data request parameters, which indicate that the first data page is requested (page = 1). The data set is serialized to a JSON string.
4. The server method RaUpgradeExtend is executed, in which javascript code is added that adds data to jqGrid.
5.The javascript code written in the RaUpgradeExtend method is executed and the jqGrid is filled with data.
What happens when you go to the page with the next piece of data :
1. The user goes to the next page with the data in jqGrid.
2. jqGrid again performs the javascript getData () function to get the next batch of data.
3. The server method RaRouteExtend is executed. A data set is generated based on the data request parameters, which indicate that the next data page is being requested (page = 2, page = 3, etc.). The data set is serialized to a JSON string.
4. The server method RaUpgradeExtend is executed, in which javascript code is added that adds data to jqGrid.
5.The javascript code written in the RaUpgradeExtend method is executed and the jqGrid is filled with data.
That, in fact, is all. If you have any questions, ask. Perhaps the article will have to add a number of refinements.
Thank you for your attention and success to you!
