With GWT you use a subset of Java Core libraries and GWT apis to implement your web application. The web application later can be translated in a 100% JavaScript application that can invoke server side services also written in Java: plain servlets using GWT toolset that make easier to serialize and transfer object between the Java Server and JavaScript application you obtained from GWT. And, as everything is written in Java on the first step, it becomes very easy to keep structures compatible and aligned between client and server.

With GWT you can layout your html pages almost as usual, and inject your GWT components in DIVs defined in the hosting html page.
Modeling the layout of forms and buttons and advanced controls is like writing Swing applications. But the interaction with the server must always be asyncronous (the first "A" of ajax).

GWT is cross browser (version 1.7 covers internet explorer 8 fanciness), has the best support for iternationalization I've ever seen in a web framework, can handle JSON, XML, SOAP or a native and simple google solution as protocol for calling remote services (GWT-RPC).

During the development you only debug Java code, in an "hosted mode" browser. You can put breakpoint on the code that later will be translated in JavaScript, and it really works fine.

If you have your javascript, you can write your Java "wrapper" and have that running as a native GWT library.

GWT also includes a good "back button" handling, javascript code obfuscation/optimization, and whatever you may dream to have from a framework.

but... it's not that simple! you will need some time to master all its feature and understand the internals.

Also a weakness is that at the moment you may have many troubles to get it working with maven, as GWT comes with a "standard" project layout relying on ant script. GWT provides a command line tool to jump start your project and have everything you need to import it in eclipse (maybe also intellij and netbeans).

GWT does not replace CSS. You still use CSS to modify how your GWT widgets will be rendered. Also there are some css predefined to have theming.

This is the quickstart.

This is the showcase to see some of the basic widget you can use and the java source code.

It may be surprising but the compilation from Java to JavaScript really works great! Recently a Java port of Quake (Jake) has been cross compiled into Javascript and HTML5 using GWT: quake2-gwt-port.

Source: How GWT is useful in place of Javascript and CSS?

What nice things can be done with Javascript! I’m astonished.
I loved that game, now we have Lemmings in DHTML (DOM, HTML, CSS and Javascript of course). Running in any modern browser.

Very cool. I’ll go looking for a port for pocket pc and palm.

I've just written this little tool to encode email templates into mailto URLs. It's based on URL Decoder/Encoder by Eric Meyer.
Hope it could be useful to someone.

The "to" field is mandatory. You can specify multiple values separated by comma. For more info on mailto URLs, see rfc2368.
To download this script just grab it from the source of this page.

Mailto URLs do not support extended (8bit) chars so, for example, accented chars won't work. If you have a fix leave a comment.

Email URL Encoder

Email

Label:
To:
Cc:
Bcc:
Subject:
Body:

Encode Reset

Output

Generated Html:
Link: write your email and press "Encode" button.

The Email URL Encoder is based on URL Decoder/Encoder by Eric Meyer and is licensed under a Creative Commons Attribution-ShareAlike 2.0 License.

This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive, or e-mail those naughty pictures you hid in the Utilities folder to your mother. Don't blame me if anything bad happens to you, because it's actually the aliens' fault. The code expressed herein is solely that of the author, and he's none too swift with the JavaScript, if you know what we mean, so it's likely to cause giggle fits in anyone who knows what they're doing. Not a flying toy.
Thank you for playing. Insert coin to continue.

Most of the times, you don't need to paginate on the client side: if you have an enough small set of records to be displayed, I would suggest you to choose a scrollable <div/>.

Server-side web pagination is really needed when you have to display hundreds of records. You may fetch results from the DB using an offset and loading a single page for each HTTP request.
If your resultset is small it's possible to load it fully. Sometime I saw code loading the full resultset in session; and on each page-switch the browser refreshes displaying a different subset/page. There are many disadvantages of a server-side pagination like this:

