GWT RootLayoutPanel

Introduction

Sometimes, as a developer, we want to design the panels' user interface and fit all the content inside the browser's window size, but how to design such panels?
The answer is with the help of GWT's layout panel, which aids in designing the user interface of the panels. The panel fully occupies the browser window and adjusts the size of its children as the browser's window is adjusted. There are various types of layout panels, and one of those is RootLayoutPanel.

So, now let us learn about GWT RootLayoutPanel.

GWT RootLayoutPanel

Google Web Toolkit or GWT is a development toolkit used to build and optimize complex browser-based applications. GWT panels form a stable basis for a fast and predictable application-level layout. The layout panel works in the standard mode, which requires that the HTML page it runs has <!DOCTYPE> declaration.

The bulk of the layout system is manifested in a series of panel widgets. Each of these widgets positions its children dependably by taking advantage of the underlying layout system.

RootLayoutPanel

RootLayoutPanel is a singleton that acts as the root container to which all other layout panels ought to be attached. Because it extends LayoutPanel, you can position whatever number of children with constraints.

Class Declaration for GWT RootLayoutPanel

Declaration for com.google.gwt.user.client.ui.RootLayoutPanel is given below:

public class RootLayoutPanel
extends LayoutPanel

You can also try this code with Online Java Compiler

Run Code

Class RootLayoutPanel all Implemented Interfaces:

HasAttachHandlers, HasHandlers, EventListener, AnimatedLayout, HasVisibility, HasWidgets, HasWidgets.ForIsWidget, IndexedPanel, IndexedPanel.ForIsWidget, IsWidget, ProvidesResize, RequiresResize, java.lang.Iterable<Widget>

• It is a singleton LayoutPanel implementation that always attaches itself to the body of the document (i.e. RootPanel.get()).
• When this panel is initially created, and each time the window is resized, this panel automatically calls RequiresResize.onResize() on itself.

Note - This widget only functions in standards mode, which necessitates the presence of an explicit <!DOCTYPE> declaration in the HTML page on which it is used.

GWT RootLayoutPanel Example

import com.google.gwt.event.logical.shared.ResizeEvent;  
import com.google.gwt.event.logical.shared.ResizeHandler;  
import com.google.gwt.user.client.Window;
  
/* Entry point method. */ 
  
public void onModuleLoad() {  
  
// Attach 2 child widgets to LayoutPanel, laying them out horizontally
// splitting at 50%.
Widget Child_One = new HTML("LEFT SIDE");  
Widget Child_Two = new HTML("RIGHT SIDE");  
LayoutPanel p = new LayoutPanel();  
p.add(Child_One);  
p.add(Child_Two);  


p.setWidgetLeftWidth(Child_One, 0, Unit.PCT, 50, Unit.PCT);  
p.setWidgetRightWidth(Child_Two, 0, Unit.PCT, 50, Unit.PCT);  
  
// Attach the LayoutPanel to the RootLayoutPanel  
RootLayoutPanel.get().add(p);  
}

You can also try this code with Online Java Compiler

Run Code

Output

Method Summary