GWT Interview Questions and Answers

Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. GWT is used by many products at Google, including Google AdWords and Orkut.

Following are the features of GWT

• Google Web Toolkit (GWT) is a development toolkit to create RICH Internet Application (RIA).
• GWT provides developers option to write client side application in JAVA.
• GWT compiles the code written in JAVA to JavaScript code.
• Application written in GWT is cross-browser compliant. GWT automatically generates JavaScript code suitable for each browser.
• GWT is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.

Following are the core components of GWT

• GWT Java to JavaScript compiler − This is the most important part of GWT which makes it a powerful tool for building RIAs. The GWT compiler is used to translate all the application code written in Java into JavaScript.
• JRE Emulation library − Google Web Toolkit includes a library that emulates a subset of the Java runtime library. The list includes java.lang, java.lang.annotation, java.math, java.io, java.sql, java.util and java.util.logging.
• GWT UI building library − This part of GWT consists of many subparts which includes the actual UI components, RPC support, History management, and much more.
• GWT Hosted Web Browser − GWT Hosted Web Browser lets you run and execute your GWT applications in hosted mode, where your code runs as Java in the Java Virtual Machine without compiling to JavaScript.

A GWT application consists of following four important parts out of which last part is optional but first three parts are mandatory −

• Module descriptors
• Public resources
• Client-side code
• Server-side code

A module descriptor is the configuration file in the form of XML which is used to configure a GWT application. A module descriptor file extension is *.gwt.xml, where * is the name of the application and this file should reside in the project’s root.

This provides name of the application.

This adds other gwt module in application just like import does in java applications. Any number of modules can be inherited in this manner.

This specifies the name of class which will start loading the GWT Application.

Yes! Any number of entry-point classes can be added.

onModuleLoad() function gets called and acts similar to main method of a java application.

They are called sequentially in the order in which entry-point classes appear in the module file. So when the onModuleLoad() of your first entry point finishes, the next entry point is called immediately.

This specifies the names of source folders which GWT compiler will search for source compilation.

The public path is the place in your project where static resources referenced by your GWT module, such as CSS or images, are stored.

What is default public path for static resources in GWT application?”]

The default public path is the public subdirectory underneath where the Module XML File is stored.

Automatically injects the external JavaScript file located at the location specified by src.

Automatically injects the external CSS file located at the location specified by src.

A module entry-point is any class that is assignable to EntryPoint and that can be constructed without parameters. When a module is loaded, every entry point class is instantiated and its EntryPoint.onModuleLoad() method gets called.

It contains the javascript code required to resolve deferred binding configuarations (for example, browser detection) and to use lookup table generated by GWT compiler to locate one of the .cache.html.

It contains the actual program of a GWT application.

Explain bootstrap procedure for GWT application.

Following are the steps of bootstrap proceure for GWT application when a browser loads the GWT application −

• Browser loads the host html page and .nocache.js file.
• Browser executes the .nocache.js file’s javascript code.
• .nocache.js code resolves deferred binding configuarations (for example, browser detection) and use lookup table generated by GWT compiler to locate one of the .cache.html.
• .nocache.js code then creates a html hidden iframe, inserts that iframe into the host page’s DOM, and loads the .cache.html file into the same iframe.
• .cache.html contains the actual program of a GWT application and once loaded in iframe shows the GWT application in the browser.

GWT compiler generates .nocache.js file every time with the same name whenever a GWT application is compiled. So browser should always download the .nocache.js file to get the latest gwt application. gwt.js code actually appends a unique timestamp at the end of the file name so that browser always treat it a new file and should never cache it.

The most important public resource is host page which is used to invoke actual GWT application. A typical HTML host page for an application might not include any visible HTML body content at all but it is always expected to include GWT application via a <script…/> tag.

By default, the class name for each component is gwt-<classname>. For example, the Button widget has a default style of gwt-Button and similar way TextBox widgest has a default style of gwt-TextBox.

Do GWT compiler creates default Id attribute for its Widget by default?

No! By default, neither the browser nor GWT creates default id attributes for widgets.

This method will clear any existing styles and set the widget style to the new CSS class provided using style.

This method will add a secondary or dependent style name to the widget. A secondary style name is an additional style name that is,so if there were any previous style names applied they are kept.

This method will remove given style from the widget and leaves any others associated with the widget.

This method gets all of the object’s style names, as a space-separated list.

This method sets the object’s primary style name and updates all dependent style names.

By default, the primary style name of a widget will be the default style name for its widget class. For example, gwt-Button for Button widgets. When we add and remove style names using AddStyleName() method, those styles are called secondary styles.

The final appearance of a widget is determined by the sum of all the secondary styles added to it, plus its primary style. You set the primary style of a widget with the setStylePrimaryName(String) method.

There are multiple approaches for associating CSS files with your module. Modern GWT applications typically use a combination of CssResource and UiBinder.

• Using a <link> tag in the host HTML page.
• Using the <stylesheet> element in the module XML file.
• Using a CssResource contained within a ClientBundle.
• Using an inline <ui:style> element in a UiBinder template.

The class UIObject is the superclass for all user-interface objects.

Explain UIObject class.

The class UIObject is the superclass for all user-interface objects. It simply wraps a DOM element, and cannot receive events. It provides direct child classes like Widget, MenuItem, MenuItemSeparator, TreeItem.

• All UIObject objects can be styled using CSS.
• Every UIObject has a primary style name that identifies the key CSS style rule that should always be applied to it.
• More complex styling behavior can be achieved by manipulating an object’s secondary style names.

The class Widget is the base class for the majority of user-interface objects. Widget adds support for receiving events from the browser and being added directly to panels.

This widget contains text, not interpreted as HTML using a <div>element, causing it to be displayed with block layout.

This widget can contain HTML text and displays the html content using a <div> element, causing it to be displayed with block layout.

This widget displays an image at a given URL.

This widget represents a simple <a> element.

Button widget represents a standard push button.

PushButton represents a normal push button with custom styling.

ToggleButton widget represents a stylish stateful button which allows the user to toggle between up and down states.

CheckBox widget represents a standard check box widget. This class also serves as a base class for RadioButton.

RadioButton widget represents a mutually-exclusive selection radio button widget.

ListBox widget represents a list of choices to the user, either as a list box or as a drop-down list.

SuggestBox widget represents a text box or text area which displays a pre-configured set of selections that match the user’s input. Each SuggestBox is associated with a single SuggestOracle. The SuggestOracle is used to provide a set of selections given a specific query string.