GWT Provides ways to create Custom User Interface.They are 3 ways to Create Custom Widgets which are listed below.
- By Extending Composite Class
- Wrap JavaScript inside Widget using JSNI
- 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.
