GWT - Widget de imagem

Introdução

o Imagewidget exibe uma imagem em um determinado URL. O widget de imagem pode estar no modo 'não cortado' (o modo padrão) ou no modo 'cortado'. No modo recortado, uma janela de visualização é sobreposta na parte superior da imagem para que um subconjunto da imagem seja exibido. No modo não cortado, não há janela de visualização - a imagem inteira estará visível. Os métodos funcionarão de maneira diferente dependendo do modo em que a imagem se encontra. Essas diferenças são detalhadas na documentação de cada método.

Declaração de Classe

A seguir está a declaração para com.google.gwt.user.client.ui.Image classe -

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

Regras de estilo CSS

A seguinte regra de estilo CSS padrão será aplicada a todos os widgets de imagem. Você pode substituí-lo de acordo com seus requisitos.

.gwt-Image { }

Construtores de classe

Sr. Não.	Construtor e descrição
1	Image() Cria uma imagem vazia.
2	protected Image(Element element) Este construtor pode ser usado por subclasses para usar explicitamente um elemento existente.
3	Image(java.lang.String url) Cria uma imagem com o url especificado.
4	Image(java.lang.String html, int left, int top, int width, int height) Cria uma imagem recortada com um URL especificado e um retângulo de visibilidade.

Métodos de aula

Sr. Não.	Nome e descrição da função
1	void addClickListener(ClickListener listener) Adiciona uma interface de ouvinte para receber eventos de clique.
2	void addLoadListener(LoadListener listener) Adiciona uma interface de ouvinte para receber eventos de carregamento.
3	void addMouseListener(MouseListener listener) Adiciona uma interface de ouvinte para receber eventos de mouse.
4	void addMouseWheelListener(MouseWheelListener listener) Obtém o painel pai deste widget.
5	int getHeight() Obtém a altura da imagem.
6	int getOriginLeft() Obtém a coordenada horizontal do vértice superior esquerdo do retângulo de visibilidade da imagem.
7	int getOriginTop() Obtém a coordenada vertical do vértice superior esquerdo do retângulo de visibilidade da imagem.
8	java.lang.String getUrl() Obtém o URL da imagem.
9	int getWidth() Obtém a largura da imagem.
10	void onBrowserEvent(Event event) Remove uma interface de ouvinte adicionada anteriormente.
11	static void prefetch(java.lang.String url) Faz com que o navegador busque previamente a imagem em um determinado URL.
12	void removeClickListener(ClickListener listener) Este método é chamado imediatamente antes de um widget ser desanexado do documento do navegador.
13	void removeLoadListener(LoadListener listener) Remove uma interface de ouvinte adicionada anteriormente.
14	void removeMouseListener(MouseListener listener) Remove uma interface de ouvinte adicionada anteriormente.
15	void removeMouseWheelListener(MouseWheelListener listener) Remove uma interface de ouvinte adicionada anteriormente.
16	void setUrl(java.lang.String url) Define o URL da imagem a ser exibida.
17	void setUrlAndVisibleRect(java.lang.String url, int left, int top, int width, int height) Define o url e o retângulo de visibilidade da imagem ao mesmo tempo.
18	void setVisibleRect(int left, int top, int width, int height) Define o retângulo de visibilidade de uma imagem.
19	static Image wrap(Element element) Cria um widget de imagem que envolve um elemento <img> existente.

Métodos herdados

Esta classe herda métodos das seguintes classes -

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

Exemplo de widget de imagem

Este exemplo o levará por etapas simples para mostrar o uso de um widget de imagem no GWT.

Seguindo as etapas para atualizar o aplicativo GWT que criamos no capítulo GWT - Criar aplicativo

Degrau	Descrição
1	Crie um projeto com o nome HelloWorld em um pacote com.tutorialspoint conforme explicado no capítulo GWT - Criar aplicativo .
2	Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
3	Compile e execute o aplicativo para verificar o resultado da lógica implementada.

A seguir está o conteúdo do descritor do 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 seguir está o conteúdo do arquivo de folha 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 seguir está o conteúdo do arquivo 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>

Vamos ter o seguinte conteúdo do arquivo Java src/com.tutorialspoint/HelloWorld.java que demonstrará o uso do widget de imagem.

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

Quando você estiver pronto com todas as alterações feitas, vamos compilar e rodar a aplicação em modo de desenvolvimento como fizemos no capítulo GWT - Criar Aplicação . Se tudo estiver bem com sua aplicação, isso produzirá o seguinte resultado -

↰ Previous page