Do you think IIT Guwahati certified course can help you in your career?
Introduction
While browsing the internet, did you grow tired of seeing so many layouts? So let's use the GWT DocklLayoutPannel to design one and learn how to do it!
This article will discuss GWT DockLayoutPanel in creating the user interface.
DockLayoutPanel can be used to make dialogboxes; it can be used in UiBinder Templates lay out their children in elements tagged with the cardinal directions and centre, and also it can be used to adds a widget to the specified edge of the dock.
In the next section, we will understand the GWT DockLayoutPanel, But before we jump onto the GWT DockLayoutPanel, it's essential to understand the DockPannel.
In the next section, we’ll discuss the GWT DockLayoutPanel.
GWT DockLayoutPanel
To understand GWT DockLayoutPanel efficiently, we first need to understand what it is DockPanel? So, A panel that organizes its child widgets in a "docked" pattern around the edges and leaves the middle empty for its last widget. This widget has limitations in standards mode that did not exist in quirks mode. A DockPanel does not support percentage sizing for its child Widgets. When a child widget's height is set to 100%, the child will not fill the available height.
To overcome these limitations, we use DockLayout; however, remember that it is not a direct replacement for this class. A panel that docks its child elements to a specific place is called DockLayoutPanel. Left, Top, Right, and Bottom are all possible dock positions.
And in GWT DockLayoutPanel, all its child widgets lie at the corner or edges. The last widget takes up the center space. This widget only functions in standards mode, which requires an explicit <!DOCTYPE> declaration on the HTML page on which it is run.
Class Declaration
Check out the declaration of com.google.gwt.user.client.ui.DockLayoutPanel.
Public class deckPanel
extend ComplexPanel
implements HashAnimation, InsertPanel.ForIsWidget
Nested Class
In this section, we will see two of the important nested classes and their descriptions used in GWT DockLayoutPanel.
Class Constructors
This section will discuss class constructors and their descriptions used in GWT DockLayoutPanel.
Class Methods
In this section, we will see some methods' names and functions used in GWT DockLayoutPanel.
GWT DockLayoutPanel Examples
Understanding the blog without seeing real-world instances would have been challenging. The two examples will help you understand how GWT DockLayoutPanel is created.
EXAMPLE 1
import com.google.gwt.event.logical.shared.ResizeEvent;
import com.google.gwt.event.logical.shared.ResizeHandler;
import com.google.gwt.user.client.Window;
/*This is the way of entry. */
public void onModuleLoad() {
//Five widgets should be attached, one in each direction, to a DockLayoutPanel. Unitize them and arrange them.
DockLayoutPanel p = new DockLayoutPanel(Unit.EM);
p.addNorth(new HTML("north"), 8);
p.addSouth(new HTML("south"), 8);
p.addEast(new HTML("east"),8);
p.addWest(new HTML("west"), 8);
p.add(new HTML("center"));
// The DockLayoutPanel should be attached to the RootLayoutPanel.
RootLayoutPanel rp = RootLayoutPanel.get(); rp.add(p);
}
body {
text-align: center;
font-family: verdana, sans-serif;
}
h1 {
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}
.dockpanel td {
border: 1px solid #BBBBBB;
padding: 3px;
}
Output
EXAMPLE 2
import com.google.gwt.core.client.EntryPoint;
import com.gwtext.client.core.Margins;
import com.gwtext.client.core.RegionPosition;
import com.gwtext.client.widgets.Panel;
import com.gwtext.client.widgets.Viewport;
import com.gwtext.client.widgets.layout.BorderLayout;
import com.gwtext.client.widgets.layout.BorderLayoutData;
import com.gwtext.client.widgets.layout.FitLayout;
public class Test implements EntryPoint {
public void onModuleLoad() {
Panel panel = new Panel();
panel.setBorder(false);
panel.setPaddings(15);
panel.setLayout(new FitLayout());
Panel borderPanel = new Panel();
borderPanel.setLayout(new BorderLayout());
//Now add north panel
Panel northPanel = new Panel();
northPanel.setHtml("<p>north panel</p>");
northPanel.setHeight(32);
northPanel.setBodyStyle("background-color:#FFFF33");
borderPanel.add(northPanel, new BorderLayoutData(RegionPosition.NORTH));
//adding of south panel
Panel southPanel = new Panel();
southPanel.setHtml("<p>south panel</p>");
southPanel.setHeight(100);
southPanel.setBodyStyle("background-color:#D2FF4D");
southPanel.setCollapsible(true);
southPanel.setTitle("South");
BorderLayoutData southData = new BorderLayoutData(RegionPosition.SOUTH);
southData.setMinSize(100);
southData.setMaxSize(200);
southData.setMargins(new Margins(0, 0, 0, 0));
southData.setSplit(true);
borderPanel.add(southPanel, southData);
//similarly add east panel
Panel eastPanel = new Panel();
eastPanel.setHtml("<p>east panel</p>");
eastPanel.setTitle("East Side");
eastPanel.setCollapsible(true);
eastPanel.setWidth(225);
BorderLayoutData eastData = new BorderLayoutData(RegionPosition.EAST);
eastData.setSplit(true);
eastData.setMinSize(175);
eastData.setMaxSize(400);
eastData.setMargins(new Margins(0, 0, 5, 0));
borderPanel.add(eastPanel, eastData);
//Now we add west panel
Panel westPanel = new Panel();
westPanel.setHtml("<p>west panel</p>");
westPanel.setTitle("West");
westPanel.setBodyStyle("background-color:#FFE6E6");
westPanel.setCollapsible(true);
westPanel.setWidth(200);
BorderLayoutData westData = new BorderLayoutData(RegionPosition.WEST);
westData.setSplit(true);
westData.setMinSize(175);
westData.setMaxSize(400);
westData.setMargins(new Margins(0, 5, 0, 0));
borderPanel.add(westPanel, westData);
Panel centerPanel = new Panel();
centerPanel.setHtml("<p>center panel</p>");
centerPanel.setBodyStyle("background-color:#8585AD");
borderPanel.add(centerPanel, new BorderLayoutData(RegionPosition.CENTER));
panel.add(borderPanel);
Viewport viewport = new Viewport(panel);
}
}
Output
This concludes the blog; I hope you've enjoyed it, will successfully develop your first GWT, and will let me know in the comments below. Now let's discuss some frequently asked questions related to the topic.
Frequently Asked Questions
What is the GWT's purpose?
A GWT development toolkit is used to create and improve complex browser-based apps. Its objective is to make it possible to construct high-performance web apps productively without the developer having to be an expert in JavaScript, XMLHttpRequest, or browser quirks.
What characteristics does GWT have?
A development toolkit for building RICH Internet Applications is called Google Web Toolkit (GWT). Developers have the opportunity to create client-side Java applications using GWT. GWT applications are cross-browser compatible. For each browser, GWT generates javascript code automatically.
What does GWT's DeckPanel do?
It is a panel that displays all child widgets in a 'deck', where only one widget can be seen at a time.
What class is the superclass of all user interface widgets?
com.google.gwt.user.client.ui.UIObject is the superclass of all user interface widgets.
What does a module descriptor mean in GWT Application?
A module descriptor configuration file is used to set up GWT applications.
We have come so far, and it's time to close the discussion.
Let us now move to the conclusion part of this article.
Conclusion
In this article, we've extensively discussed the GWT DockLayoutPanel and some constructors which can be used in GWT DockLayoutPanel. We have seen a class declaration in GWT DockLayoutPanel, ending with two examples for a better understanding creation of GWT DockLayoutPanel. In the end, some frequently asked questions related to the topic.
19+ registered 
