GWT - Interview Questions

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 reasons to prefer GWT for development projects −

• Being Java based, you can use JAVA IDEs like Eclipse to develop GWT applcation. Developers can use code auto-complete/refactoring/navigation/project management and all features of IDEs.

• GWT provides full debugging capability. Developers can debug the client side application just as an Java Application.

• GWT provides easy integration with Junit and Maven.

• Again being Java based, GWT has a low learning curve for Java Developers.

• GWT generates optimized javascript code, produces browser's specific javascript code by self.

• GWT provides Widgets library provides most of tasks required in an application.

• GWT is extensible and custom widget can be created to cater to application needs.

• On top of everything, GWT applications can run on all major browsers and smart phones including Android and iOS based phones/tablets.

Following are the disadvantages of GWT −

• Not indexable − Web pages generated by GWT would not be indexed by search engines because these applications are generated dynamically.

• Not degradable − If your application user disables Javascript then user will just see the basic page and nothing more.

• Not designer's friendly − GWT is not suitable for web designers who prefer using plain HTML with placeholders for inserting dynamic content at later point in time.

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.

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.

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.

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.

• 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.

TextBox widget represents a single line text box.

PasswordTextBox widget represents a text box that visually masks its input to prevent eavesdropping.

TextArea widget represents a text box that allows multiple lines of text to be entered.

RichTextArea widget represents a rich text editor that allows complex styling and formatting.

FileUpload widget wraps the HTML <input type='file'> element.

Hidden widget represets a hidden field in an HTML form.

Tree widget represents a standard hierarchical tree widget. The tree contains a hierarchy of TreeItems that the user can open, close, and select.

MenuBar widget represents a standard menu bar widget. A menu bar can contain any number of menu items, each of which can either fire a Command or open a cascaded menu bar.

DatePicker widget represents a standard GWT date picker.

CellTree widget represents a view of a tree. This widget will only work in standards mode, which requires that the HTML page in which it is run have an explicit <!DOCTYPE> declaration.

CellList widget represents a single column list of cells.

CellTable widget represents a tabular view that supports paging and columns.

CellBrowser widget represents a browsable view of a tree in which only a single node per level may be open at one time. This widget will only work in standards mode, which requires that the HTML page in which it is run have an explicit <!DOCTYPE> declaration.

Layout Panels can contain other widgets. These panels controls the way widgets to be shown on User Interface. Every Panel widget inherits properties from Panel class which in turn inherits properties from Widget class and which in turn inherits properties from UIObject class.

Panel is the abstract base class for all panels, which are widgets that can contain other widgets.

FlowPanel widget represents a panel that formats its child widgets using the default HTML layout behavior.

HorizontalPanel widget represents a panel that lays all of its widgets out in a single horizontal column.

VerticalPanel widget represents a panel that lays all of its widgets out in a single vertical column.

HorizontalSplitPanel widget represents a panel that arranges two widgets in a single horizontal row and allows the user to interactively change the proportion of the width dedicated to each of the two widgets. Widgets contained within a HorizontalSplitPanel will be automatically decorated with scrollbars when necessary.

VerticalSplitPanel widget represents a A panel that arranges two widgets in a single vertical column and allows the user to interactively change the proportion of the height dedicated to each of the two widgets. Widgets contained within a VertialSplitPanel will be automatically decorated with scrollbars when necessary.

FlexTable widget represents a flexible table that creates cells on demand. It can be jagged (that is, each row can contain a different number of cells) and individual cells can be set to span multiple rows or columns.

Grid widget represents a rectangular grid that can contain text, html, or a child Widget within its cells. It must be resized explicitly to the desired number of rows and columns.

DeckPanel is a panel that displays all of its child widgets in a 'deck', where only one can be visible at a time. It is used by TabPanel.

This widget represents a panel that lays its child widgets out "docked" at its outer edges, and allows its last widget to take up the remaining space in its center.

This widget represents a panel that contains HTML, and which can attach child widgets to identified elements within that HTML.

This widget represents a panel that represents a tabbed set of pages, each of which contains another widget. Its child widgets are shown as the user selects the various tabs associated with them. The tabs can contain arbitrary HTML.

This widget represents a type of widget that can wrap another widget, hiding the wrapped widget's methods. When added to a panel, a composite behaves exactly as if the widget it wraps had been added.

SimplePanel is the base class for panels that contain only one widget.

ScrollPanel widget represents a simple panel that wraps its contents in a scrollable area.

FocusPanel widget represents a simple panel that makes its contents focusable, and adds the ability to catch mouse and keyboard events.

This widget represents a panel that wraps its contents in an HTML <FORM> element.

