Monday, September 5, 2011

Creating GWT Overlays

Want to create GWT overlays?  Don't know what overlays are, or even if you need one?  A quick introduction to GWT overlays may be in order.

Overlays are an easy way to intertwine JavaScript objects with your Java objects in your GWT applciation.  This has a number of useful advantages, including leveraging code completion and re-factoring with your IDE.

Say, we start with the following JSON string, a representation of user data.

{ "firstName" : "Bo", "lastName" : "Doe" }

You'd like to be able to call user.getFirstName() or user.getLastName() on the user representation as you would using normal Java notation for accessing POJO values.


    1.  Create a User class... 
public class User extends JavaScriptObject {
    ...
}

User extends JavaScriptObject, a marker class that GWT uses to identify User as a JavaScript object.  Next you need a way to create this object and superimpose the object type, User, on your JSON string.


    2.  Create the JavaScriptObject from the JSON... 
public class User extends JavaScriptObject {
    ...
    public static native User create(String json) /*-{
        return eval('(' + json + ')');
    }-*/;
}

IMPORTANT! You should trust your source before evaluating JavaScript.

The string parameter json in your call to create() is your JSON string as shown above. eval will parse your JSON string, and produce a similar JavaScript object.  Lastly, you'll need some way to retrieve your data.


    3.  Add methods to access JSON values...
public class User extends JavaScriptObject {

    public final native String getFirstName() /*-{
        return this.firstName;
    }-*/;

    public final native String getLastName() /*-{
        return this.lastName;
    }-*/;

    public static native User create(String json) /*-{
        return eval('(' + json + ')');
    }-*/;
}

Notice the this reference inside getFirstName() and getLastName().  That this reference identifies the JavaScript object that's overlayed, so use it as you would in any other JavaScript.

And that is it.  Enjoy cleaner code.

5 comments:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

    ReplyDelete
  2. Thanks a lot very much for the high quality and results-oriented help. I won’t think twice to endorse your blog post to anybody who wants and needs support about this area.

    java training in bangalore

    ReplyDelete
  3. I simply wanted to write down a quick word to say thanks to you for those wonderful tips and hints you are showing on this site.
    Final Year Project Center in Chennai | Final Year Project Center in Velachery

    ReplyDelete
  4. Ciitnoida provides Core and java training institute in noida. We have a team of experienced Java professionals who help our students learn Java with the help of Live Base Projects. The object-oriented, java training in noida , class-based build of Java has made it one of most popular programming languages and the demand of professionals with certification in Advance Java training is at an all-time high not just in India but foreign countries too.

    By helping our students understand the fundamentals and Advance concepts of Java, we prepare them for a successful programming career. With over 13 years of sound experience, we have successfully trained hundreds of students in Noida and have been able to turn ourselves into an institute for best Java training in Noida.

    java training institute in noida
    java training in noida
    best java training institute in noida
    java coaching in noida
    java institute in noida

    ReplyDelete
  5. Sap Training Institute in Noida

    CIIT Noida provides Best SAP Training in Noida based on current industry standards that helps attendees to secure placements in their dream jobs at MNCs. CIIT Provides Best ERP SAP Training in Noida. CIIT is one of the most credible ERP SAP training institutes in Noida offering hands on practical knowledge and full job assistance with basic as well as advanced level ERP SAP training courses. At CIIT ERP SAP training in noida is conducted by subject specialist corporate professionals with 7+ years of experience in managing real-time ERP SAP projects. CIIT implements a blend of aERPemic learning and practical sessions to give the student optimum exposure that aids in the transformation of naïve students into thorough professionals that are easily recruited within the industry.

    At CIIT’s well-equipped ERP SAP training center in Noida aspirants learn the skills for ERP SAP Basis, ERP SAP ABAP, ERP SAP APO, ERP SAP Business Intelligence (BI), ERP SAP FICO, ERP SAP HANA, ERP SAP Production Planning, ERP SAP Supply Chain Management, ERP SAP Supplier Relationship Management, ERP SAP Training on real time projects along with ERP SAP placement training. ERP SAP Training in Noida has been designed as per latest industry trends and keeping in mind the advanced ERP SAP course content and syllabus based on the professional requirement of the student; helping them to get placement in Multinational companies and achieve their career goals.

    ERP SAP training course involves "Learning by Doing" using state-of-the-art infrastructure for performing hands-on exercises and real-world simulations. This extensive hands-on experience in ERP SAP training ensures that you absorb the knowledge and skills that you will need to apply at work after your placement in an MNC.

    ReplyDelete