Google Web Toolkit (GWT) First Touch

Structure

 

gwtStruct

GWT development structure are consisted by four components (inside WEB-INF/src)

 

clientEverything that happens within your user’s web browser is referred to as client-side processing. When you write client-side code that is intended to run in the web browser, remember that it ultimately becomes JavaScript. Thus, it is important to use only libraries and Java language constructs that can be translated.

 

server – When your application needs to interact with your server (for example, to load or save data), it makes a client-side request (from the browser) across the network using a remote procedure call (RPC). While processing an RPC, your server is executing server-side code. This server side code is essentially a servlet, which is registered in the *.gwt.xml file (Will be mentioned later). Since it only runs on the server side, you wouldn’t need to bother anything about translation to javascript.

 

* is the module name, which will is detailed later with hightlight

 

public –  A place to hold all the resource that needed for publishing, such as style sheet, html page and images.

 

*.gwt.xml – Individual units of GWT configuration are XML files called modules. A module bundles together all the configuration settings that your GWT project needs, namely

·          Inherited modules

·          An entry point application class name; these are optional, although any module referred to in HTML must have at least one entry-point class specified

·          Source path entries

·          Public path entries

·          Deferred binding rules, including property providers and class generators

Modules may appear in any package in your classpath, although it is strongly recommended that they appear in the root package of a standard project layout.

GWT Configuration

Entry Point class – 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.

 

Generally, your entry point class implements EntryPoint interface and implements its onModuleLoad() method.

 

Source Path – Modules can specify which subpackages contain translatable source, causing the named package and its subpackages to be added to the source path. Only files found on the source path are candidates to be translated into JavaScript, making it possible to mix client-side and server-side code together in the same classpath without conflict. When module inherit other modules, their source paths are combined so that each module will have access to the translatable source it requires.

 

Public Path – Modules can specify which subpackages are public, causing the named package and its subpackages to be added to the public path. When you compile your application into JavaScript, all the files that can be found on your public path are copied to the module’s output directory. The net effect is that user-visible URLs need not include a full package name. When module inherit other modules, their public paths are combined so that each module will have access to the static resources it expects.

 

GWT Compilation

There are bunch of tools that bundled with GWT. See more details at http://www.asquare.net/gwt/usage.jsp

 

For compilation, we use GWTCompiler 

com.google.gwt.dev.GWTCompiler

 

GWTCompiler [-logLevel level] [-gen dir] [-out dir] [-treeLogger] [-style style] module

where

-logLevel    The level of logging detail: ERROR, WARN, INFO, TRACE, DEBUG, SPAM, or ALL

-gen         The directory into which generated files will be written for review

-out         The directory to write output files into (defaults to current)

-treeLogger  Logs output in a graphical tree view

-style       Script output style: OBF[USCATED], PRETTY, or DETAILED (defaults to OBF)and

module       Specifies the name of the module to compile

 

Remind that value for module is path to the entry point configuration file rather than the entry point class. The configuration file will redirect the processor to the entry point class.

 

    <target name="GWTcompile" depends="GWTclean">

        <java classpathref="gwt.class.path"

              classname="com.google.gwt.dev.GWTCompiler"

              fork="true">

            <arg value="-out"/>

            <arg value="${gwt.output.dir}"/>

            <arg value="${entry.point.class}"/>

        </java>

    </target>

 

where entry.point.class=ImageViewer. This is how the application finds the configuration file and through the file it could find the entry point class.

 

Since we may need access the output contents through the web directly, the output directly should be direct to the folder outside WEB-INF, although its source file is inside WEB-INF/src. Setting gwt.output.dir=. will result a new folder with the module name (ie ImageView) created with all the compiled html related contents inside it.

 

Entry Point Class

It is the place your application first initiated.  It implements onModuleLoad() from EntryPoint interface, where all initiation should be set within it, such as calling your service.

 

Service Interface

Service interface must extend RemoteService and be implemented by the servlet at server side (such as imageServiceImpl).

 

Register service to the entry point

It is recommended that you redefine your service path to the entry point class, otherwise it would just use the default one (seems like to be the applicationName/EntrypointName/serviceName).

 

     ImageServiceAsync imgSerivce = (ImageServiceAsync) GWT.create(ImageService.class);

     ServiceDefTarget endpoint = (ServiceDefTarget) imgSerivce;

     endpoint.setServiceEntryPoint("/imageViewerApplication/ImageServiceTest");

 

As you could see from above examples, imageViewerApplication is application name and ImageServiceTest is service name. And for most of the cases, your application structure would likely follow the above example. (Note: the above example is not the same as what was used in the application source code. It is just for demonstration)

 

Now we add getImageDate() method to our EntryPoint class. To do this, we need to get a ImageServiceAsync implementation from the GWT class, then create an AsyncCallback handler. This is a simple interface that just has an onSuccess() and onFailure() method to handle the return state of the callback

 

imgSerivce.getImageData(new AsyncCallback(){

 

            public void onFailure(Throwable caught) {

            }

 

            public void onSuccess(Object result) {

            }

});

 

 

Add Listeners

You can add mouse listener, event listener or even style sheet listener to your element.

img.addMouseListener(new MouseListenerAdapter(){

  public void onMouseEnter(Widget sender){

              Label label = new         

                   Label(DOM.getElementAttribute(sender.getElement(),"the-title"));

              ……………..

  }

});

 

Output Deployment

*. Nocache.js file provides the content of the html page that drew by GWT.  To display it, just simply include it into the page you want as an javascript library.

 

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

            src=’./ImageViewer/ImageViewer.nocache.js’></script>

 

Module Configuration

 

<module>

    <inherits name=’com.google.gwt.user.User’/>

    <entry-point class=’client.ImageViewer’/>

    <stylesheet src="ImageViewer.css"/>

    <servlet path="/ImageServiceTest" class="server.ImageServiceImpl"/>

</module>

 

Two things need to be aware of. First the class path for both entry point and servlet are relative from the location of *.gwt.xml file. Stylesheet path is relative inside the output directory (ie ImageViewer folder)

Advertisements
This entry was posted in Java Utilities. Bookmark the permalink.

One Response to Google Web Toolkit (GWT) First Touch

  1. Unknown says:

    wow gold runescape powerleveling runescape gold runescape money 出会い 風俗 魚沼産コシヒカリ ミュージシャン 施主支給 クレジットカード 現金化 ショッピング枠 現金化 ブレーキパッド 矯正歯科 大阪 瞑想 渋谷 税理士 内容証明 レーシック 格安航空券 販促品 トレーニングパンツ 現金化 裏DVD 解体工事 格安航空券 国内 ライブチャット 人材派遣会社 レーシック 包茎治療 歯医者 審美歯科 英会話 ETC http://www.a-tabi.com http://www.like-girls.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s