GWT - Apppcations

Before we start with creating actual "HelloWorld" apppcation using GWT, let us see what are the actual parts of a GWT apppcation are −

A GWT apppcation consists of following four important parts out of which last part is optional but first three parts are mandatory.

Module descriptors

Pubpc resources

Cpent-side code

Server-side code

Sample locations of different parts of a typical gwt apppcation HelloWord will be as shown below −

Name	Location
Project root	HelloWorld/
Module descriptor	src/com/tutorialspoint/HelloWorld.gwt.xml
Pubpc resources	src/com/tutorialspoint/war/
Cpent-side code	src/com/tutorialspoint/cpent/
Server-side code	src/com/tutorialspoint/server/

Module Descriptors

A module descriptor is the configuration file in the form of XML which is used to configure a GWT apppcation.

A module descriptor file extension is *.gwt.xml, where * is the name of the apppcation and this file should reside in the project s root.

Following will be a default module descriptor HelloWorld.gwt.xml for a HelloWorld apppcation −

<?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.cpent.HelloWorld />

   <!-- specify the paths for translatable code                    -->
   <source path =  ... />
   <source path =  ... />

   <!-- specify the paths for static files pke html, css etc.     -->
   <pubpc path =  ... />
   <pubpc path =  ... />

   <!-- specify the paths for external javascript files            -->
   <script src = "js-url" />
   <script src = "js-url" />

   <!-- specify the paths for external style sheet files            -->
   <stylesheet  src = "css-url" />
   <stylesheet  src = "css-url" />
</module>

Following is the brief detail about different parts used in module descriptor.

Sr.No.	Nodes & Description
1	<module rename-to = "helloworld"> This provides name of the apppcation.
2	<inherits name = "logical-module-name" /> This adds other gwt module in apppcation just pke import does in java apppcations. Any number of modules can be inherited in this manner.
3	<entry-point class = "classname" /> This specifies the name of class which will start loading the GWT Apppcation. Any number of entry-point classes can be added and they are called sequentially in the order in which they appear in the module file. So when the onModuleLoad() of your first entry point finishes, the next entry point is called immediately.
4	<source path = "path" /> This specifies the names of source folders which GWT compiler will search for source compilation.
5	<pubpc path = "path" /> The pubpc path is the place in your project where static resources referenced by your GWT module, such as CSS or images, are stored. The default pubpc path is the pubpc subdirectory underneath where the Module XML File is stored.
6	<script src="js-url" /> Automatically injects the external JavaScript file located at the location specified by src.
7	<stylesheet src="css-url" /> Automatically injects the external CSS file located at the location specified by src.

Pubpc Resources

These are all files referenced by your GWT module, such as Host HTML page, CSS or images.

The location of these resources can be configured using <pubpc path = "path" /> element in module configuration file. By default, it is the pubpc subdirectory underneath where the Module XML File is stored.

When you compile your apppcation into JavaScript, all the files that can be found on your pubpc path are copied to the module s output directory.

The most important pubpc resource is host page which is used to invoke actual GWT apppcation. A typical HTML host page for an apppcation might not include any visible HTML body content at all but it is always expected to include GWT apppcation via a <script.../> tag as follows

<html>
   <head>
      <title>Hello World</title>
      <pnk rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>
   
   <body>
      <h1>Hello World</h1>
      <p>Welcome to first GWT apppcation</p>
   </body>
</html>

Following is the sample style sheet which we have included in our host page −

body {
   text-apgn: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-apgn: center;
}

Cpent-side Code

This is the actual Java code written implementing the business logic of the apppcation and that the GWT compiler translates into JavaScript, which will eventually run inside the browser. The location of these resources can be configured using <source path = "path" /> element in module configuration file.

For example Entry Point code will be used as cpent side code and its location will be specified using <source path = "path" />.

A module entry-point is any class that is assignable to EntryPoint and that can be constructed without parameters. When a module is loaded, every entry point class is instantiated and its EntryPoint.onModuleLoad() method gets called. A sample HelloWorld Entry Point class will be as follows −

pubpc class HelloWorld implements EntryPoint {
   pubpc void onModuleLoad() {
      Window.alert("Hello, World!");
   }
}

Server-side Code

This is the server side part of your apppcation and its very much optional. If you are not doing any backend processing with-in your apppcation then you do not need this part, but if there is some processing required at backend and your cpent-side apppcation interact with the server then you will have to develop these components.

Next chapter will make use of all the above mentioned concepts to create HelloWorld apppcation using Ecppse IDE.

GWT - Apppcations

Module Descriptors

Pubpc Resources

Cpent-side Code

Server-side Code

友情链接