Package com.google.gwt.user.client.ui

Class Image

java.lang.Object
com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.Image
All Implemented Interfaces:
HasAllDragAndDropHandlers, HasAllGestureHandlers, HasAllMouseHandlers, HasAllTouchHandlers, HasClickHandlers, HasDoubleClickHandlers, HasDragEndHandlers, HasDragEnterHandlers, HasDragHandlers, HasDragLeaveHandlers, HasDragOverHandlers, HasDragStartHandlers, HasDropHandlers, HasErrorHandlers, HasGestureChangeHandlers, HasGestureEndHandlers, HasGestureStartHandlers, HasLoadHandlers, HasMouseDownHandlers, HasMouseMoveHandlers, HasMouseOutHandlers, HasMouseOverHandlers, HasMouseUpHandlers, HasMouseWheelHandlers, HasTouchCancelHandlers, HasTouchEndHandlers, HasTouchMoveHandlers, HasTouchStartHandlers, HasAttachHandlers, HasHandlers, EventListener, HasVisibility, IsWidget, SourcesClickEvents, SourcesLoadEvents, SourcesMouseEvents
public class Image extends Widget implements SourcesLoadEvents, HasLoadHandlers, HasErrorHandlers, SourcesClickEvents, HasClickHandlers, HasDoubleClickHandlers, HasAllDragAndDropHandlers, HasAllGestureHandlers, HasAllMouseHandlers, HasAllTouchHandlers, SourcesMouseEvents
A widget that displays the image at a given URL. The image can be in 'unclipped' mode (the default) or 'clipped' mode. In clipped mode, a viewport is overlaid on top of the image so that a subset of the image will be displayed. In unclipped mode, there is no viewport - the entire image will be visible. Whether an image is in clipped or unclipped mode depends on how the image is constructed, and how it is transformed after construction. Methods will operate differently depending on the mode that the image is in. These differences are detailed in the documentation for each method.

If an image transitions between clipped mode and unclipped mode, any Element-specific attributes added by the user (including style attributes, style names, and style modifiers), except for event listeners, will be lost.

CSS Style Rules

.gwt-Image
The outer element
Tranformations between clipped and unclipped state will result in a loss of any style names that were set/added; the only style names that are preserved are those that are mentioned in the static CSS style rules. Due to browser-specific HTML constructions needed to achieve the clipping effect, certain CSS attributes, such as padding and background, may not work as expected when an image is in clipped mode. These limitations can usually be easily worked around by encapsulating the image in a container widget that can itself be styled.

Example

public class ImageExample implements EntryPoint {

  private Label lbl = new Label();
  private Button btn = new Button("Clip this image");
  private Button btn2 = new Button("Restore image");

  public void onModuleLoad() {
    // Create an image, not yet referencing a URL. We make it final so that we
    // can manipulate the image object within the ClickHandlers for the buttons.
    final Image image = new Image();

    // Hook up an error handler, so that we can be informed if the image fails
    // to load.
    image.addErrorHandler(new ErrorHandler() {
      public void onError(ErrorEvent event) {
        lbl.setText("An error occurred while loading.");
      }
    });

    // Point the image at a real URL.
    image.setUrl("http://www.google.com/images/logo.gif");

    // When the user clicks this button, we want to clip the image.
    btn.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
        image.setVisibleRect(70, 0, 47, 110);
      }
    });
    btn.setWidth("120px");

    // When the user clicks this button, we want to restore the image to its
    // unclipped state.
    btn2.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
        image.setUrl("http://www.google.com/images/logo.gif");
      }
    });
    btn2.setWidth("120px");

    // Add the image, label, and clip/restore buttons to the root panel.
    VerticalPanel panel = new VerticalPanel();
    panel.add(lbl);
    panel.add(image);

    HorizontalPanel buttonPanel = new HorizontalPanel();
    buttonPanel.add(btn);
    buttonPanel.add(btn2);

    panel.add(buttonPanel);

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