Now I own the full deck of the Microsoft certifications and I can sit back and relax (beer is in order . Unfortunately, in the startup world that I operate most of the time, it’s not very recognizable achievement, but it’s nice to put these logos on my presentation slide decks and, especially now, I have a very powerful bragging rights – I have ALL of the Microsoft developers certifications !!!

It was a lengthy path and, I should add, a very confusing one. It wasn’t very obvious what certification is a prerequisite to which one and, I must add, I’ve made a couple of mistakes on the road until I’ve discovered a developer’s certification map by Jorgen Thelin that put everything in order and cleared all the confusions.

Great article about forms and ways of implementing data validation for the web applications.

Highly advised to read.

Let’s see how we can improve our UI by adding some watermarked “spice”:

Let’s define the primary style for the text box (textInput) and the dependent style for the watermark (textInput-watermark):

.textInput {
	border: 1px solid #C9C7BA;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding-left: 2px;
	padding-top: 2px;
}

.textInput-watermark {
   /* background-image: url('images/overlay.gif');
   background-repeat: no-repeat;
   padding-left: 20px;
   vertical-align: middle; */
   font-style: italic;
   color: DarkGray;
}

Note that the watermark style can contain images as well (see the commented out piece).

After the styles were defined we need to add some code that will apply it to the text box. To do this I’m going to extend the default GWT TextBox. The trick is to hijack the OnBlur and OnFocus events. When the OnBlur is occurring, we’re going to show the watermark and OnFocus – hide it:

public class WatermarkedTextBox extends TextBox implements BlurHandler, FocusHandler
{
	String watermark;
	HandlerRegistration blurHandler;
	HandlerRegistration focusHandler;

	public WatermarkedTextBox( )
	{
		super();
		this.setStylePrimaryName("textInput");
	}

	public WatermarkedTextBox(String defaultValue)
	{
		this();
		setText(defaultValue);
	}

	public WatermarkedTextBox(String defaultValue, String watermark)
	{
		this(defaultValue);
		setWatermark(watermark);
	}

	/**
	 * Adds a watermark if the parameter is not NULL or EMPTY
	 *
	 * @param watermark
	 */
	public void setWatermark(final String watermark)
	{
		this.watermark = watermark;

		if ((watermark != null) && (watermark != ""))
		{
			blurHandler = addBlurHandler(this);
			focusHandler = addFocusHandler(this);
			EnableWatermark();
		}
		else
		{
			// Remove handlers
			blurHandler.removeHandler();
			focusHandler.removeHandler();
		}
	}

	@Override
	public void onBlur(BlurEvent event)
	{
		EnableWatermark();
	}

	void EnableWatermark()
	{
		String text = getText();
		if ((text.length() == 0) || (text.equalsIgnoreCase(watermark)))
		{
			// Show watermark
			setText(watermark);
			addStyleDependentName("watermark");
		}
	}

	@Override
	public void onFocus(FocusEvent event)
	{
		removeStyleDependentName("watermark");

		if (getText().equalsIgnoreCase(watermark))
		{
			// Hide watermark
			setText("");
		}
	}
}

Gotta love this …

Thanks for all the attendees. You’ve made this event a success! Thanks to all the organizers – without you this would have never happened.

You can find all the pictures are on Flickr and all the the presentations are hosted on the on Architect Factory collateral page (hosted on Azure Cloud).

You can access my presentation directly on the Slide Share:

Note: check out the price analysis article of “True Cost of Hosting” of a big web application deployments on Amazon AWS infrastructure – HotPads

After months of working (mainly fighting with quirks of Java) with GWT I’ve accumulated so much knowledge on the topic so, I feel, it starts spilling over. I’m planning to convert this spill into a series of articles on how to build fat REST-full GWT web fat clients both on Java and .NET.

Here is the list of topics I’ll cover:

1. Building GWT fat client
2. Java REST-full Web services
3. .NET REST-full Web services
4. Internationalization and localization
5. IOC/DI
6. Unit testing and integration testing of all the components of the system
7. Build automation
8. and much, much more …

Here is a draft list of technologies I’ll be using:

1. GWT
2. Eclipse
3. Spring
4. Jersey
5. Tomcat
6. XStream
7. AJAX
8. JSON/XML
9. WCF
10. JUnit/TestND/NUnit
11. Selenium
12. Ant
13. TeamCity
14. and much, much more …

For starters, let’s see how to create a simple GWT fat client that talks to the REST-full Web services. As an example,

let’s think about contact management scenario where we’re going to create a web client that will be used to browse all your existing contacts.

We’re going to use:

1. GWT 1.6 + GWT RPC
2. Eclipse Ganymede + GWT Eclipse plugin

After creating a basic GWT project (in Eclipse you can use “Create GWT Project” icon on the toolbar), create a simple client (see the attached source code).

The client I’ll be using in my examples is very simple, but there are a couple of key points you should note. To make the GWT client to connect to the back end via GWT RPC you need to create 3 different classes:

1. ContactManagerService – Client side RPC stub
2. ContactManagerServiceAsync – The asyncronous counterpart of GreetingService
3. ContactManagerServiceImpl – The server side implementation of the RPC service

package com.igorshare.client;
@RemoteServiceRelativePath("contacts")
public interface ContactManagerService extends RemoteService {
	List<ContactInfo> getContacts(String filter);
}

package com.igorshare.client;
public interface ContactManagerServiceAsync {
	void getContacts(String filter, AsyncCallback<List<ContactInfo>> callback);
}

package com.igorshare.server;
public class ContactManagerServiceImpl extends RemoteServiceServlet implements
		ContactManagerService {
	public List<ContactInfo> getContacts(String filter) { ... }
}

Note that only serializable types can go over the wire. To make your own structure serializable, inherit it from IsSerializable interface. This will notify GWT generator to create a JSNI representation for this structure and an appropriate proxy.

This is how the ContactInfo class looks like:

package com.igorshare.client;
public class ContactInfo implements IsSerializable {

	public String FirstName;
	public String LastName;
	public String Company;

	...
}

This is as much ceremony as need to make sure that there is a REST-full communication between the server side and the client side.

To make a call to our new server, on the client side, a reference to the server proxy is needed as well as definition an asynchronous callback which  will handle a success and a failure of the execution. In our example the failure is not really handled – only an error message logged. On success – the contact table is cleaned and populated with the new data that came from the server.

private final ContactManagerServiceAsync greetingService = GWT
		.create(ContactManagerService.class);

...

// Add a handler to send the search criteria to the server
sendButton.addClickHandler(new ClickHandler() {
	/**
	 * Fired when the user clicks on the sendButton.
	 */
	public void onClick(ClickEvent event) {
		sendNameToServer();
	}

	/**
	 * Send the name from the nameField to the server and wait for a
	 * response.
	 */
	private void sendNameToServer() {
		greetingService.getContacts(filterField.getText(),
				new AsyncCallback<List<ContactInfo>>() {
					public void onFailure(Throwable caught) {
						// Show the RPC error message to the user
						GWT.log("Remote Procedure Call - Failure", caught);
					}

					public void onSuccess(List<ContactInfo> result) {
						contacts = result;
						updateContactTable();
					}

					private void updateContactTable()
					{
						// Clean contacts table
						for(int i=contactsTable.getRowCount()-1; i>0; i--)
							contactsTable.removeRow(i);

						// Fill the table with the data from the server
						for(ContactInfo contact : contacts)
						{
							int row = contactsTable.getRowCount();
							contactsTable.setText(row, 0, contact.FirstName);
							contactsTable.setText(row, 1, contact.LastName);
							contactsTable.setText(row, 2, contact.Company);
						}
					}
				});
	}
});

One more thing you should remember is that the relative path to the service (See the  @RemoteServiceRelativePath("contacts")  annotation on the ContactManagerService) should correspond to the path in the web.xml file:

<servlet>
	<servlet-name>contactsServlet</servlet-name>
	<servlet-class>com.igorshare.server.ContactManagerServiceImpl</servlet-class>
</servlet>
<servlet-mapping>
	<servlet-name>contactsServlet</servlet-name>
	<url-pattern>/contactmanager/contacts</url-pattern>
</servlet-mapping>

On the next post I’ll show how to make this GWT client to talk to a JAX-RS REST-full web service. I’ll use Jersey to enable our back-end service.  Stay tuned …

This Saturday I’ve held a “Best Practices” Zen-style discussion during the CodeCamp #11 in Waltham.

Some people were great, but I really expected to have more heated discussions and interesting “war” stories.

You can find the slide deck on the SlideShare

Had a pleasure presenting ADO.Net Data Services (Astoria) to the New England VB User Group last Thursday.

Had a lot of fun and there were a lot of great questions.

Feel free to shoot me any questions and you’re welcome to download the PowerPoint slide deck and BeerFest  example source code (yes, we’ve talked about beer tastings .

The slides are based on the Mix’08 and PDC’08 talks.

Decided to give a try to SlideShare and published the presentation there as well.

Last Wednesday John Resig stopped by to chat about jQuery. The room was packed so we had to join a second room. It was a pretty engaging presentation – loved it.

A couple of interesting links:

1. jQuery UI
2. jQuery Themes – Themeroller
3. Advanced jQuery on John’s blog
4. jQuery in Action book by Bear Bibeault and Yehuda Katz with source code examples

And finally loved the Google trends chart of the adoption rates of all the major java script libraries that John mentioned (link is under the picture):

This morning I have received a notification that I’ve passed one of the MCPD exams (others are still in Beta). Cool !!!