• You have to use the HTTP Session (and remember to clean up when it's nomore needed).
• You have to reload the page on every page switch.
• You cannot go forward and backward to check previous data without loosing the view on current resultset.
• You have to write code for the server side actions handling all the page-switch work.

As I said before, everything would be solved using a table inside scrollable div but, in my current web application "GUI designers" like to persecute the users having them clicking and clicking even for few records. As in my case, I have an "editable table" (an html form) that's also paginated, in wich validation of each record depends on other records...
At least I wanted to avoid reloading the page on every page switch, and also avoid using HTTP Session when not strictly necessary. So I end up writing a JavaScript paginator object that handles the job of paginating any html table rendering also a simple pagination bar.

Here's a live sample:

To use my javascript you need to:

1. include the javascript using <script src="pager.js"> in your page header;
2. include a small css to skin the page navigation-bar (i.e. for emphasizing the selected page using bold and underline style);
3. define an ID on the table you want to scroll. i.e. <table id="results"> ;
4. place an empty <div/> in the place you want to display the navigation bar. i.e. <div id="pageNavPosition"> ;
5. include an initialization script at the bottom of your page like this:

   <script type="text/javascript"><!--
       var pager = new Pager('results', 3); 
       pager.init(); 
       pager.showPageNav('pager', 'pageNavPosition'); 
       pager.showPage(1);
   //--></script>

   Where 'results' is the id of the table (see step #3), 3 is the number of records per page, 'pager' is the name of the variable (in red... that's ugly I agree...), and pageNavPosition is the ID of the DIV inside of which the pagination bar will be placed. The showPage(1) indicates that, when loading the page, the 1st one should be displayed.

If you have a huge table, maybe it will be displayed fully before the javascript at the bottom will be executed. To avoid this, you can set the table as hidden by default using css style, and make it visibile using JavaScript after the pager.showPage() call.

I never understood why HTML spec, still links the action of a form to the form itself: in a form you may need more possibility (edit, delete, insert, etc...) and you'll have many buttons then, so I think that html should link the action to the button, like in any intelligent gui language.
So it would be more useful a tag like:
<input type="submit" action="servleturl"/>

In current project we used Tag Files, a feature available in JSP 2.0 specification: you can write tags using JSP, and this is very good if your tags must produce some template code.

One of our Tag File uses a syntax like the following:

<my:button action="update.jspa" >
    <ww:text name="'application.update.button'" />
</my:button>

the action attribute is mandatory, but if you need you can define your tag with more optional attributes, for example to add javascript execution, or to ask "are you sure?" alert, etc...
The action identifies the application controller (i.e. a servlet) that will be executed when button is clicked.
The label of the button is defined by the body content of the my:button tag. In this case the "<ww:text name="'application.modify.button'" />" is resolved by a webwork <ww:text /> tag that provides internationalization(i.e. will display: "update" string for Americans, and "aggiorna" for Italians).

With a simple javavascript I am able to obtain enclosing form (owner of the button), changing the action of the form tag on the fly, then submit the form: in this way, buttons are associated with action.
The <form /> tag will specify the action attribute as an empty string (as it is mandatory): <form action=""/>

The nice thing of having a body of the tag button, is that you can include something inside it, and you are completely free! (you can insert a table, if you like... hey, stop! don't do that!).

For example, an icon with corresponding description:

<my:button action="http://www.google.com/">
     <ww:url id="imagesurl" value="'http://it.newinstance.it/wp-content/uploads/2006/10/export.png'" includeParams="'none'" />
     <img style="border: 0; vertical-align: middle; margin-right: 5px;" src="<ww:property value="#imagesurl"/>"/>
     <ww:text name="'application.export.button'" />
</my:button>

And this, executing our custom jsp tag file, will render as:

<button onclick="form.action='http://www.google.com/'; form.submit(); return false" >
     <img style="border: 0px none; vertical-align: middle; margin-right: 5px;" src="http://it.newinstance.it/wp-content/uploads/2006/10/export.png" />
     Export
</button>

The "return false" at the end of the javascript is a compatibility issue, to make it behave the same way in different browsers (without it, for instance, explorer will submit the form twice!). And this is how it will look like:

I won't show here the source code for the button.tag file: it's really trivial, and ... I would have problems with copyright, but the concept is there, and writing a tag that translate the <my:button/> in the source shown, it's really easy.

Today, I've had the problem to dynamically add additional informations to html forms. Not being an expert of JavaScript I thought it was very easy. But after trying to code something like this:

    ...
    var form = document.forms['myForm'];
    form.myHiddenField = new Hidden();
    form.myHiddenField.value=myValue;
    ...

I discovered that it's not so easy. I also didn't find anything on google. I also looked-up on JGuru, but I just find this.

But I didn't find it satisfactory, because I don't want to remember to add divs to my forms. Here's my solution (that I added to JGuru)

    ...
    var form = document.forms['myForm'];
    var el = document.createElement("input");
    el.type = "hidden";
    el.name = "myHiddenField";
    el.value = "myValue";
    form.appendChild(el);
    ...  

I've tested it with IE6, Firefox 1.0.2, Opera 7.54, but it shold work on any browser.

Writing email addresses in clear in web pages is not a good idea: spam bot browse the web and collect email address to lately send unrequested spam. But, sometime it could be useful to put an email address in a web page, and there could be several possibility:

1. Using an image: a transparent gif with the text of the email. Spambot needs to have some Optical Character Recognization to understand your email (complex enough), but a real user browsing your site cannot copy-and-paste your email, nor cannot click on a simple link to send you an email.
2. Using a form: let the user send you an email whithout knowing your address. The user will know your email address when you respond to its email. This requires your site to have some server-side capability (CGI/PHP/Servlet) to accomplish this job. But spambot scripts can exploit the form to send you emails: this requires additional work for spam guys, but when you realize that spammers has exploited it you can add to the form some additional mechanism (like "see this image and report what you read", or "3+2=?" or easy question like "Which color was it the white horse of Napoleon?")
3. Scrambling email addresses: you can do some cryptography on email addresses and using javascript the client's browser will be able to decrypt addresses. The spambot will need to be able to execute javascripts to decode your emails. Complex, but I believe that some can do it.
4. Adding garbage emails in your pages: you can place some (hidden)links on randomly generated pages on your site so that the spambot, following that links will fall in pages generating infinite email addresses and collecting hundreds of thousand email address with the good ones (this means that the spammer guy will have to discard them manually, or discard all the data collected from that point on. You usually will put a 10+ links on the top and on the bottom of your pages linking random generated pages containing random emails.

A sample of html fragment using javascript for scrambling emails (that I am using) could be the following:

<script language="JavaScript">
function mail(name, domain, ext, params) {
  var addr = name + "@" + domain + "." + ext;
  var protocol = "ma" + "il" + "to";
  var url = protocol + ":" + addr + params;
  var a = "<a href=" + url + ">";
  var _a = "</a>";
  document.write(a + addr + _a);
}                            
</script>

<strong>Write me: </strong><script language="JavaScript">mail("lviggiano", "tiscali", "it", "");</script>

I aways combine this technique with the garbage email generation. A sample a gargbage email generator written in php (as I had some difficult finding java-enabled hosting for my site) is the following:

<?php
	srand((double)microtime()*1000000);  		

	function randomString($size) { 
		$chars = "abcdefghijklmnopqrstuvwxyz"; //0123456789"; 
		$count = strlen($chars);
  		$i = 0;
  		$retval = ""; 
		while ($i <= $size) { 
			$num = rand() % $count; 
			$char = substr($chars, $num, 1); 
			$retval = $retval . $char; 
			$i++; 
		} 
		return $retval;
	} 

	function randomSuffix() {
		$suffixes = array("com", "net", "org", "biz", "info", "name", "fr", 
                                  "de", "it", "co.uk", "ch", "ru", "tv", "info");
		$idx = rand() % count($suffixes);
		return $suffixes[$idx];
	}

	function randomEmail() {
		$name = randomString(rand(5,10));
		$surname = randomString(rand(5,10));
		$domain = randomString(rand(5,10));
		$suffix = randomSuffix();
		$mailType = rand() % 2;
		if ($mailType == 0) {
			return $name . "." . $surname . "@" . $domain . "." . $suffix;
		} else {
			return $name . "@" . $domain . "." . $suffix;
		}
	}
	
	function doMail() {
		$emailPerPage = 50;
		for ($emailCount = 0; $emailCount < $emailPerPage; $emailCount++) { 
			$email = randomEmail();
			print("\t\t<a href=\"mailto:");
			print($email);
			print("\">");
			print($email);
			print("</a><br>\n");
		}	
	}
	
?>

<html>
	<head>
		<title><?= randomString(10) ?></title>
	</head>
	<body>

<?php 
    doMail();
?>
		<br>
		Not enough? 
		<a href="emails.php?<?= randomString(5) ?>=<?= rand(0,9999999) ?>">
			Get more!
		</a><br>

	</body>
</html>

A spambot could fall in loop, as at the end of the page there's a link to the page itself (with a random parameter to try avoiding the spambot to understand that the page is the same; with servlet this could be accomplished better).
In the top and the bottom of every page I simply put some hidden links (the text of the link is a transparent 1x1 pixel sized gif or just a non printable blank space) to the garbage-email-page (self-linking to make spambot loop infinitely).
You can notice that from the user point of view it's completely invisible, but the html source does the trick.
In this way the real user browsing your site is completely unaware of anti spam measures you used to protect your email address.
I am thinking on a javascript that browse the content of the current page using regular expression to search text like "name at domain dot com" replacing it with fully readable and clickable mailto:// links. I googled a little to find a script like this but I didn't find, so I think I'll do myself if I'll have some spare time for it.
Someone has to report more (or better) anti-spam techniques to protect email in web sites? If yes, I'll add to this post.

To do that, you have to create a file called proxy.pac in your filesystem, like this one:

 1function FindProxyForURL(url, host)
 2{
 3    if ( dnsDomainIs(host, "localhost") ||
 4         isPlainHostName(host) ||
 5         isInNet(host, "127.0.0.1", "255.255.255.255") )
 6        return "DIRECT";
 7
 8    if (isInNet(myIpAddress(), "192.168.0.0", "255.255.0.0"))  // HOME
 9        return "DIRECT";
10
11    if (isInNet(myIpAddress(), "10.1.0.0", "255.255.0.0"))  // CLIENT 1
12        return "PROXY web-proxy:8080";
13}

This means: when I connect to localhost or to 127.0.0.1 the browser will not have to use any proxy, going DIRECT.
When myIp is in 192.168.*.* don’t use any proxy (as I am @ home). When my ip is 10.1.*.* use “web-proxy:8080″, and so on…
The 255.255.0.0 is the net mask. 255 means perfect match, 0 means ‘anything’ matches (like “*” wildcard).

Once you created this file you go on “Firefox->Connection Settings->Automatic Proxy Configuration URL” and set the path of the proxy.pac file as in this sample: file:///C:/Windows/proxy.pac
Notice that (for mozilla) you have 3 slash.
Using IE, you set it on connection settings as this file://C:\Windows\proxy.pac.
For Opera you set automatic proxy configuration with something like file://C:/Windows/proxy.pac

Then and for the next, when browsing the javascript will be executed and the correct proxy will be automatically selected.

Many apps also get internet settings by IE, so this works well for many apps (MSN messenger, for example). Some others don’t (i.e. gaim, eclipse…). So you still have to do something manually.
Warning: Google Web Accelerator, overwrites proxy settings in IE,using its own proxy.pac file. I won’t use it until they fix this.

There are several tools like NetSwitcher that handle this issue, but they can’t handle any rebellious apps (like gaim and eclipse…).

I found this nice javascript that could be useful in places where some computing may take some time... Many application do intensive searches or computations, and it's better to give some feedback to the user while loading the results. You can try displaying a page with an animated GIF, and redirecting the page using something like:

  <meta http-equiv="Refresh" content="0; URL="result-url">

But when the browser (IE) sends the request to "result-url", the GIF stops! Animated GIFs, seems to work for this purpose on Firefox and Opera, but not IE.
Here's a JavaScript solution:

<script language="javascript" type="text/javascript">
    var SIZE=240;
    var STEP=2;
    window.onload = progress;
    function progress(){
        var bar=document.getElementById('progressbar');
        bar.style.width=(parseInt(bar.style.width)+STEP)%SIZE;
        setTimeout('progress()',40);		
    }
</script>
<div id="progressbar" 
     style="width:0px;height:10px;background-color:red;"></div>

Displaying an animated image could be easy replacing the "src" of an <img> element. I saw this technique by the JOnAS administrative console to reload periodically a server-side generated image that represent a graph of memory consumption. It just reload the image, without reloading the page. At first look it could seem an applet, but it isn't.