GWT: widget de imagen

Introducción

los ImageEl widget muestra una imagen en una URL determinada. El widget de imagen puede estar en modo 'sin recortar' (el modo predeterminado) o en modo 'recortado'. En el modo recortado, se superpone una ventana gráfica sobre la imagen para que se muestre un subconjunto de la imagen. En el modo sin recortar, no hay ventana gráfica; la imagen completa será visible. Los métodos funcionarán de manera diferente dependiendo del modo en que se encuentre la imagen. Estas diferencias se detallan en la documentación de cada método.

Declaración de clase

A continuación se muestra la declaración de com.google.gwt.user.client.ui.Image clase -

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

Reglas de estilo CSS

La siguiente regla de estilo CSS predeterminada se aplicará a todo el widget de imagen. Puede anularlo según sus requisitos.

.gwt-Image { }

Constructores de clases

No Señor.	Constructor y descripción
1	Image() Crea una imagen vacía.
2	protected Image(Element element) Este constructor puede ser usado por subclases para usar explícitamente un elemento existente.
3	Image(java.lang.String url) Crea una imagen con la URL especificada.
4	Image(java.lang.String html, int left, int top, int width, int height) Crea una imagen recortada con una URL especificada y un rectángulo de visibilidad.

Métodos de clase

No Señor.	Nombre y descripción de la función
1	void addClickListener(ClickListener listener) Agrega una interfaz de escucha para recibir eventos de clic.
2	void addLoadListener(LoadListener listener) Agrega una interfaz de escucha para recibir eventos de carga.
3	void addMouseListener(MouseListener listener) Agrega una interfaz de escucha para recibir eventos del mouse.
4	void addMouseWheelListener(MouseWheelListener listener) Obtiene el panel principal de este widget.
5	int getHeight() Obtiene la altura de la imagen.
6	int getOriginLeft() Obtiene la coordenada horizontal del vértice superior izquierdo del rectángulo de visibilidad de la imagen.
7	int getOriginTop() Obtiene la coordenada vertical del vértice superior izquierdo del rectángulo de visibilidad de la imagen.
8	java.lang.String getUrl() Obtiene la URL de la imagen.
9	int getWidth() Obtiene el ancho de la imagen.
10	void onBrowserEvent(Event event) Elimina una interfaz de escucha agregada anteriormente.
11	static void prefetch(java.lang.String url) Hace que el navegador precargue la imagen en una URL determinada.
12	void removeClickListener(ClickListener listener) Este método se llama inmediatamente antes de que un widget se separe del documento del navegador.
13	void removeLoadListener(LoadListener listener) Elimina una interfaz de escucha agregada anteriormente.
14	void removeMouseListener(MouseListener listener) Elimina una interfaz de escucha agregada anteriormente.
15	void removeMouseWheelListener(MouseWheelListener listener) Elimina una interfaz de escucha agregada anteriormente.
dieciséis	void setUrl(java.lang.String url) Establece la URL de la imagen que se mostrará.
17	void setUrlAndVisibleRect(java.lang.String url, int left, int top, int width, int height) Establece la URL y el rectángulo de visibilidad de la imagen al mismo tiempo.
18	void setVisibleRect(int left, int top, int width, int height) Establece el rectángulo de visibilidad de una imagen.
19	static Image wrap(Element element) Crea un widget de imagen que envuelve un elemento <img> existente.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
java.lang.Object

Ejemplo de widget de imagen

Este ejemplo lo llevará a través de sencillos pasos para mostrar el uso de un widget de imagen en GWT.

Siguiendo los pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo Crear aplicación -

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación .
2	Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado src/com.tutorialspoint/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.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

A continuación se muestra el contenido del archivo de hoja de estilo modificado 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;
}

A continuación se muestra el contenido del archivo de host HTML modificado 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>

Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java que demostrará el uso del widget de imagen.

package com.tutorialspoint.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.tutorialspoint.com/images/gwt-mini.png");

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

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

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo de desarrollo como hicimos en el capítulo GWT - Crear aplicación . Si todo está bien con su aplicación, esto producirá el siguiente resultado:

↰ Previous page