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.

String in Java

• Sequence of character is Called a String
• Example:  "abc","xyz","pqr$","4lkm"
• Strings are immutable (non mutable) meaning once the string object is created can't change the value of string object.
• They are two ways to create string object
• by declaring a variable (using assignment operator)
• Example: String s="abc";
• by creating a instance of a class
• Example: String s=new String("pqr");
• The Difference between the creating of string object using assignment and creating instance is that in First case"Memory" will be allotted in Free pool of Memory (Method Area) and in the second case"Memory" will be alloted in Heap Memory.
• If string object is created using assignment operator which contain the same value as other like

String s1="abc";

String s2="abc";

See in the above example,String s1 is created which contains the value "abc" again String s2 which contain the same value "abc" will point to the same memory address.In these case the memory addresses of this content will be equal (s1==s2) true.

• If the String object is created using new instance then what ever it may be case it will create a new object like 

String s3=new String("abc");

• then it will create new instance of  object in heap memory.
• Finally if lot of manipulation in string is required then its not recommended to use string, In this case need to use StringBuffer.

GWT 2.7 Features

GWT 2.7 Include following feature which are listed Below,

SuperDev mode as default
The Main feature in GWT 2.7 is SuperDev mode(SDM), with Dev mode now deprecated. You use the browser’s built in debugger and don’t need to use any browser plugins. With SDM, all of your debugging happens right inside your browser, making it easier to debug mixed Java/Javascript code. If you are familiar with Super Dev Mode in 2.6, you will also notice that you no longer need any bookmarklets to enable/recompile when using Super Dev Mode, the code is recompiled automatically when you reload the page.

Incremental compilation
If you have a large GWT project, you will instantly notice the incremental compilation feature of GWT 2.7. No longer will Super Dev Mode recompile your full project but instead only recompile the changed parts. The speedup in development is significant.

Easier Javascript integration
The new annotation based JsInterop allows you to quickly and easily integrate your GWT classes with Javascript. Instead of writing JSNI methods/JSO classes, you can simply annotate (@JSType, @JSProperty) which Javascript should be mapped to your Java file.
An example of JSInterop , by reducing the amount of code from
class Window extends JavaScriptObject {
  public native void alert(String msg)/-*{
    this.alert(msg);
  }-*/;
  public native boolean void confirm(String msg)/-*{
    this.confirm(msg);
  }-*/;
  public native boolean addEventListener(String event, EventListener listener)/-*{
    var callback = function(evt) {
    listener.@com.google.gwt.user.client.EventListener::onBrowserEvent(*)(evt);
    };
    this.addEventListener(event, callback);
  }-*/;
}
to just this
@JsInteface
interface Window {
  void alert(String msg);
  boolean confirm(String msg);
  void addEventListener(String event, EventListener listener);
}
Do note that JsInterop is still experimental in GWT 2.7 and will likely change in the future. You will need to add an X flag to the compiler to enable it in GWT 2.7

New GSS resources
CssResource is using Flute to parse the CSS, but it only supports CSS2 and a couple of features added for Gwt. With GssResource, GWT comes to a new era, not only supporting modern CSS syntax but also the Closure Stylesheets semantics. Now it will be even easier to write CSS since the closure processor adds variables, functions, conditionals, mixins and much more to the standard CSS3.
@def PADDING_RIGHT 50px;
@def PADDING_LEFT 50px;

@defmixin size(WIDTH, HEIGHT) {
  width: WIDTH;
  height: HEIGHT;
}

.class-name {
    @mixin size(add(PADDING_RIGHT, 150px, PADDING_LEFT), 50px);
    padding-right: PADDING_RIGHT;
}
Both CssResources and GssResources will live together in 2.7.0 for backward compatibility, but the old one will be removed in a future release.

For more Information see the Release note www.gwtproject.org