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) | 它使用自定义标签创建一个空的流面板。 |
修饰符和类型 | 方法 | 描述 |
---|---|---|
void | add(Widget w) | 它将新的子窗口小部件添加到面板。 |
void | clear() | 它删除所有子窗口小部件。 |
void | insert(Iswidget w, int beforeIndex) | 它在指定索引之前添加小部件。 |
//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示例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用法】输出:
文章图片