First GWT Application - Naukri Code 360

📘Introduction

A development toolkit called GWT enables programmers to create internet or web applications. For typical web-app chores like bookmarking, UI abstraction, cross-browser compatibility, etc.

GWT insists on reusable techniques. It offers characteristics like:

🟢Because GWT solves browser incompatibilities through various bindings, developers do not need to be experts in this area.

🟢The client and server code bases for GWT are the same.

🟢The platform of choice for GWT is Java because it offers features like code navigation and refactoring that make development more efficient.

📘First GWT Application

We have four sections to create a GWT application:

Module Descriptors: This subsection aids in GWT application configuration. The configuration file is converted into XML during configuration.

Syntax: name.gwt.xml

The application's name is "name" in this case. The root directory of the project contains all configuration files.

UI design refers to the HTML, CSS, or images used to create GWT applications. Using the tag public path = "location address" />, we may specify its location. The configuration files are located in the module configuration.

Client Side Code: Using the GWT compiler, all applicable codes and business logic are transformed into JavaScript in this step. The tag source path = "path" /> allows us to determine the resource's location. This code is made up of Entry Point code that doesn't require a parameter to be written. EntryPoint.onModuleLoad() method is invoked each time a GWT application module is loaded.

Server Side Code: In this area, server-side code can be run. This component is omitted if our program has no backend (server-side script or database).

📘Creating an Application

Utilizing the GWT web development toolkit, create a small web development project. The steps to creating an application are as follows:

🟢File→New→Other

🟢Now choose a wizard option from the pop-up box that just appeared. Choose Google Web Application Wizard, then click "Next."

🟢A new wizard will launch after you click next. Give the project name and the package name now. Because we are only creating a simple app, choose Use GWT under Google SDK and deselect Use Google App Engine.

🟢Press the Finish button. Upon pressing the finish button, a directory is created.

📘Entry Point Class

Class SampleWebApplication represents the entry point for a GWT application in this illustration. There are numerous server-side code references in this file. Given the volume of references, this file needed to be tidy.

OnModuleLoad(), a pre-defined method, serves as the program's Entry Point when the GWT Web Application is launched. This is similar to a standard java program's public static void main (String args[]) function.

Code 👩‍💻

package com.javatpoint.helloworld.client;  
 import com.google.gwt.core.client.EntryPoint;  
 /** * Entry point classes define onModuleLoad() */   
public class SampleWebApplication implements EntryPoint {  
    / * This is the entry point method. */   
public void onModuleLoad() {  
 // TODO  
 }   
}

📘Deployment Descriptor

It is comparable to web.xml, the deployment descriptor for Servlet-based Java Web Applications in J2EE programming. Now that servlets are defined under the deployment descriptor in web.xml, GWT creates them. Delete any server-side code and entries in web.xml, also known as specification tags, since we are only building a simple web application.

A welcome file called SampleWebApplication.html is created and added to web.xml. The home page of our GWT web application is contained in this file.

Code 👩‍💻

<?xml version="1.0" encoding="UTF-8"?>  
<!--  
When updating your version of GWT, you should also update this DTD reference,  
so that your app can take advantage of the latest GWT module capabilities.  
-->  
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.7.0//EN"  
"http://gwtproject.org/doctype/2.7.0/gwt-module.dtd">  
<module rename-to='samplewebapplication'>  
<!-- Inherit the core Web Toolkit stuff.-->  
<inherits name='com.google.gwt.user.User'/>  
  
<!-- Inherit the default GWT style sheet. You can change-->  
<!-- the theme of your GWT application by uncommenting-->  
<!-- any one of the following lines.-->  
<inherits name='com.google.gwt.user.theme.clean.Clean'/>  
<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/>-->  
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/>-->  
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>-->  
  
<!-- Another module inherits-->  
  
<!-- Specify the app entry point class.-->  
<entry-point class='com.javatpoint.helloworld.client.SampleWebApplication'/>  
  
<!-- Specify the paths for translatable code-->  
<source path='client'/>  
<source path='shared'/>  
  
<!-- allow Super Dev Mode -->  
<add-linker name="xsiframe"/>  
</module>

📘Welcome File

The project's design and feel are described in the welcome file. It is HTML and CSS-designed to meet our needs.

Code 👩‍💻

<!doctype html>  
<!-- The DOCTYPE declaration above will set the-->  
<!-- browser's rendering engine into-->  

