GWT Image Widget - Naukri Code 360

Introduction

In this article, we will study Image Widget in Google Web Toolkit in detail with its constructors and methods.

Image Widget

The Image widget shows an image from the specified URL. The default setting for the image widget is "unclipped," however it can also be used in "clipped" mode.

In clipped mode, a viewport is superimposed on top of the image only to display a portion of it.
In unclipped mode, there is no viewport; the entire image is seen.

Depending on the mode that the image is in, different methods will behave differently. The documentation for each technique goes into great depth about these variations.

Class Declaration

Let us learn about the for com.google.gwt.user.client.ui.Image class:

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

You can also try this code with Online Java Compiler

Run Code

CSS Style Rules

All Image widgets will have the default CSS Style rule in place. In accordance with your needs, you can override it.

.gwt-Image { }

Class Constructors

Let us see the constructors of the GWT Image Widget:

S.No.	Constructors	Description
1.	Image()	It helps in the creation of an empty image.
2.	protected Image(Element testElement)	It is a constructor that can be used by subclasses to use an existing element explicitly.
3.	Image(java.lang.String url)	It is used for the creation of an image with the URL that has been specified.
4.	Image(java.lang.String codeHTML, int left, int top, int width, int height)	It is used to create a clipped image that has a visibility rectangle and a URL that has been specified.

After the constructors, lets move on to class methods.

Class Methods

Let us see the methods of the GWT Image Widget:

S.No.	Function	Descriptions
1.	void addClickListner(ClickListener testlistener)	It is used to add a listener interface to receive events related to clicking.
2.	void addLoadListener(LoadListener testlistener)	It is used to add a listener interface to receive events related to loading.
3.	void addMouseListener(MouseListener testlistener)	It is used to add a listener interface to receive events related to the mouse.
4.	void addMouseWheelListener(MouseWheelListener testlistener)	It is used to get the parent panel of this widget.
5.	int getHeight()	It is used to get the height of that image.
6.	int getOriginLeft()	It is used to get the horizontal coordinate of the vertex(upper-left) of the visibility rectangle of the image.
7.	int getOriginTop()	It is used to get the vertical coordinate of the vertex(upper-left) of the visibility rectangle of the image.
8.	java.lang.String getUrl()	It is used to get the image’s url.
9.	getWidth()	It is used to get the image’s width.
10.	void onBrowserEvent(Event testEvent)	It is used to remove a listener interface that was previously added.
11.	static void prefetch(java.lang.String testurl)	It is used to cause the browser to prefetch an image that is at a URL that has been specified.
12.	void removeClickListener(ClickListener testlistener)	Calling is done immediately, just before a widget is going to be removed from that browser’s document.
13.	void removeLoadListener(LoadListener testlistener)	It removes a listener interface that has been previously added.
14.	void removeMouseListener(MouseListener testlistener)	It removes a listener interface that has been previously added.
15.	void removeMouseWheelListener(MouseWheelListener testlistener)	It removes a listener interface that has been previously added.
16.	void setUrl(java.lang.String testurl)	It is used to set the image’s URL that has to be shown.
17.	void setUrlAndVisibleRect(java.lang.String url, int left, int top, int width, int height)	It is used to set the image’s URL and the image’s visibility rectangle that has to be shown.
18.	void setVisible(int left, int top, int testwidth, int height)	It is used to set the image’s visibility rectangle.
19.	static Image wrap(Element testelement)	It is used to create an image widget that can wrap an existing img element.

After the constructors, lets move on to class methods.

Methods Inherited

This class inherits methods from the following classes −

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

Example

Now, let us see an example of Image Widget in which we will see the use of Image Widget in Google Web Toolkit.

Make a project called HelloWorld in the com.codingninjas package.
Make the changes outlined below to HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html, and HelloWorld.java. Leave the remaining files alone.
Start compilation and start the application so that we can verify the output of the logic that has been implemented.

Let’s see the content of the src/com.codingninjas/HelloWorld.gwt.xml

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Let’s inherit the core GWT things.-->
   <inherits name = 'com.google.gwt.user.User'/>


   <!-- Let’s inherit the default Google Web Toolkit style sheet.-->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>


   <!-- Let’s specify the application entry-point class.-->
   <entry-point class = 'com.codingninjas.client.HelloWorld'/>


   <!-- Let’s specify the souce paths for the translatable code.-->
   <source path = 'client'/>
   <source path = 'shared'/>


</module>

Let’s see the content of the Style Sheet file: 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;
}

Let’s see the content of the HTML host file: 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>

Let’s see the content of the Java file: src/com.codingninjas/HelloWorld.java

package com.codingninjas.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() {
      // Let’s create an Image widget first. 
      Image testimage = new Image();


      // setting the source of the image.
      testimage.setUrl("https://s3-ap-southeast-1.amazonaws.com/Coding Ninjas Studio.codingninjas.com/Coding Ninjas Studio/assets/icons/Coding Ninjas Studio-logo.svg");


      // now adding the image to the panel that is the root.
      VerticalPanel vpanel = new VerticalPanel();
      vpanel.add(testimage);


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

You can also try this code with Online Java Compiler

Run Code

Output:

Also See, Image Sampling

Frequently Asked Questions

What is the use of Google Web Toolkit?

Google Web Toolkit (GWT) is an open-source Java software development framework that helps in writing AJAX applications easily. With Google Web Toolkit, you can develop and debug AJAX applications in the Java language using the Java development tools of your choice.

What is a GWT client?

GWT contains a number of HTTP client classes that simplify making custom HTTP requests to your server and optionally processing a JSON- or XML-formatted response. GWT includes a set of HTTP client classes that allow your application to make generic HTTP requests.

How does the GWT compiler work?

The heart of Google Web Toolkit is a compiler that helps in converting Java sources into JavaScript and transforming your working Java app into an equivalent JavaScript app. The Google Web Toolkit compiler supports the vast majority of the Java language. The GWT runtime library emulates a relevant subset of the Java runtime library.

What is GWT RPC?

The GWT RPC framework helps in making it easy for the client and server components of your web application to exchange Java objects over HTTP. The server-side code that gets invoked from the client is often referred to as a service.

What is Gxt GWT?

GXT is a comprehensive Java framework for building web apps using the GWT (formerly Google Web Toolkit) compiler, allowing developers to write apps in Java & compile their code into highly optimized cross-platform HTML5 code.

Conclusion

In this article, we have studied about GWT Image Widget. We have also discussed the constructors as well as the properties of the Image Widget class in detail.

We hope that this article has provided you with the help to enhance your knowledge regarding GWT Image Widget with its constructors and its properties and if you would like to learn more, check out our articles on GWT vs AngularJS and GWT Popup Panel.

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enrol in our courses and refer to the mock test and problems available, Take a look at the interview experiences and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow.

Merry Learning!