This widget represents a panel that can pop up over other widgets. It overlays the browser's client area (and any previously-created popups).

This widget represents a form of popup that has a caption area at the top and can be dragged by the user. Unlike a PopupPanel, calls to PopupPanel.setWidth(String) and PopupPanel.setHeight(String) will set the width and height of the dialog box itself, even if a widget has not been added as yet.

GWT provides a event handler model similar to Java AWT or SWING User Interface frameworks.

A listener interface defines one or more methods that the widget calls to announce an event. GWT provides a list of interfaces corresponding to various possible events.

A class wishing to receive events of a particular type implements the associated handler interface and then passes a reference to itself to the widget to subscribe to a set of events.

For example, the Button class publishes click events so you will have to write a class to implement ClickHandler to handle click event.

All GWT event handlers have been extended from EventHandler interface and each handler has only a single method with a single argument. This argument is always an object of associated event type. Each event object have a number of methods to manipulate the passed event object.

GWT provides three ways to create custom user interface elements. There are three general strategies to follow −

• Create a widget by extending Composite Class − This is the most common and easiest way to create custom widgets. Here you can use existing widgets to create composite view with custom properties.

• Create a widget using GWT DOM API in JAVA − GWT basic widgets are created in this way. Still its a very complicated way to create custom widget and should be used cautiously.

• Use JavaScript and wrap it in a widget using JSNI − This should generally only be done as a last resort. Considering the cross-browser implications of the native methods, it becomes very complicated and also becomes more difficult to debug.

• The UiBinder is a framework designed to separate Functionality and View of User Interface.

• The UiBinder framework allows developers to build gwt applications as HTML pages with GWT widgets configured throughout them.

• The UiBinder framework makes easier collaboration with UI designers who are more comfortable with XML, HTML and CSS than Java source code.

• The UIBinder provides a declarative way of defining User Interface.

• The UIBinder seperates the programmic logic from UI.

• The UIBinder is similar to what JSP is to Servlets.

• RPC, Remote Procedure Call is the mechansim used by GWT in which client code can directly executes the server side methods.

• GWT RPC is servlet based.

• GWT RPC is asynchronous and client is never blocked during communication.

• Using GWT RPC Java objects can be sent directly between the client and the server (which are automatically serialized by the GWT framework).

• Server-side servlet is termed as service.

• Remote procedure call that is calling methods of server side servlets from client side code is referred to as invoking a service.

Following are the three components used in GWT RPC communication mechanism −

• A remote service (server-side servlet) that runs on the server.

• Client code to invoke that service.

• Java data objects which will be passed between client and server.

• GWT client and server both serialize and deserialize data automatically so developers are not required to serialize/deserialize objects and data objects can travel over HTTP.

A java data object should implement isSerializable interface so that it can be transferred over the wire in GWT RPC.

Internationalization is a way to show locale specific information on a website. For example, display content of a website in English language in United States and in Danish in France.

GWT provides three ways to internationalize a GWT application −

• Static String Internationalization.

• Dynamic String Internationalization.

• Localizable Interface.

This technique is most prevalent and requires very little overhead at runtime; is a very efficient technique for translating both constant and parameterized strings;simplest to implement. Static string internationalization uses standard Java properties files to store translated strings and parameterized messages, and strongly-typed Java interfaces are created to retrieve their values.

This technique is very flexible but slower than static string internationalization. Host page contains the localized strings therefore, applications are not required to be recompiled when we add a new locale. If GWT application is to be integrated with an existing server-side localization system, then this technique is to be used.

This technique is the most powerful among the three techniques. Implementing Localizable allows us to create localized versions of custom types. It's an advanced internationalization technique.

extend-property tag with attribute name set as locale and values as language specific locale, say de for german locale.

In order to use GWT History support, we must first embed following iframe into our host HTML page.

<iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

The logging framework emulates java.util.logging, so it uses the same syntax and has the same behavior as server side logging code.

GWT logging is configured using .gwt.xml files.

We can configure logging to be enabled/disabled; we can enable/disable particular handlers, and change the default logging level.

SystemLogHandler logs to stdout and these messages can only be seen in Development Mode in the DevMode window.

DevelopmentModeLogHandler logs by calling method GWT.log. These messages can only be seen in Development Mode in the DevMode window.

ConsoleLogHandler logs to the javascript console, which is used by Firebug Lite (for IE), Safari and Chrome.

FirebugLogHandler logs to Firebug console.

PopupLogHandler logs to the popup which resides in the upper left hand corner of application when this handler is enabled.

This handler sends log messages to the server, where they will be logged using the server side logging mechanism.