GWT教程
 GWT SimplePanel组件 GWT FocusPanel组件 

GWT ScrollPanel组件

GWT ScrollPanel组件 介绍

ScrollPanel组件表示一个简单的面板封装在一个可滚动区域的内容。

GWT ScrollPanel组件 声明

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

public class ScrollPanel
   extends SimplePanel
      implements SourcesScrollEvents, HasScrollHandlers,
         RequiresResize, ProvidesResize

GWT ScrollPanel组件 构造方法

构造方法 描述
ScrollPanel() 构建一个新的 ScrollPanel。
ScrollPanel(Widget child) 使用给定的子小部件创建一个新的滚动面板。

GWT ScrollPanel组件 方法

方法 描述
HandlerRegistration addScrollHandler(ScrollHandler handler) 添加 ScrollEvent 处理程序。
void addScrollListener(ScrollListener listener) 已弃用。改用 addScrollHandler(com.google.gwt.event.dom.client.ScrollHandler)
void ensureVisible(UIObject item) 通过调整面板的滚动位置，确保指定的项目可见。
protected Element getContainerElement() 覆盖此方法以指定除根元素之外的元素作为面板子小部件的容器。
int getHorizontalScrollPosition() 获取水平滚动位置。
int getScrollPosition() 获取垂直滚动位置。
void onResize() 只要修改了实现者的大小，就必须调用此方法。
void removeScrollListener(ScrollListener listener) 已弃用。在 addScrollHandler(com.google.gwt.event.dom.client.ScrollHandler) 返回的对象上使用 HandlerRegistration.removeHandler() 方法代替
void scrollToBottom() 滚动到此面板的底部。
void scrollToLeft() 滚动到此面板的最左侧。
void scrollToRight() 滚动到此面板的最右侧。
void scrollToTop() 滚动到此面板的顶部。

GWT ScrollPanel组件 示例

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'/>

    <!-- Inherit the default GWT style sheet.                       -->
    <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

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

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>ScrollPanel 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.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.*;

/**
 * Entry point classes define <code>onModuleLoad()</code>
 */
public class HelloWorld implements EntryPoint {
    public void onModuleLoad() {
        // Create scrollable text
        HTML contents = new HTML("This is a ScrollPanel."
                +" By putting some fairly large contents in the middle"
                +" and setting its size explicitly, it becomes a scrollable area"
                +" within the page, but without requiring the use of an IFRAME."
                +" Here's quite a bit more meaningless text that will serve primarily"
                +" to make this thing scroll off the bottom of its visible area."
                +" Otherwise, you might have to make it really, really"
                +" small in order to see the nifty scroll bars!");

        //create scrollpanel with content
        ScrollPanel scrollPanel = new ScrollPanel(contents);
        scrollPanel.setSize("400px", "100px");

        DecoratorPanel decoratorPanel = new DecoratorPanel();

        decoratorPanel.add(scrollPanel);

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

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

 GWT SimplePanel组件 GWT FocusPanel组件 

热门文章

优秀文章

全部教程