GWT Image组件

GWT Image组件介绍

Image小部件显示在给定的图像URL.The插件可以是“unclipped”“clipped”模式（缺省模式）或模式的图像。在剪辑模式下，视口覆盖在图像的顶部，以便显示图像的子集。在未剪辑模式下，没有视口 - 整个图像都是可见的。方法将根据图像所处的模式而不同。这些差异在每种方法的文档中都有详细说明。

GWT Image组件声明

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

public class Image
   extends Widget
      implements SourcesLoadEvents, HasLoadHandlers, 
         HasErrorHandlers, SourcesClickEvents, 
            HasClickHandlers, HasAllMouseHandlers, 
               SourcesMouseEvents

CSS 样式规则

以下默认 CSS 样式规则将应用于所有Image小部件。您可以根据您的要求覆盖它。

.gwt-Image { }

GWT Image组件构造方法

构造方法	描述
Image()	创建一个空图像。
protected Image(Element element)	子类可以使用此构造函数来显式使用现有元素。
Image(java.lang.String url)	创建具有指定 url 的图像。
Image(java.lang.String html, int left, int top, int width, int height)	创建具有指定 URL 和可见性矩形的剪切图像。

GWT Image组件方法

方法	描述
void addClickListener(ClickListener listener)	添加监听器接口以接收点击事件。
void addLoadListener(LoadListener listener)	添加侦听器接口以接收加载事件。
void addMouseListener(MouseListener listener)	添加一个监听器接口来接收鼠标事件。
void addMouseWheelListener(MouseWheelListener listener)	获取此小部件的父面板。
int getHeight()	获取图像的高度。
int getOriginLeft()	获取图像可见性矩形左上角顶点的水平坐标。
int getOriginTop()	获取图像可见性矩形左上角顶点的垂直坐标。
java.lang.String getUrl()	获取图像的 URL。
int getWidth()	获取图像的宽度。
void onBrowserEvent(Event event)	删除以前添加的侦听器接口。
static void prefetch(java.lang.String url)	使浏览器在给定的 URL 处预取图像。
void removeClickListener(ClickListener listener)	在小部件从浏览器的文档分离之前立即调用此方法。
void removeLoadListener(LoadListener listener)	删除以前添加的侦听器接口。
void removeMouseListener(MouseListener listener)	删除以前添加的侦听器接口。
void removeMouseWheelListener(MouseWheelListener listener)	删除以前添加的侦听器接口。
void setUrl(java.lang.String url)	设置要显示的图像的 URL。
void setUrlAndVisibleRect(java.lang.String url, int left, int top, int width, int height)	同时设置图像的 url 和可见性矩形。
void setVisibleRect(int left, int top, int width, int height)	设置图像的可见性矩形。
static Image wrap(Element element)	创建一个包装现有 <img> 元素的图像小部件。

GWT Image组件示例

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

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>Image 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.Window;
import com.google.gwt.user.client.ui.*;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.DOM;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.ClickEvent;

/**
 * Entry point classes define <code>onModuleLoad()</code>
 */
public class HelloWorld implements EntryPoint {
    public void onModuleLoad() {
        // Create a Image widget
        Image image = new Image();

        //set image source
        image.setUrl("http://www.yiidian.com/statics/images/logo.png");

        // Add image to the root panel.
        VerticalPanel panel = new VerticalPanel();
        panel.add(image);

        RootPanel.get("gwtContainer").add(panel);
    }
}

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

GWT HTML组件 GWT Anchor组件

GWT Image组件

GWT Image组件 介绍

GWT Image组件 声明