The FlowPanel widget represents a panel that uses the default HTML layout behavior to format its child widgets. No changes are made in the Flow Panel because the HTMP element, i.e. the HTML div, attaches itself to the children directly.
Declaration of com.google.gwt.user.client.ui.FlowPanel class −
public class FlowPanel
extends ComplexPanel
implements InsertPanel.ForIsWidget
GWT Flow panel Widget uses the different types of classes with specific purposes some of the nested classes are defined below
UIObject.DebugIdImpl, UIObject.DebugIdImplEnabled
InsertPanel.ForIsWidget
HasWidgets.ForIsWidget
GWT Flow panel Widget constructors and their descriptions are listed below
Constructor |
Description |
| VerticalPanel() | It constructor for empty Flow Panel |
| FlowPanel(java.lang.String tag) | This creates an empty flow panel with a custom tag. |
GWT Flow panel Widget methods and their descriptions are listed below
Sr.No. |
Modifier and Type |
Function name |
Description |
1 |
void |
add(Widget w) |
This method a new child widget to the panel. |
2 |
void |
clear() |
This method is used to remove all child widgets. |
3 |
void |
insert(Widget w, int beforeIndex) |
It is used to inserts a widget before the specified index. |
GWT Flow panel Widget inherits the following methods
java.lang.Object
com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.Panel
com.google.gwt.user.client.ui.ComplexPanel
java.lang.ObjectIn this example, we look for the usage of a vertical panel Widget in GWT in simple steps. Now let's have a look at the step-wise construction of the GWT Flow panel Widget.
Step 1: Firstly, we have to create a project with the name FlowPanel under a package com.codingninjas.
Step 2: Change FlowPanel.gwt.xml, FlowPanel.css, FlowPanel.html, and FlowPanel.java as explained below.
Step 3: At the end, Compile and run the application to get the output
Code of src/com.codingninjas/FlowPanel.gwt.xml file
<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'FlowPanel'>
<inherits name = 'com.google.gwt.user.User'/>
<inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
<entry-point class = 'com.codingninjas.client.FlowPanel'/>
<source path = 'client'/>
<source path = 'shared'/>
</module>
Code of Style Sheet file war/FlowPanel.css.
body {
text-align: center;
}
h1 {
font-size: 32px;
font-weight: bold;
color: #f79d00;
text-align: center;
}
button {
margin: 10px;
width: 200px;
height: 30px;
}
Code of HTML host file war/FlowPanel.html.
<html>
<head>
<title>FlowPanel</title>
<link rel="stylesheet" href="FlowPanel.css" />
<script language="javascript" src="codingninjas/FlowPanel.nocache.js" ></script>
</head>
<body>
<h1>Demonstration of FlowPanel Widget</h1>
<div id="gwtContainer"></div>
</body>
</html>
Let us have the following content of the Java file src/com.codingninjas/FlowPanel.java, which will demonstrate the use of the FlowPanel widget.
package com.codingninjas.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.RootPanel;
public class FlowPanel implements EntryPoint {
public void onModuleLoad() {
FlowPanel flowPanel = new FlowPanel();
for (int i = 1; i <= 15; i++) {
CheckBox checkBox = new CheckBox("btn" + i);
flowPanel.add(checkBox);
}
DecoratorPanel decoratorPanel = new DecoratorPanel();
decoratorPanel.setWidth("800");
decoratorPanel.add(flowPanel);
RootPanel.get().add(decoratorPanel);
}
}
Output:
GWT (Google web toolkit) is an open-source development toolkit provided by google for developing browser-based, complex Ajax applications. We can even develop Rich Internet Applications (RIA) in Java using GWT, which will then be compiled into Javascript and cross-browser compliant.
The FlowPanel widget represents a panel that uses the default HTML layout behavior to format its child widgets.
Asynchronous remote procedure calls, history management, bookmarking, UI abstraction, internationalization, and cross-browser portability.
Companies like Crimsonlogic Pte. Ltd., StudyBlue Inc., and Intrado Inc. are using GWT.
Many Google projects, both internal and external, are based on GWT, therefore, Google will need to sustain the technology as long as they need to keep improving the front-end.
In this article, we have extensively discussed how the project GWT Flow panel Widget. We have discussed its constructors, methods, and implementation. GWT Flow panel Widget is a part of form widgets that are used in many places while developing applications. and if you would like to learn more, check out our articles on
Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc.
Enroll in our courses and refer to the mock test and problems available.
Take a look at the interview experiences and interview bundle for placement preparations.
Happy Coding!
34+ registered 
536+ registered 
181+ registered 
345+ registered 34+ registered 536+ registered 