<!-- "Standards Mode". Replacing this declaration -->  

<!-- with a "Quirks Mode" doctype is not supported.-->  

<html>  

<head>  

<meta http-equiv="content-type" content="text/html; charset=UTF-8">  

<!-- -->  

<!-- Consider inlining CSS to reduce the number of requested files -->  

<!-- -->  

<link type="text/css" rel="stylesheet" href="SampleWebApplication.css">  

<!-- -->  

<!-- Any title is fine-->  

<!-- -->  

<title>Web Application Starter Project</title>  

<!-- -->  

<!-- This script loads your compiled module. -->  

<!-- If you add any GWT meta tags, they must -->  

<!-- be added before this line. -->  

<!-- -->  

<script type="text/javascript" language="javascript"  

src="samplewebapplication/samplewebapplication.nocache.js"> </script>  

</head>  

<!-- The body can have arbitrary HTML, or -->  

<!-- you can leave the body empty if you want -->  

<!-- to create a completely dynamic UI. -->  

<!-- -->  

<body>  
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->  
<noscript>  
<div style="width: 22em; position: absolute; left: 50%;  
margin-left: -11em; color: red; background-color: white; border: 1px solid red;  
padding: 4px; font-family: sans-serif">  
Your web browser must have JavaScript enabled for this application to display correctly.  
</div>  
</noscript>  
</body>  
</html>

The Entry Point Class changes the UI component. To add a UI component, numerous lines of code are written. We would include a button, a vertical panel, and event handling in this example.

Code 👩‍💻

package com.javatpoint.helloworld.client;  
  
import com.google.gwt.core.client.EntryPoint;  
import com.google.gwt.event.dom.client.ClickEvent;  
import com.google.gwt.event.dom.client.ClickHandler;  
import com.google.gwt.user.client.ui.Button;  
import com.google.gwt.user.client.ui.Label;  
import com.google.gwt.user.client.ui.RootPanel;  
import com.google.gwt.user.client.ui.VerticalPanel;  
  
/** 
 * Entry point classes define <code>onModuleLoad()</code>. 
 */  
public class SampleWebApplication implements EntryPoint {  
    /** A vertical panel that holds other components over UI.*/  
    VerticalPanel vPanel;  
    /* 
    * A label that gets updated with the click of a button. 
    */  
    Label lbl;    
    /** 
     * This is the entry point method. 
     */  
    public void onModuleLoad() {  
        vPanel= new VerticalPanel ();  
        lbl= new Label ();  
          
        /* 
        * Button and its click handler. 
        */  
        Button btn = new Button("GWT Button");  
        btn.addClickHandler(new ClickHandler() {  
          
            @Override  
        public void onClick(ClickEvent event) {  
        lbl.setText("You clicked GWT Button!");  
        }  
        });       
        /* 
        * adding label and button into Vertical Panel. 
        */  
        vPanel.add(lbl);  
        vPanel.add(btn);          
        /* 
        * Adding vertical panel into HTML page. 
        */  
        RootPanel.get().add(vPanel);  
        }  
    }

📘Running GWT Web Application

The GWT Web Application uses two modes:

1️⃣Development Mode: Java code interacts with the JVM in this mode.

2️⃣Production Mode: This mode allows the GWT Compiler to compile Java code and generate browser-compatible JavaScript.

Frequently Asked Questions

Does GWT still have support?

Running the GWT compiler or server-side tools on Java 7 is no longer supported. For this release, the GWT distribution is still compiled to support Java 7, although there are no assurances that this will function. Future iterations will generate Java 8+ bytecode.

What is a layout widget?

The widget is the layout mechanism's central idea. Flutter is known to treat everything as a widget. Therefore, your app's image, icon, text, and even layout are all widgets.

Are widgets with states unchangeable?

Because StatefulWidget instances are immutable, their mutable state is either saved in separate State objects made by the createState method or in objects to which the StatefulWidget subscribes, such as Stream or ChangeNotifier objects, to which references are kept in final fields.

Is Google still using GWT?

GWT is still alive. It's just a case of miscommunication in PR. People mistakenly believe that to use GWT, you must use the outdated widget system. Substitute Elemento for widgets and REST requests for RPC.

In GWT, how can I set the focus?

Create a property field for your TextBox, then call textBox from your setFocus method. Regardless of what you gave your TextBox property's name, setFocus(true).