Image
介绍 (Introduction)
“ Image窗口小部件显示给定URL处的图像。图像窗口小部件可以处于“未剪切”模式（默认模式）或“剪切”模式。 在剪切模式下，视口覆盖在图像顶部，以便显示图像的子集。 在未剪辑模式下，没有视口 - 整个图像将可见。 根据图像所处的模式，方法的运行方式会有所不同。这些差异在每种方法的文档中都有详细说明。
Class 声明 (Class Declaration)
以下是com.google.gwt.user.client.ui.Image类的声明 -
public class Image
extends Widget
implements SourcesLoadEvents, HasLoadHandlers,
HasErrorHandlers, SourcesClickEvents,
HasClickHandlers, HasAllMouseHandlers,
SourcesMouseEvents
CSS样式规则 (CSS Style Rules)
以下默认CSS样式规则将应用于所有Image小部件。 您可以根据自己的要求覆盖它。
.gwt-Image { }
类构造函数 (Class Constructors)
| Sr.No. | 构造函数和描述 |
|---|---|
| 1 | Image() 创建一个空图像。 |
| 2 | protected Image(Element element) 子类可以使用此构造函数来显式使用现有元素。 |
| 3 | Image(java.lang.String url) 使用指定的URL创建图像。 |
| 4 | Image(java.lang.String html, int left, int top, int width, int height) 使用指定的URL和可见性矩形创建剪切图像。 |
Class Methods
| Sr.No. | 功能名称和描述 |
|---|---|
| 1 | void addClickListener(ClickListener listener) 添加侦听器接口以接收单击事件。 |
| 2 | void addLoadListener(LoadListener listener) 添加侦听器接口以接收加载事件。 |
| 3 | void addMouseListener(MouseListener listener) 添加侦听器接口以接收鼠标事件。 |
| 4 | void addMouseWheelListener(MouseWheelListener listener) 获取此小部件的父面板。 |
| 5 | int getHeight() 获取图像的高度。 |
| 6 | int getOriginLeft() 获取图像可见性矩形的左上顶点的水平坐标。 |
| 7 | int getOriginTop() 获取图像可见性矩形的左上顶点的垂直坐标。 |
| 8 | java.lang.String getUrl() 获取图像的URL。 |
| 9 | int getWidth() 获取图像的宽度。 |
| 10 | void onBrowserEvent(Event event) 删除以前添加的侦听器界面。 |
| 11 | static void prefetch(java.lang.String url) 使浏览器预先获取给定URL的图像。 |
| 12 | void removeClickListener(ClickListener listener) 在将窗口小部件与浏览器的文档分离之前立即调用此方法。 |
| 13 | void removeLoadListener(LoadListener listener) 删除以前添加的侦听器界面。 |
| 14 | void removeMouseListener(MouseListener listener) 删除以前添加的侦听器界面。 |
| 15 | void removeMouseWheelListener(MouseWheelListener listener) 删除以前添加的侦听器界面。 |
| 16 | void setUrl(java.lang.String url) 设置要显示的图像的URL。 |
| 17 | void setUrlAndVisibleRect(java.lang.String url, int left, int top, int width, int height) 同时设置图像的URL和可见性矩形。 |
| 18 | void setVisibleRect(int left, int top, int width, int height) 设置图像的可见性矩形。 |
| 19 | static Image wrap(Element element) 创建一个包装现有 |
方法继承 (Methods Inherited)
该类继承以下类中的方法 -
com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
java.lang.Object
图像小部件示例
此示例将指导您完成在GWT中显示Image Widget的使用的简单步骤。
以下步骤更新我们在GWT - Create Application的GWT应用程序GWT - Create Application章节 -
| 步 | 描述 |
|---|---|
| 1 | 在com.iowiki包下创建一个名为HelloWorld的项目，如GWT - Create Application一章中所述。 |
| 2 | 修改HelloWorld.gwt.xml ， HelloWorld.css ， HelloWorld.html和HelloWorld.java ，如下所述。 保持其余文件不变。 |
| 3 | 编译并运行应用程序以验证实现的逻辑的结果。 |
以下是修改后的模块描述符src/com.iowiki/HelloWorld.gwt.xml 。
<?xml version = "1.0" encoding = "UTF-8"?>
<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.iowiki.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path = 'client'/>
<source path = 'shared'/>
</module>
以下是修改后的样式表文件war/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;
}
以下是修改后的HTML主机文件war/HelloWorld.html 。
<html>
<head>
<title>Hello World</title>
<link rel = "stylesheet" href = "HelloWorld.css"/>
<script language = "javascript" src = "helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<h1>Image Widget Demonstration</h1>
<div id = "gwtContainer"></div>
</body>
</html>
让我们有以下Java文件src/com.iowiki/HelloWorld.java ，它将演示Image小部件的使用。
package com.iowiki.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
// Create a Image widget
Image image = new Image();
//set image source
image.setUrl("http://www.iowiki.com/images/gwt-mini.png");
// Add image to the root panel.
VerticalPanel panel = new VerticalPanel();
panel.add(image);
RootPanel.get("gwtContainer").add(panel);
}
}
一旦准备好完成所有更改，让我们像在GWT - 创建应用程序章节中那样在开发模式下编译和运行应用程序 。 如果您的应用程序一切正常，这将产生以下结果 -
