Custom Widget in GWT

GWT Provides ways to create Custom User Interface.They are 3 ways to Create Custom Widgets which are listed below.

1. By Extending Composite Class
2. Wrap JavaScript inside Widget using JSNI
3. Creating Widget from Scratch Using GWT DOM API.

By Extending Composite Class:

               The most effective way of creating custom widget is by extending composite class.Create a class which extend composite class and pass the constructed widget inside the initWidget() Method. 

For Example:

 Creating a TextField component like TextBox with Label

 public class TextField extends Composite{

     public TextField(){

       HorizontalPanel panel=new HorizontalPanel(); // to Create HorizontalPanel

        Label lbl=new Label();    //to Create Label

        lbl.setText("NAME");     

       TextBox box=new TextBox();  //to Create TextBox

        panel.add(lbl);     //Add label into HorizontalPanel

        panel.add(box);    //Add textbox into HorizontalPanel

        initWidget(panel);      //Pass the HorizontalPanel into initWidget of Composite Class

}

}

Which gives the Custom Widget see the Screen Shot

Custom Widget:TextField Component

Wrapping JavaScript into Widget Using JSNI:

This is the one more approach to create custom widget, Use JavaScript and Wrapped inside into GWT Component using Java Script Native Interface(JSNI).

Syntax for JSNI:

public static native void customWidget()/*-{

           //JavaScript Code

  }-*/; 

Creating Widget from Scratch Using GWT DOM API:

This is the third approach to create custom widget , using Java code from Scratch it is some what trickier since it has be created from lower level.Many of the GWT Basic widgets are written by using  this approach like TextBox,Button.

Finally,Its recommanded and most effective way to create custom widget is by extending Composite Class.