I have an appliction, we generate swing objects(jtables, jbuttons,jlabels,jtextfields.etc) from pure java models in an erp like application. the models are generated dynamically depending on business rules and user iteractions on the fly. Now he have to port it to a web-based application, where we have to generate dynamically generated html pages from java servlets, which will be run on ipads and tablets on browsers (google chrome, ipad safari). we have a servlet which generates the html objects (tables, buttons etc) as counterpart of jtable, jbutton respectively.
As i said before, the rendered pages have to be dynamic, and users can change the objects on the fly, they can also change the font, color, size and position of the objects depending on the business rules. As a result i can not use static .css files.
The servlet gets the request, creates the html objects containing html, js and the objects are send to the client browser using json with ajax responses.
We have already a working infrastructure, but the problem is, we have network problems on users because they do not always use line based or wireless connection, they use cellular gprs and the network performance is a big issue. Especially, the table objects, (our normalisation of database tables is not well organised) may contain up tp 30-40 columns. I am using paginators for the tables, so at one screen i limit the visible row number by 20, but we see 20*40 cells at one time. And the business rules demand, that each cell may have different colors, (for example we have all cells in the fifth column have background blue, but the cell on the second row has the color green for example) and another example, all cells are disabled, but only one cell can be becomed editable depending on the user action on the fly.
A example of current table is as following:
<div id="mytable1_container">
<table id="mytable1">
<tr><td id="mytable1_0_0"...
</div>
I generate this content as a json and send to client browser, it handles the response by the following notation:
response={ {"mytable1,"<table style=""}, {"mybutton","<input type=button..
on the receiving ajax reponse handler
function submitAjax() {
json = createPostData();
var myJson = JSON.stringify(json);
var str = JSON.parse(myJson);
$.ajax({
url : "session",
type : "POST",
data : str,
dataType : "json",
async : true,
success : function(response, textStatus, jqXHR) {
$.each(response, function(key, value) {
$('#'+key).html(value);
as seen above, i set the html of tables given id with the html content on the fly. The content of the table is as following:
<!-- column 0,2 -->
<div id="tablecolumwrapper_mytable_0-2">
<td valign=middle class="tablecell"
id="mytable_0-2" style="height:34px;z-index:103;
font-family:arial;font-size:13px;color:#000000;background-
color:#ffffff;" onmouseup=
"javascript:cellUp(this);" onmousedown = "javascript:cellDown(this);"
onmousemove = "javascript:cellMove(this);" ondblclick =
"javascript:cellUp2(this);">
<div style="width:100%;overflow:hidden;cursor:pointer"><nobr>VALUEOFCOLUMN02</nobr>
</div>
</td></div>
<!--column 0,3 -->
<div id="tablecolumwrapper_mytable_0-3">
<td valign=middle class="tablecell"
id="mytable_0-2" style="height:34px;
font-family:arial;font-size:13px;color:#000000;background-
color:#ffffff; onmouseup=javascript:cellUp(this); onmousedown=
javascript:cellDown(this);"
onmousemove = "javascript:cellMove(this);" ondblclick =
"javascript:cellUp2(this);">
<div style="width:100%;overflow:hidden;cursor:pointer"><nobr>VALUEOFCOLUMN03</nobr>
</div>
</td></div>
as seen there is a huge code repetation, between the two columns, (the only difference is the value, but on some cases columns may have different backcolors, forecolors and column widths and also editility property) which makes the response string for the table appr. 200kb, which causes network performance problems.
So, how can we make the size of the response smaller to prevent network problems. Which is the best way you suggest?
option 1 - using string compression: on the java layer(servlet side) generate the content, compress the string with lzma for example (http://commons.apache.org/proper/commons-compress/examples.html) and then decompress on the client browser javascript layer using (http://nmrugg.github.io/LZMA-JS/demos/advanced_demo.html), by this way we can reduct the string to 10%, which makes 10-20kb of data inseat of 200kb, o good and acceptable ratio.
option 2 - compress on the java layer using gzip, and the browser automatically decompress gzip, no additonal step needed (How to Compress JSON in java and decompression in Javascript) and (Loading GZIP JSON file using AJAX) but i could not manage it, on the response on ajax side, i get error inseatd of the success. (Why?) I tried setting
response.setHeader("Content-Type", "application/json");
response.setHeader("Content-Encoding", "gzip");
response.setHeader("Vary", "Accept-Encoding");
response.setContentType("application/json");
response.setHeader("Content-Disposition","gzip");
response.sendRedirect(filePathurl);
Is the fault on the receiver side?
$.ajax({
url : "session",
type : "POST",
data : str,
dataType : "json",
async : true,
beforeSend : function() {
the method 1 reduces the amount of data, it is easy to implement, but it may overhalm cpu of ipad or tablets, because the browser has to handle and parse 200kb of string.
$('#mytableid').html('<div id=mytable1wrapper><table id=mytable1..
what do you think about this approach:
suppose we have 5 columns, all different values, all have all same visial properties, white backcolor and 30px in width, except the 3rd has background green, the last has width 50px;.
option 3 - generate a notation in json which has to be parsed in the javascript layer:
{initialization, "setvisualpropertiesoffirstcolumn"}
{column01, "columnvalue"}
{column02, "columnvalue and nothing else because same visualproperties}
{column03, "columnvalue and backgroud green"}
{column04, "columnvalue and back to backgroundwhite}
{column05, "columnvalue and setwidth to 50px}
the receiver side will generate the table columns on the fly a) by ussing string append b) using doc.createElement and appendChild
Create table with jQuery - append
the 3 approach is hard to implement and we have to parse the json response and generate the objects by dom append or string append (i do not know which is better way when performance is the concern)
Is it worth trying the last method (third one) or is it better doing compress-sendtoclient-decompress-sethtml to object options 1 or 2?
