GWT - Widget immagine

introduzione

Il Imagewidget mostra un'immagine a un dato URL. Il widget immagine può essere in modalità "non ritagliata" (la modalità predefinita) o "ritagliata". Nella modalità ritagliata, una finestra viene sovrapposta all'immagine in modo che venga visualizzato un sottoinsieme dell'immagine. In modalità non ritagliata, non è presente alcun riquadro di visualizzazione: l'intera immagine sarà visibile. I metodi funzioneranno in modo diverso a seconda della modalità in cui si trova l'immagine. Queste differenze sono descritte in dettaglio nella documentazione di ciascun metodo.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per com.google.gwt.user.client.ui.Image classe -

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

Regole di stile CSS

La seguente regola di stile CSS predefinita verrà applicata a tutto il widget Immagine. Puoi sovrascriverlo secondo le tue esigenze.

.gwt-Image { }

Costruttori di classi

Sr.No.	Costruttore e descrizione
1	Image() Crea un'immagine vuota.
2	protected Image(Element element) Questo costruttore può essere utilizzato dalle sottoclassi per utilizzare esplicitamente un elemento esistente.
3	Image(java.lang.String url) Crea un'immagine con l'URL specificato.
4	Image(java.lang.String html, int left, int top, int width, int height) Crea un'immagine ritagliata con un URL specificato e un rettangolo di visibilità.

Metodi di classe

Sr.No.	Nome e descrizione della funzione
1	void addClickListener(ClickListener listener) Aggiunge un'interfaccia di ascolto per ricevere eventi di clic.
2	void addLoadListener(LoadListener listener) Aggiunge un'interfaccia listener per ricevere eventi di caricamento.
3	void addMouseListener(MouseListener listener) Aggiunge un'interfaccia listener per ricevere gli eventi del mouse.
4	void addMouseWheelListener(MouseWheelListener listener) Ottiene il pannello principale di questo widget.
5	int getHeight() Ottiene l'altezza dell'immagine.
6	int getOriginLeft() Ottiene la coordinata orizzontale del vertice superiore sinistro del rettangolo di visibilità dell'immagine.
7	int getOriginTop() Ottiene la coordinata verticale del vertice superiore sinistro del rettangolo di visibilità dell'immagine.
8	java.lang.String getUrl() Ottiene l'URL dell'immagine.
9	int getWidth() Ottiene la larghezza dell'immagine.
10	void onBrowserEvent(Event event) Rimuove un'interfaccia listener aggiunta in precedenza.
11	static void prefetch(java.lang.String url) Fa in modo che il browser preleva l'immagine a un determinato URL.
12	void removeClickListener(ClickListener listener) Questo metodo viene chiamato immediatamente prima che un widget venga scollegato dal documento del browser.
13	void removeLoadListener(LoadListener listener) Rimuove un'interfaccia listener aggiunta in precedenza.
14	void removeMouseListener(MouseListener listener) Rimuove un'interfaccia listener aggiunta in precedenza.
15	void removeMouseWheelListener(MouseWheelListener listener) Rimuove un'interfaccia listener aggiunta in precedenza.
16	void setUrl(java.lang.String url) Imposta l'URL dell'immagine da visualizzare.
17	void setUrlAndVisibleRect(java.lang.String url, int left, int top, int width, int height) Imposta contemporaneamente l'URL e il rettangolo di visibilità per l'immagine.
18	void setVisibleRect(int left, int top, int width, int height) Imposta il rettangolo di visibilità di un'immagine.
19	static Image wrap(Element element) Crea un widget Immagine che racchiude un elemento <img> esistente.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

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

Esempio di widget immagine

Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un widget immagine in GWT.

Seguendo i passaggi per aggiornare l'applicazione GWT che abbiamo creato in GWT - Capitolo Crea applicazione -

Passo	Descrizione
1	Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint come spiegato nel capitolo GWT - Crea applicazione .
2	Modifica HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java come spiegato di seguito. Mantieni invariato il resto dei file.
3	Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata.

Di seguito è riportato il contenuto del descrittore del modulo modificato 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>

Di seguito è riportato il contenuto del file del foglio di stile modificato 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;
}

Di seguito è riportato il contenuto del file host HTML modificato 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>

Cerchiamo di avere il seguente contenuto del file Java src/com.tutorialspoint/HelloWorld.java che dimostrerà l'uso del widget Immagine.

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 volta che sei pronto con tutte le modifiche fatte, compiliamo ed eseguiamo l'applicazione in modalità sviluppo come abbiamo fatto nel capitolo GWT - Crea applicazione . Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato:

↰ Previous page