GWT FlowPanel用法

GWT FlowPanel是最简单的面板, 因为它使用默认的HTML布局更改子窗口小部件的格式。在Flow Panel中, 由于HTMP元素未做任何修改, 即HTML div直接将其自身附加到子元素。
GWT FlowPanel类声明
让我们看看com.google.gwt.user.client.ui.FlowPanel的声明

public class FlowPanel extends ComplexPanel

GWTFlowTable构造函数
followig表包含GWT FlowPanel的构造函数。
构造函数 描述
FlowPanel() 它是空FlowTable的构造函数。
FlowPanel(java.lang.String tag) 它使用自定义标签创建一个空的流面板。
GWT FlowPanel方法
修饰符和类型 方法 描述
void add(Widget w) 它将新的子窗口小部件添加到面板。
void clear() 它删除所有子窗口小部件。
void insert(Iswidget w, int beforeIndex) 它在指定索引之前添加小部件。
GWT FlowPanel示例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); } }

输出:
GWT FlowPanel用法

文章图片
GWT FlowPanel示例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; }

【GWT FlowPanel用法】输出:
GWT FlowPanel用法

文章图片

    推荐阅读