GWT - Widget d'image

introduction

le ImageLe widget affiche une image à une URL donnée. Le widget image peut être en mode «non découpé» (le mode par défaut) ou en mode «découpé». En mode découpé, une fenêtre est superposée au-dessus de l'image afin qu'un sous-ensemble de l'image soit affiché. En mode non découpé, il n'y a pas de fenêtre - l'image entière sera visible. Les méthodes fonctionneront différemment selon le mode dans lequel se trouve l'image. Ces différences sont détaillées dans la documentation de chaque méthode.

Déclaration de classe

Voici la déclaration pour com.google.gwt.user.client.ui.Image classe -

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

Règles de style CSS

La règle de style CSS par défaut suivante sera appliquée à tous les widgets Image. Vous pouvez le remplacer selon vos besoins.

.gwt-Image { }

Constructeurs de classe

N ° Sr.	Constructeur et description
1	Image() Crée une image vide.
2	protected Image(Element element) Ce constructeur peut être utilisé par des sous-classes pour utiliser explicitement un élément existant.
3	Image(java.lang.String url) Crée une image avec l'URL spécifiée.
4	Image(java.lang.String html, int left, int top, int width, int height) Crée une image découpée avec une URL et un rectangle de visibilité spécifiés.

Méthodes de classe

N ° Sr.	Nom de la fonction et description
1	void addClickListener(ClickListener listener) Ajoute une interface d'écoute pour recevoir les événements de clic.
2	void addLoadListener(LoadListener listener) Ajoute une interface d'écoute pour recevoir les événements de chargement.
3	void addMouseListener(MouseListener listener) Ajoute une interface d'écoute pour recevoir les événements de souris.
4	void addMouseWheelListener(MouseWheelListener listener) Obtient le panneau parent de ce widget.
5	int getHeight() Obtient la hauteur de l'image.
6	int getOriginLeft() Obtient la coordonnée horizontale du sommet supérieur gauche du rectangle de visibilité de l'image.
sept	int getOriginTop() Obtient la coordonnée verticale du sommet supérieur gauche du rectangle de visibilité de l'image.
8	java.lang.String getUrl() Obtient l'URL de l'image.
9	int getWidth() Obtient la largeur de l'image.
dix	void onBrowserEvent(Event event) Supprime une interface d'écoute précédemment ajoutée.
11	static void prefetch(java.lang.String url) Force le navigateur à pré-extraire l'image à une URL donnée.
12	void removeClickListener(ClickListener listener) Cette méthode est appelée immédiatement avant qu'un widget ne soit détaché du document du navigateur.
13	void removeLoadListener(LoadListener listener) Supprime une interface d'écoute précédemment ajoutée.
14	void removeMouseListener(MouseListener listener) Supprime une interface d'écoute précédemment ajoutée.
15	void removeMouseWheelListener(MouseWheelListener listener) Supprime une interface d'écoute précédemment ajoutée.
16	void setUrl(java.lang.String url) Définit l'URL de l'image à afficher.
17	void setUrlAndVisibleRect(java.lang.String url, int left, int top, int width, int height) Définit l'URL et le rectangle de visibilité de l'image en même temps.
18	void setVisibleRect(int left, int top, int width, int height) Définit le rectangle de visibilité d'une image.
19	static Image wrap(Element element) Crée un widget Image qui encapsule un élément <img> existant.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

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

Exemple de widget d'image

Cet exemple vous guidera à travers des étapes simples pour montrer l'utilisation d'un widget d'image dans GWT.

Suivez les étapes pour mettre à jour l'application GWT que nous avons créée dans GWT - Chapitre Créer une application -

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint comme expliqué dans le chapitre GWT - Créer une application .
2	Modifiez HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html et HelloWorld.java comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vérifier le résultat de la logique implémentée.

Voici le contenu du descripteur de module modifié 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>

Voici le contenu du fichier de feuille de style modifié 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;
}

Voici le contenu du fichier hôte HTML modifié 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>

Laissez-nous avoir le contenu suivant du fichier Java src/com.tutorialspoint/HelloWorld.java qui démontrera l'utilisation du widget Image.

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

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode développement comme nous l'avons fait dans le chapitre GWT - Créer une application . Si tout va bien avec votre application, cela produira le résultat suivant -

↰ Previous page