GXT Paging Toolbar Disabled

The paging toolbar keep disabled when it loads data and a new request is made before the last request accomplished. My temporary solution is to use flag to avoid request the same data several time concurrently. But what about, the data is different ????

Finally I found the solution after read the post in GXT forum. You can find it here.
http://www.sencha.com/forum/showthread.php?85011-Loading-Store-twice-causes-PagingToolBar-to-disable

But in my solution, I just use override the loader LoadListener events. The concept is to disable paging toolbar on data load and enable it on load completed.

Code:
grid.getStore().getLoader().addLoadListener(new LoadListener() {

@Override
public void loaderBeforeLoad(LoadEvent le) {
getPanel().getBottomComponent().setEnabled(false);
}

@Override
public void loaderLoad(LoadEvent le) {
getPanel().getBottomComponent().setEnabled(true);
super.loaderLoad(le);
}
});

Hope this code is useful to you too.

GXT JsonReader without model type fields

In GXT, to convert JSON to ModelData we need to declare the model type fields for each variable to be converted into model data. As the data changed, you need to change the model type fields or you will get the null pointer exception. So I want to create a JSON reader that can read json string and convert to model data without need specify the fields.

To do that I need to create a custom JsonReader, JsonPagingLoadResultReader and JsonLoadResultReader.

They can be downloaded here :

MyJsonReader.java
MyJsonPagingLoadResultReader.java
MyJsonLoadResultReader.java

Change background color in GXT grid column

column.setRenderer(new GridCellRenderer() {
    public String render(Stock model, String property, ColumnData config, int rowIndex,
        int colIndex, ListStore store) {
      config.style = "background-color: silver;";
      return model.get(property);
    }
  });


Source:http://www.sencha.com/forum/showthread.php?49510-Change-background-color-in-GXT-grid-column

Apache Compression

Actually, when I worked out with GWT Code Splitting, I still not satisfied with the result.
I know the web browser support content compression so a gave it a look.I chose to use the most simple solution, Apache compression. I just need to set .htaccess configuration and copy to your web folder.

Steps :

1. Enable Apache mod_deflate. mod_gzip is better but I don't have the extension. Open Apache configuration file and turn on the settings.

LoadModule deflate_module modules/mod_deflate.so

2. Create .htaccess file and paste these configuration. I want to compress all files with js, css, html, htm and php extensions.

<FilesMatch "(?i)^.*\.(js|css|html|htm|php)$">
SetOutputFilter DEFLATE
</FilesMatch>

3. Restart Apache. Done.

Try to open your web and use firebug to see your file downloads.
I was successfully, reduce the file download from 600Kb (After GWT code splitting) to 250Kb. So the total I saved around 800Kb and speed up my system.

GWT Code Splitting

In my GWT + GXT project, the obfuscated javascript output file is around 1.1MB. It takes quite long for the browser to load all the files before the system is running. So I gave a look on GWT code splitting.

It's very simple and just need to implement

