OpenTrader: a transactional, web application with Google Web Toolkit, OpenJPA/Slice on Tomcat

Image Added

OpenTrader is a sample web application to demonstrate integration and interaction of Google Web Toolkit , OpenJPA and (GWT) and OpenJPA running in Tomcat Servlet Container. These pages describe various aspects of this end-to-end application. The following sections are fairly independent of each other and can be followed as such based on your interest.

• Architecture and core design goals
• The computing environment requirement
• Developing a GWT Client
• Developing a JPA based Server
• Communication between the components
• Building the application
• Deploying the application

GWT takes a position that is a significantly unique among the multitude of frameworks available to build a browser based client. GWT framework is based on several key concepts:

• an asynchronous RPC protocol for communication between web client and server. Such asynchronous RPC is popularized by AJAX (Asynchronous JavaScript and XML) since last several years.
• a cross-compiler that converts Java to JavaScript. This is the most critical component in the framework as it allows the client be written completely in Java. Besides adding a comfort layer for Java developers, the cross-compiler solves one of the most complex issue of browser based clients namely cross-browser compatibility. The cross-compiler generates separate JavaScript targeted to prominent browsers and the framework knows to activate the appropriate JavaScript based on the particular browser a client is using.
• a library of interactive visual widgets such as dialog boxes, combo-boxes, tables etc. This Java based library realizes the widget as the elements of a Document Object Model (DOM) for a browser to render them in HTML. For example, an instance of com.google.gwt.user.client.ui.FlexTable urns into a <table> in the displayed HTML page by the framework. The widget library not only provides rendering support, it also comes with a event dispatching model for the client application to handle the user interaction.

OpenTrader - the sample example described in these pages - demonstrates how to develop a GWT client for a transactional, server application based on Java Persistence API (JPA). This example is somewhat more involved than a typical AddressBook example in terms of the complexity of the domain model, the transactional functions of the server as well as the interaction between multiple widgets in the client. Also the sample application covers a realistic use case where the core server application is defined independent of both GWT and JPA – and then demonstrates how these two technologies are used to implement an end-to-end service running inside a Tomcat Servlet Container.

Follow the steps to view OpenTrader source code, build the application, deploy it in your favorite application container and run it in your favorite browser.

...

OpenTrader source code is available as one of the OpenJPA examples. Checkout the source files in a directory.

$ svn checkout https://svn.apache.org/repos/asf/openjpa/trunk/openjpa-examples/opentraderImage Removed

The source tree comes with

...

Edit build.properties to point to the dependent libraries you have downloaded. The file contains the instructions as comments.

2.2

...

{{ $ ant compile}}

Compile with Ant

Compile the application. Compilation involves three separate compilation process. First the plain old javac compilation. Followed by GWT cross-compiler that translates Java code into JavaScript. And finally OpenJPA compilation that adds few bytecodes to the persistent classes to manage their persistent behavior (which is also known as bytecode enhancement).

$ ant compile

GWT Compiler takes will compile the source code, then compile it for GWT then compile it for OpenJPA. Compiling for GWT will take ages. Even though it only compiles for a single browser (FireFox).
This is controlled by the following directives in the module descriptor OpenTrader.gwt.xml

...

Now, for hosted mode, simply fire Ant as
{{ $ ant devmode}}

This should again take a very long time and pop open a horrible looking Swing console titled GWT Development Mode. Go to Development Mode tab and click Launch Default Browser. On my FireFox browser, that opens up the page http://127.0.0.1:8888/OpenTrader.html?gwt.codesvr=127.0.0.1:9997Image Removed. If all goes well, at this point your browser will prompt you with a welcome dialog box

...

Once you have entered OpenTrader, the browser application looks like

In this page, you can place a trade offer to sell or buy some stocks. To really commit a trade you will need a matching offer. Now as a trader offer can only match to another trader's offer, you need to open another browser page with a different name. In FireFox, the tab will show the Trader name. Now if one Trader makes an offer that match another Trader's offer, then clicking the Sell or Buy button will commit the trade and will appear on the Trading History Window. Also notice the Server Log window. That will display SQL issued for every action by the server. You will also notice SQL being logged even if you are not pressing any buttons. Thatis because the Market Data Panel (the one in th etop-left corner) is refreshing the market prices for the Stocks by a periodic call to the server. As the stock prices change, that change is reflected on the gain/loss column of the waiting trade offers. All this dynamic partial update occurs in the same browser page – that is what GWT offers.