IgorShare Thoughts and Ideas

Consulting and Training

Archive for June, 2009

Adding Watermark to GWT Textbox widget

Posted by Igor Moochnick on 06/30/2009

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

clip_image001

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

Posted in Design, GWT, Java, Tutorials, Web | 10 Comments »

Job trends for GWT and jQuery on a sharp rise

Posted by Igor Moochnick on 06/11/2009

Gotta love this …

jobgraph[1]

Posted in GWT, jQuery | Leave a Comment »

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

Posted by Igor Moochnick on 06/10/2009

Igor Moochnick 

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

Posted in Azure, Cloud, Community, Presentations, Web | Leave a Comment »

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

Posted by Igor Moochnick on 06/08/2009

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 GetAllContacts();

    [OperationContract]
    [WebGet(UriTemplate = "/contacts/{filter}", BodyStyle = WebMessageBodyStyle.Bare,
       ResponseFormat = WebMessageFormat.Json)]
    List 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 Contacts = new List() { ... };

    public List GetAllContacts()
    {
        return Contacts;
    }

    public List 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


(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:

clip_image001

 

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.

Posted in .NET, Azure, C#, Cloud, JSON, REST, Tutorials, WCF | 2 Comments »

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

Posted by Igor Moochnick on 06/08/2009

Stay tuned …

Posted in Azure, Cloud, GWT, Java, JSON, REST, Tutorials | Leave a Comment »

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

Posted by Igor Moochnick on 06/08/2009

Stay tuned …

Posted in Cloud, GWT, Java, JAX-RS, Jersey, JSON, REST, Tutorials | 7 Comments »

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: