Adding Watermark to GWT Textbox widget

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("");
		}
	}
}

Job trends for GWT and jQuery on a sharp rise

Gotta love this …

Recent “Application Patters for the Cloud” presentation for Boston Architect factory

 

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

Building GWT web clients [Part 4.1] – How to create an Azure RESTful web service?

Prerequisites: make sure that you have all the Azure SDK tools installed for your VS2008.

 

(1) Start by creating a new “Web Cloud Service” project in the Visual Studio. Give it a nice name.

(2) Add a new “WCF Service” to the WebRole project.

(3) Define a required contract:

The most important part here is to put attributes that will tell the WCF in what format to send/receive the message body (XML or JSON) …

[ServiceContract(Name = "service", Namespace = "http://www.igorshare.com")]
public interface IContactManagerService
{
    [OperationContract]
    [WebGet(UriTemplate = "/contacts", BodyStyle = WebMessageBodyStyle.Bare,
       ResponseFormat = WebMessageFormat.Json)]
    List<Contact> GetAllContacts();

    [OperationContract]
    [WebGet(UriTemplate = "/contacts/{filter}", BodyStyle = WebMessageBodyStyle.Bare,
       ResponseFormat = WebMessageFormat.Json)]
    List<Contact> GetContacts(string filter);
}

[DataContract]
public class Contact
{
    [DataMember]
    public string FirstName { get; set; }

    [DataMember]
    public string LastName { get; set; }

    [DataMember]
    public string Company { get; set; }
}

(4) Implement the service logic:

public class ContactManagerService : IContactManagerService
{
    private static readonly List<Contact> Contacts = new List<Contact>() { ... };

    public List<Contact> GetAllContacts()
    {
        return Contacts;
    }

    public List<Contact> GetContacts(string filter)
    {
        string f = filter.ToLower();

        var contacts = from contact in Contacts
                       where contact.FirstName.ToLower().Contains(f)
                            || contact.LastName.ToLower().Contains(f)
                            || contact.Company.ToLower().Contains(f)
                       select contact;

        return contacts.ToList();
    }
}

(5) Configure it to be exposed as a RESTful service:

To make it REALLY, REALLY simple for you, do this trick:

a) Comment out the system.serviceModel section in the Web.config file

b) Add the Factory attribute to the .svc file

<%@ ServiceHost Language="C#" Debug="true"
Service="ContactManagerCloudService_WebRole.ContactManagerService"
CodeBehind="ContactManagerService.svc.cs"
Factory="System.ServiceModel.Activation.WebServiceHostFactory" %>

(6) Build the service

 

You’re interested in 2 artifacts of the build:

1. .cscfg file – configuration for the Cloud Service deployment
2. .cspkg file – all the bits packaged (zipped)

 

At this moment you have 2 choices:

1. Run your project in the local Development Fabric (for testing and debugging), or …
2. Deploy it to the Azure Cloud (for staging or production)

 

To deploy your application to the cloud, do right-click on the CloudService project and select “Publish”.

Visual Studio will launch the Azure Service Developer Portal page. Log-in to your account, create a project and deploy your bits to the staging environment:

 

This is it!  You’re good to go.

BTW: make sure that your application works in the staging environment and then you can push it to Production by just switching it with the Staging.

 

 

Note: Check out a great explanation about the difference between the WCF REST Configuration for ASP.NET AJAX and plain REST Services by Rick Strahl.

Building GWT web clients [Part 4] – How to connect GWT client to Azure web service?

Stay tuned …

Building GWT web clients [Part 3] – How to connect GWT client to JAX-RS Jersey server?

Stay tuned …

Building GWT web clients [Part 2.1] – How to control JSON output format from Jersey?

As you know that in XML you can represent the same data in variety of ways by using fields, names, attributes, etc..

The same is true to JSON. In many cases different serializers produce different JSON representation of the same objects.

JAX-RS (as well as Jersey) provide you control over what and how you want to serialize. This is accomplished via providers.

Here is an example of such provider (Note that the class should be marked with @Provider annotation):

@Provider
public class JAXBContextResolver implements ContextResolver<JAXBContext> {
    private JAXBContext context;
    private Class<?>[] types = { ListDescription.class }; 

    public JAXBContextResolver() throws Exception {
        JSONConfiguration config = JSONConfiguration.natural().build();
        context = new JSONJAXBContext(config, types);
    } 

    public JAXBContext getContext(Class<?> objectType) {
        for (Class<?> type : types) {
            if (type == objectType) {
                return context;
            }
        }
        return null;
    }
}

Note that by creating an appropriate JSONConfiguration (JSONConfiguration.natural().build()) you, in fact, control the output JSON format. The JSONConfiguration class provide 4 different JSON formatters:

1. natural (Jackson)
2. mapped
3. mappedJettison
4. Badgerfish

Here is how the output will vary, depending on the choice of the configuration. Don’t forget that the class should be annotated with A simple class (with fields (int)ID and (String)Name) added to an ArrayList and then returned back as a @GET return value:

@XmlRootElement
public class ListDescription
{
	public int ID;
	public String Name;
}

@GET
@Produces({MediaType.APPLICATION_JSON })
public List<DataListInfo> getAllLists()
{
	List<ListDescription> lists = new ArrayList<ListDescription>();
	ListDescription ls = new ListDescription();
	ls.ID = 1;
	ls.Name = "Test";
	lists.add(ls);
	return lists;
}

This is what you’ll get from each configuration (respectively):

mappedJettison:

{"listDescriptions":{"listDescription":{"ID":1,"Name":"Test"}}}

mapped:

{"listDescription":{"ID":"1","Name":"Test"}}

natural (jackson):

[{"ID":1,"Name":"Test"}]

Badgerfish:

{"listDescriptions":{"listDescription":{"ID":{"$":"1"},"Name":{"$":"Test"}}}}

Building GWT web clients [Part 2] – How to expose REST-full JAX-RS service with Jersey on Tomcat server?

In the previous article (Part 1) we’ve seen how to create a web-based REST-full client (and an appropriate server) by using GWT. GWT is not providing any “standard” REST (if you can use this word in REST context at all) interface, but, merely, exposes the server-side logic via a proprietary GWT RPC interface.

Today, the most common REST standard is the JAX-RS specification. By implementing your code along the JAX-RS guidelines you can be rest assured that you can easily switch one REST-RX library with another.

As of today there are a couple of JAX-RS libraries used by the Java community:

1. Jersey
2. Restlet
3. Portlet
4. etc…

On the other hand, being a big fan of Spring, I was hoping that Spring will provide the JAX-RS support in it’s Spring v3 release, but, looking at the M3 drop, I have realized that it’s nowhere near that promise (check my discussion on the StackOverflow).

For this post I’m going to use Jersey JAX-RS implementation. Let’s start with creating

Building fat GWT web clients [Intro] – How to create a GWT RPC client?

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,

Tree event handler in GWT 1.6

The documentation was a little sparse so, if you’d like to subscribe to the click events on the tree nodes you need to add a selection handler.

This is how you add a selection handler to the whole tree:

Tree optionsTree = new Tree();
optionsTree.addSelectionHandler(new SelectionHandler()
{
    @Override
    public void onSelection(SelectionEvent event)
    {
        Window.alert(event.getSelectedItem().getText());
    }
});