GWTiger - Mask Widget Demo

This small example demonstrates a couple of features of GWTiger Framework while demonstrating how little code is required to get these features in your application.

Mask Widgets

Try to enter some numbers in the SSN or phone field below. You will notice that the numbers follow a mask. The Mask for SSN is ###-##-#### (see code below)

Validation Framework

Notice the method txtSSN.setRequired(true); in the source code below. That is all what is required to make the SSN field a required field. An * appears next to the field to indicate that this is a required field. If you click the save button without entering any value in the fields, an error message will appear.

Internationalization

The masks and formats can be localized as shown by the example below. Click on the links and try out for yourself.
The US(default) Version of this page has the date format of MM/DD/YYYY and the SSN format of ###-##-####
The en_CA localized version has the date format of DD/MM/YYYY and the SIN format of ### ### ###

package com.mycompany.client;

import org.gwtiger.client.screen.BaseScreen;
import org.gwtiger.client.widget.field.DateFieldWidget;
import org.gwtiger.client.widget.field.LabelFieldWidget;
import org.gwtiger.client.widget.field.MaskTextFieldWidget;
import org.gwtiger.client.widget.field.PhoneFieldWidget;
import org.gwtiger.client.widget.panel.ButtonCallback;
import org.gwtiger.client.widget.panel.ButtonPanel;
import org.gwtiger.client.widget.panel.ValidatePanel;

import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.ui.DockPanel;
import com.mycompany.client.i18n.MyMessages;

/**
 * Any screen that needs to use the framework must extend BaseScreen.
 * If you need to use the Save/Cancel/Close buttons then you need to implement 
 * the ButtonCallBack Interface as well 
 * @author Addy
 *
 */
public class MaskScreen extends BaseScreen implements ButtonCallback {
	//This is the validation Panel that does most of the validation magic
	ValidatePanel vp = new ValidatePanel();
    //This field carries the internationalized text
    private static MyMessages messages=null;

	//This is a widget that displays the Label, TextEdit box and an error message if required
	// ###-##-#### is the mask that is set. Only numbers can be accepted in the place where # exists.
	private MaskTextFieldWidget txtSSN = new MaskTextFieldWidget(getMessages().lblSSN(),
			getMessages().formatSSN());

	// This is a general purpose widget that has a mask of "(###) ###-####"
	private PhoneFieldWidget txtPhone = new PhoneFieldWidget(getMessages().lblPhone());

	//This is a date widget.
	private DateFieldWidget txtDOB = new DateFieldWidget(
            getMessages().lblDOB(getGWTigerMessages().dateFormat()));

	private LabelFieldWidget lblLocale=new LabelFieldWidget(getMessages().lblLocale());
    
	public MaskScreen() {
		//All screens have a place for Title
		this.setTitleText(getMessages().screenTitle());

		//This method makes the SSN field required
		txtSSN.setRequired(true);
		vp.add(txtSSN);

		txtPhone.setRequired(true);
		vp.add(txtPhone);

		vp.add(txtDOB);
    
		lblLocale.setText(getGWTigerMessages().locale());
		vp.add(lblLocale);

		//Button Panel adds utility functions to disable save, Cancel or close buttons
		ButtonPanel btnPanel = new ButtonPanel();
		//Add the save button
		btnPanel.addSaveButton();
		//Add  the cancel button
		btnPanel.addClearButton();
		
		// remember to set the callback
		btnPanel.setCallback(this);
		vp.add(btnPanel);

		dockPanel.add(vp, DockPanel.NORTH);
		// All composites must call initWidget() in their constructors.
		initWidget(dockPanel);
	}

	/**
	 * This method is called if validation function returns true
	 */
	public void save() {
		System.out.println("Add logic to save the data on the server");
	}

	/**
	 * This method is called when the clear button is clicked
	 */
	public void clear() {
		vp.clear();
	}

	/**
	 * This method is called when the save button is clicked
	 */
	public boolean validate() {
		return vp.validate();
	}
     /**
     * This method is used to return Internationalized messages
     * @return handler
     */
    public static MyMessages getMessages() {
        if (messages == null)
            messages = (MyMessages) GWT.create(MyMessages.class);
        return messages;
    }

}