GWT FlowPanel

GWT FlowPanel is a simplest panel as it changes the format of child widgets using default HTML layout. In Flow Panel, no modification is done as HTMP element i.e. HTML div attaches itself to children directly.

GWT FlowPanel class declaration

Let's see the declaration for com.google.gwt.user.client.ui.FlowPanel

GWTFlowTable Constructors

The followig table contains constructors for the GWT FlowPanel.

Constructors	Description
FlowPanel()	It is a constructor for empty FlowTable.
FlowPanel(java.lang.String tag)	It creates an empty flow panel with a custom tag.

GWT FlowPanel methods

Modifier and Types	Method	Description
void	add(Widget w)	It adds a new child widget to the panel.
void	clear()	It removes all child widgets.
void	insert(Iswidget w, int beforeIndex)	It adds a widget before a specified index.

GWT FlowPanel Example 1

//SampleFlowPanel1.java

import com.google.gwt.event.dom.client.ClickEvent; 
import com.google.gwt.event.dom.client.ClickHandler; 
import com.google.gwt.user.client.ui.FlexTable; 
import com.google.gwt.user.client.ui.Label; 
import com.google.gwt.user.client.ui.RootPanel; 

public void onModuleLoad() {

// This is the entry point method. 
public void onModuleLoad() {
 FlowPanel flowPanel = new FlowPanel();
 // Add buttons to flow Panel \
for(int i = 1; i <= 5; i++){
 Button btn = new Button("Button " + i); flowPanel.add(btn); 
}
 // Add the Flow Panel to the root panel. RootPanel.get().add(flowPanel);
	}
 }

Output:

GWT FlowPanel Example 2

//SampleFlowPanel2.java

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 HelloWorld implements EntryPoint {

   public void onModuleLoad() {
      // Create a flow panel			
      FlowPanel flowPanel = new FlowPanel();

      // Add Button to flow Panel
      for(int i = 1;  i <= 17; i++){
         Button button = new Button("Item" + i);
         flowPanel.add(Button);
      }

      DecoratorPanel decoratorPanel = new DecoratorPanel();
      decoratorPanel.setWidth("500");
      decoratorPanel.add(flowPanel);

      // Add the widgets to the root panel.
      RootPanel.get().add(decoratorPanel);
   }
}

//SampleFlowPanel2.css

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;
}

.gwt-Button {
   margin: 10px;	
}

Output: