GWT教程
 GWT Panel类 GWT HorizontalPanel组件 

GWT FlowPanel组件

GWT FlowPanel组件 介绍

FlowPanel组件代表使用默认的HTML布局行为格式化它的子控件的面板。

GWT FlowPanel组件 声明

以下是com.google.gwt.user.client.ui.FlowPanel类的声明

public class FlowPanel
   extends ComplexPanel
      implements InsertPanel.ForIsWidget

GWT FlowPanel组件 构造方法

构造方法 描述
FlowPanel() 构建一个新的 FlowPanel。

GWT FlowPanel组件 方法

方法 描述
void add(Widget w) 向面板添加一个新的子小部件。
void clear() 删除所有子小部件。
void insert(IsWidget w, int beforeIndex) 在指定的索引之前插入一个小部件。
void insert(Widget w, int beforeIndex) 在指定的索引之前插入一个小部件。

GWT FlowPanel组件 示例

1）修改HelloWorld.gwt.xml

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.0//EN"
        "http://gwtproject.org/doctype/2.8.0/gwt-module.dtd">
<module rename-to="HelloWorld">

    <!-- Inherit the core Web Toolkit stuff.                  -->
    <inherits name='com.google.gwt.user.User'/>

    <!-- Specify the app entry point class.                   -->
    <entry-point class='com.yiidian.helloWorld.client.HelloWorld'/>


    <!-- Specify the app servlets.                   -->
    <servlet path='/HelloWorldService' class='com.yiidian.helloWorld.server.HelloWorldServiceImpl'/>

    <source path = 'client'/>
    <source path = 'shared'/>
</module>

2）修改HelloWorld.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-CheckBox {
    margin: 10px;
}

3）修改HelloWorld.html

<html>
<head>
    <title>yiidian.com-GWT Hello World</title>
    <link type="text/css" rel="stylesheet" href="HelloWorld.css">
    <script type="text/javascript" language="javascript" src="HelloWorld/HelloWorld.nocache.js"></script>
</head>
<body>
<h1>FlowPanel Widget Demonstration</h1>
<div id = "gwtContainer"></div>
</body>
</html>

4）HelloWorld.java

package com.yiidian.helloWorld.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;

/**
 * Entry point classes define <code>onModuleLoad()</code>
 */
public class HelloWorld implements EntryPoint {
    public void onModuleLoad() {
        // Create a flow panel
        FlowPanel flowPanel = new FlowPanel();

        // Add CheckBoxes to flow Panel
        for(int i = 1;  i <= 10; i++){
            CheckBox checkBox = new CheckBox("Item" + i);
            flowPanel.add(checkBox);
        }

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

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

运行应用程序，显示结果如下：

 GWT Panel类 GWT HorizontalPanel组件 

热门文章

优秀文章

全部教程