1. GWT.runAsync(new RunAsyncCallback() {}
2. Set GWT compiler parameter : -compileReport. Make sure you disable draft compile mode since it will not produce the SOYC(Story of your compile)
   

You can see the compile report as you know what is going to be downloaded on initial download, full download and leftover.

http://code.google.com/webtoolkit/doc/latest/DevGuideCodeSplitting.html
http://code.google.com/webtoolkit/doc/latest/DevGuideCompileReport.html

Soon I will try to reduce the usage of the GXT library which is the most codes included in my initial download.

HTML Doc PHP Implementation

I want to use PDF in my project to print the report. Currently my report is in HTML format since it is easy to generate using PHP. Before this, I have try to use DOMPDF and TCPDF, but unfortunately, there is a lot of customization need to be done to get a good PDF report.
Finally, I found HTMLDoc. It's open source but to get the compiled-ready binary you need to buy.
Fortunately. I found the free compiled binary here :

http://htmldoc-binaries.org/

Download and install HTMLDoc.

 public function topdf($filename, $options = "") {

      $path = "library_includes/general/htmldoc/htmldoc.exe";
      $path=realpath($path);
      # Tell HTMLDOC not to run in CGI mode...
      putenv("HTMLDOC_NOCGI=1");

      $scmd = "$path -t pdf --quiet --landscape --jpeg --webpage --header ... $options $filename";
      # Write the content type to the client...
      header("Content-Type: application/pdf");
      flush();
      system($scmd);
  }

Just submit your URL / file name and the HTMdoc will will create the PDF on the fly.
For more details about the command line, you can refer be to the document :

http://www.easysw.com/htmldoc/docfiles/8-cmdref.html

But, if your url is password protected using login and session, you need to handle to bypass the session checking since HTMLDoc read the url and PHP will treat HTMLDoc as new session rather than your current.

GXT Paging Grid With Remote Search

I'm using paging grid in GXT to view a list.
The basic is shown below:

ScriptTagProxy<PagingLoadResult<ModelData>> proxy = new ScriptTagProxy<PagingLoadResult<ModelData>>(url);
JsonPagingLoadResultReader<PagingLoadResult<ModelData>> reader = new JsonPagingLoadResultReader<PagingLoadResult<ModelData>>(type);
final PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(proxy, reader);
loader.setRemoteSort(true);
final ListStore<ModelData> mystore = new ListStore<ModelData>(loader);
return mystore;

But I want to use the same paging component for remote search. Finally I came out with this solution.

private void searchStaff() {
 String url = "index.php?option=com_model&model={0}&action=getStaffList";
 PagingLoadConfig config = new BasePagingLoadConfig();
 config.setOffset(0);
 config.setLimit(50);

 BasePagingLoader loader = ((BasePagingLoader) store.getLoader());
 ScriptTagProxy proxy = (ScriptTagProxy) loader.getProxy();
 if (keyword.getValue() == null || keyword.getValue().equals("")) {
 } else {
     url += "&keyword=" + keyword.getValue().toString();
 }
 url = url.replace("{0}", "Staff");
 url = DataUtils.formatURL(url);
 url = url.replaceAll("kpiwebgwt", "kpiweb");
 proxy.setUrl(url);
 store.getLoader().load(config);
}

GWT Native Base64

Here is the code:

public static native String Base64Encode(String data) /*-{
function encode_base64(data) {
var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var out = "", c1, c2, c3, e1, e2, e3, e4;
for (var i = 0; i < data.length; ) {
c1 = data.charCodeAt(i++);
c2 = data.charCodeAt(i++);
c3 = data.charCodeAt(i++);
e1 = c1 >> 2;
e2 = ((c1 & 3) << 4) + (c2 >> 4);
e3 = ((c2 & 15) << 2) + (c3 >> 6);
e4 = c3 & 63;
if (isNaN(c2))
e3 = e4 = 64;
else if (isNaN(c3))
e4 = 64;
out += tab.charAt(e1) + tab.charAt(e2) + tab.charAt(e3) + tab.charAt(e4);
}
return out;
}
return encode_base64(data);
}-*/;

public static native String Base64Decode(String data)/*-{
function decode_base64(data) {
var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var out = "", c1, c2, c3, e1, e2, e3, e4;
for (var i = 0; i < data.length; ) {
e1 = tab.indexOf(data.charAt(i++));
e2 = tab.indexOf(data.charAt(i++));
e3 = tab.indexOf(data.charAt(i++));
e4 = tab.indexOf(data.charAt(i++));
c1 = (e1 << 2) + (e2 >> 4);
c2 = ((e2 & 15) << 4) + (e3 >> 2);
c3 = ((e3 & 3) << 6) + e4;
out += String.fromCharCode(c1);
if (e3 != 64)
out += String.fromCharCode(c2);
if (e4 != 64)
out += String.fromCharCode(c3);
}
return out;
}
return decode_base64(data);
}-*/;

GWT Native RC4 Encryption

Here is the code:

private static native String rc4Encrypt(String key, String pt) /*-{
function rc4Encrypt1(key, pt) {
s = new Array();
for (var i=0; i<256; i++) {
s[i] = i;
}
var j = 0;
var x;
for (i=0; i<256; i++) {
j = (j + s[i] + key.charCodeAt(i % key.length)) % 256;
x = s[i];
s[i] = s[j];
s[j] = x;
}
i = 0;
j = 0;
var ct = '';
for (var y=0; y i = (i + 1) % 256;
j = (j + s[i]) % 256;
x = s[i];
s[i] = s[j];
s[j] = x;
ct += String.fromCharCode(pt.charCodeAt(y) ^ s[(s[i] + s[j]) % 256]);
}
return ct;
}
return rc4Encrypt1(key, pt);
}-*/;

GWT Native MD5

Here is the code:

public static native String md5(String string) /*-{
function RotateLeft(lValue, iShiftBits) {
return (lValue<>>(32-iShiftBits));
}

function AddUnsigned(lX,lY) {
var lX4,lY4,lX8,lY8,lResult;
lX8 = (lX & 0x80000000);
lY8 = (lY & 0x80000000);
lX4 = (lX & 0x40000000);
lY4 = (lY & 0x40000000);
lResult = (lX & 0x3FFFFFFF)+(lY & 0x3FFFFFFF);
if (lX4 & lY4) {
return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
}
if (lX4 | lY4) {
if (lResult & 0x40000000) {
return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
} else {
return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
}
} else {
return (lResult ^ lX8 ^ lY8);
}
}

function F(x,y,z) { return (x & y) | ((~x) & z); }
function G(x,y,z) { return (x & z) | (y & (~z)); }
function H(x,y,z) { return (x ^ y ^ z); }
function I(x,y,z) { return (y ^ (x | (~z))); }

function FF(a,b,c,d,x,s,ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(F(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
};

function GG(a,b,c,d,x,s,ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(G(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
};

function HH(a,b,c,d,x,s,ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(H(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
};

function II(a,b,c,d,x,s,ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(I(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
};

function ConvertToWordArray(string) {
var lWordCount;
var lMessageLength = string.length;
var lNumberOfWords_temp1=lMessageLength + 8;
var lNumberOfWords_temp2=(lNumberOfWords_temp1-(lNumberOfWords_temp1
% 64))/64;
var lNumberOfWords = (lNumberOfWords_temp2+1)*16;
var lWordArray=Array(lNumberOfWords-1);
var lBytePosition = 0;
var lByteCount = 0;
while ( lByteCount < lMessageLength ) {
lWordCount = (lByteCount-(lByteCount % 4))/4;
lBytePosition = (lByteCount % 4)*8;
lWordArray[lWordCount] = (lWordArray[lWordCount] |
(string.charCodeAt(lByteCount)< lByteCount++;
}
lWordCount = (lByteCount-(lByteCount % 4))/4;
lBytePosition = (lByteCount % 4)*8;
lWordArray[lWordCount] = lWordArray[lWordCount] |
(0x80< lWordArray[lNumberOfWords-2] = lMessageLength<<3;
lWordArray[lNumberOfWords-1] = lMessageLength>>>29;
return lWordArray;
};

function WordToHex(lValue) {
var WordToHexValue="",WordToHexValue_temp="",lByte,lCount;
for (lCount = 0;lCount<=3;lCount++) {
lByte = (lValue>>>(lCount*8)) & 255;
WordToHexValue_temp = "0" + lByte.toString(16);
WordToHexValue = WordToHexValue +
WordToHexValue_temp.substr(WordToHexValue_temp.length-2,2);
}
return WordToHexValue;
};

function Utf8Encode(string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";

for (var n = 0; n < string.length; n++) {

var c = string.charCodeAt(n);

if (c < 128) {
utftext += String.fromCharCode(c);
}
else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}

}

return utftext;
};

var x=Array();
var k,AA,BB,CC,DD,a,b,c,d;
var S11=7, S12=12, S13=17, S14=22;
var S21=5, S22=9 , S23=14, S24=20;
var S31=4, S32=11, S33=16, S34=23;
var S41=6, S42=10, S43=15, S44=21;

string = Utf8Encode(string);

x = ConvertToWordArray(string);

a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476;

for (k=0;k AA=a; BB=b; CC=c; DD=d;
a=FF(a,b,c,d,x[k+0], S11,0xD76AA478);
d=FF(d,a,b,c,x[k+1], S12,0xE8C7B756);
c=FF(c,d,a,b,x[k+2], S13,0x242070DB);
b=FF(b,c,d,a,x[k+3], S14,0xC1BDCEEE);
a=FF(a,b,c,d,x[k+4], S11,0xF57C0FAF);
d=FF(d,a,b,c,x[k+5], S12,0x4787C62A);
c=FF(c,d,a,b,x[k+6], S13,0xA8304613);
b=FF(b,c,d,a,x[k+7], S14,0xFD469501);
a=FF(a,b,c,d,x[k+8], S11,0x698098D8);
d=FF(d,a,b,c,x[k+9], S12,0x8B44F7AF);
c=FF(c,d,a,b,x[k+10],S13,0xFFFF5BB1);
b=FF(b,c,d,a,x[k+11],S14,0x895CD7BE);
a=FF(a,b,c,d,x[k+12],S11,0x6B901122);
d=FF(d,a,b,c,x[k+13],S12,0xFD987193);
c=FF(c,d,a,b,x[k+14],S13,0xA679438E);
b=FF(b,c,d,a,x[k+15],S14,0x49B40821);
a=GG(a,b,c,d,x[k+1], S21,0xF61E2562);
d=GG(d,a,b,c,x[k+6], S22,0xC040B340);
c=GG(c,d,a,b,x[k+11],S23,0x265E5A51);
b=GG(b,c,d,a,x[k+0], S24,0xE9B6C7AA);
a=GG(a,b,c,d,x[k+5], S21,0xD62F105D);
d=GG(d,a,b,c,x[k+10],S22,0x2441453);
c=GG(c,d,a,b,x[k+15],S23,0xD8A1E681);
b=GG(b,c,d,a,x[k+4], S24,0xE7D3FBC8);
a=GG(a,b,c,d,x[k+9], S21,0x21E1CDE6);
d=GG(d,a,b,c,x[k+14],S22,0xC33707D6);
c=GG(c,d,a,b,x[k+3], S23,0xF4D50D87);
b=GG(b,c,d,a,x[k+8], S24,0x455A14ED);
a=GG(a,b,c,d,x[k+13],S21,0xA9E3E905);
d=GG(d,a,b,c,x[k+2], S22,0xFCEFA3F8);
c=GG(c,d,a,b,x[k+7], S23,0x676F02D9);
b=GG(b,c,d,a,x[k+12],S24,0x8D2A4C8A);
a=HH(a,b,c,d,x[k+5], S31,0xFFFA3942);
d=HH(d,a,b,c,x[k+8], S32,0x8771F681);
c=HH(c,d,a,b,x[k+11],S33,0x6D9D6122);
b=HH(b,c,d,a,x[k+14],S34,0xFDE5380C);
a=HH(a,b,c,d,x[k+1], S31,0xA4BEEA44);
d=HH(d,a,b,c,x[k+4], S32,0x4BDECFA9);
c=HH(c,d,a,b,x[k+7], S33,0xF6BB4B60);
b=HH(b,c,d,a,x[k+10],S34,0xBEBFBC70);
a=HH(a,b,c,d,x[k+13],S31,0x289B7EC6);
d=HH(d,a,b,c,x[k+0], S32,0xEAA127FA);
c=HH(c,d,a,b,x[k+3], S33,0xD4EF3085);
b=HH(b,c,d,a,x[k+6], S34,0x4881D05);
a=HH(a,b,c,d,x[k+9], S31,0xD9D4D039);
d=HH(d,a,b,c,x[k+12],S32,0xE6DB99E5);
c=HH(c,d,a,b,x[k+15],S33,0x1FA27CF8);
b=HH(b,c,d,a,x[k+2], S34,0xC4AC5665);
a=II(a,b,c,d,x[k+0], S41,0xF4292244);
d=II(d,a,b,c,x[k+7], S42,0x432AFF97);
c=II(c,d,a,b,x[k+14],S43,0xAB9423A7);
b=II(b,c,d,a,x[k+5], S44,0xFC93A039);
a=II(a,b,c,d,x[k+12],S41,0x655B59C3);
d=II(d,a,b,c,x[k+3], S42,0x8F0CCC92);
c=II(c,d,a,b,x[k+10],S43,0xFFEFF47D);
b=II(b,c,d,a,x[k+1], S44,0x85845DD1);
a=II(a,b,c,d,x[k+8], S41,0x6FA87E4F);
d=II(d,a,b,c,x[k+15],S42,0xFE2CE6E0);
c=II(c,d,a,b,x[k+6], S43,0xA3014314);
b=II(b,c,d,a,x[k+13],S44,0x4E0811A1);
a=II(a,b,c,d,x[k+4], S41,0xF7537E82);
d=II(d,a,b,c,x[k+11],S42,0xBD3AF235);
c=II(c,d,a,b,x[k+2], S43,0x2AD7D2BB);
b=II(b,c,d,a,x[k+9], S44,0xEB86D391);
a=AddUnsigned(a,AA);
b=AddUnsigned(b,BB);
c=AddUnsigned(c,CC);
d=AddUnsigned(d,DD);
}

var temp = WordToHex(a)+WordToHex(b)+WordToHex(c)+WordToHex(d);

return temp.toLowerCase();
}-*/;

GXT Paging Row Number

I got problem to display the row number for the paging grid.
The value always start from 1 to the end of row in the grid.
After trying several methods (actually several frustrated hours), finally I found the soultion.
It's very simple and I don't believe, why I not think of this before.

Here is the code

final RowNumberer rn = new RowNumberer();
rn.setWidth(30);
rn.setRenderer(new GridCellRenderer() {

public Object render(ModelData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore store, Grid grid) {
int offset = 0;
if (store.getLoadConfig().get("offset") != null) {
offset = Integer.parseInt(store.getLoadConfig().get("offset").toString());
}
return offset + rowIndex + 1;
}
});

GWT - PHP on Apache 2nd Review

My latest project doesn't let quercus running on glassfish. I need to to remove quercus before the project can be deployed.

Finally I found a new way to enable data transfer from GWT application on GlassFish Server to Apache Web Server. The solution is simpler. No querchos and curl php script required.

How it can be possible?

Let say the Apache is running on port 80 and glassfish is running on port 8080.
Let say your GWT project is in /web1 folder on glassfish.
Let say your PHP project in in /web1 folder on Apache.

First you need to set Apache proxy settings. You might need to install the module if you don't have one on your Apache.

Open the apache httpd.conf file and add the following lines

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

Order deny,allow
Allow from all

ProxyRequests on
ProxyPreserveHost on

ProxyPass /web2 http://localhost:8080/web1/
ProxyPassReverse /web2 http://localhost:8080/web1/

using the setting your GWT project can be access using this following URL

http://localhost/web2

In your GWT project the data can be access using http://localhost/web1. Now it's on the same domain with your GWT project on http://localhost/web2. You can access to any php script on your Apache from GWT without creating any proxy servlet or curl script.

Working with Zebra RW420

Bulan lepas aku buat program untuk project MEPA, untuk print resit guna Zebra Rw420 melalui bluetooth. Printer banyak org pakai untuk portable billing macam TNB, SYABAS dan yang seaktu dengannya. Sebenarnya, printer tu jadi serial port je. Jadi kena buat serial port programming la untuk hantar data ke printer.

Cara mudah nak pakainya macam ni.

1. Untuk design resit, boleh guna label vista. Program ni datang sekali dengan printer ni.
2. Untuk grafik, font yang x standard, kena upload ke printer terlebih dahulu sebelum boleh pakai.
3. Lepas tu, untuk text just guna mana tag untuk replace tag tu nanti dengan value yang sebenar. Sebagai contoh {$tarikh}.
4. Save file projek label vista tu. Sebenarnya fail project tu dia simpan dalam format CPL.
5. Untuk program serial port, just read file template tu, replace string tag tu dengan value-value yang sepatutunya dan send ke serial port.
6. Serial port perlu dibuka sepanjang process printing. Kalau close, printer x akan print resit. Sementara nak tunggu tu, boleh baca status printer busy , paper status dan sebagainya.
7. Dah siap print, baru la tutup serial port.
   

DeepSea Obfuscator

Aku nk obfuscate kod automatik bila aku compile projek.
Setakat yang aku try, aku jumpa DeepSea Obfuscator dan aku rasa agak menarik untuk dicuba.

Boleh pakai secara external atau integrate terus dengan .NET 2005/2010.
Senang je nak pakai, since just set config atau load config guna software dia dan load balik masa compile.

Untuk ILmerge aku dah pakai script lain masa post-build.
Jadi aku boleh automatekan code merge & obfuscate semasa build time.

url : http://www.deepseaobfuscator.com/home.aspx

Using ILMerge in a post build step

Reference : http://geekswithblogs.net/mapfel/archive/2008/11/01/126469.aspx

I want automate the ILMerge process on build time.
I found this article and it works for me with minimal modification.

This is my ilmerge.bat file content

ECHO parameter=%1
CD %1
D:
COPY testLib.dll temp.dll
"C:\Program Files\Microsoft\ILMerge\ILMerge.exe" /out:testlib2.dll testLib.dll VL.dll
DEL temp.dll

on project configuration, build event just add below text in post-build event

"$(TargetDir)ILMerge.bat" "$(TargetDir)"