Building Web Scanning Applications with GWT

GWT (Google Web Toolkit), a development toolkit that allows developers to build complicated JavaScript Web applications in Java, has been used by many outstanding products, such as Google AdSense, Google AdWords, and so on. It is open source, and completely free. In this post, I’d like to share how to build a starter application with GWT, as well as how to combine DWT (Dynamic Web TWAIN) and GWT to build a simple Web scanning application.


gwt dwt

GWT Download & Installation

It is suggested to install GWT Plugin for Eclipse. Please make sure you have installed Java version 7 and a recent version of Eclipse:

  • Eclipse 4.4 (Luna) > https://dl.google.com/eclipse/plugin/4.4
  • Eclipse 4.3 (Kepler) > https://dl.google.com/eclipse/plugin/4.3
  • Eclipse 3.8/4.2 (Juno) > https://dl.google.com/eclipse/plugin/4.2

To install GWT Plugin:

  1. Launch Eclipse.
  2. Click Help > Install New Software…
  3. Click Add…, and add a location http://dl.google.com/eclipse/plugin/4.4.
  4. Select Google plugin for Eclipse, GWT Designer for GPE and SDKs.gwt_plugin_check
  5. After installing plugins, restart Eclipse.

Creating First Web Application with GWT

Click GWT plugin button to create a new project WebTwainDemo:

gwt_new

Enter the package com.dynamsoft.sample.WebTwainDemo. Here is how the final project looks like:

gwt_final_project

Run the project as Web Application. If it is your first time to run GWT apps in Chrome, you need to download and install the GWT Developer plugin from Chrome Web Store:

gwt_chrome

After adding the plugin, refresh the page and have fun with your first GWT app:

gwt_starter

Using DWT with GWT

Open the folder {Dynamic Web TWAIN Installation Path}\Dynamic Web TWAIN SDK 10.1.1 Trial\Samples\Getting Started, and copy the whole Resources folder to war. Then let’s make some changes.

WebTwainDemo.html

Include two DWT JavaScript files:

<script type="text/javascript" language="javascript" src="webtwaindemo/webtwaindemo.nocache.js"></script>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"> </script>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"> </script>

Add a container for DWT control:

<div id="dwtcontrolContainer"></div>

Add a container for the button that triggers Web scanning:

<div id="scanButtonContainer"></div>

Comparing to the basic sample code provided by Dynamsoft, the difference is that you don’t need to add a HTML button, and any JavaScript code in HTML file.

WebTwainDemo.java

Find the entry point method onModuleLoad(), and create a new Button instance:

final Button scanButton = new Button("Scan");
scanButton.addStyleName("scanButton");
RootPanel.get("scanButtonContainer").add(scanButton);

class TwainHandler implements ClickHandler {

			public void onClick(ClickEvent event) {
				acquireImage();
			}

			private void acquireImage() {
				nativeAcquireImage();
			}
		}

TwainHandler twainHandler = new TwainHandler();
scanButton.addClickHandler(twainHandler);

The method nativeAcquireImage() is a JSNI method, in which we can add JavaScript code:

public static native void nativeAcquireImage() /*-{
		var DWObject = $wnd.Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); // Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer'.
		DWObject.IfDisableSourceAfterAcquire = true; // Source will be closed automatically after acquisition.
		DWObject.SelectSource(); // Select a Data Source (a device like scanner) from the Data Source Manager.            
		DWObject.OpenSource(); // Open the source. You can set resolution, pixel type, etc. after this method. Please refer to the sample 'Scan' -> 'Custom Scan' for more info.
		DWObject.AcquireImage(); // Acquire image(s) from the Data Source. Please NOTE this is a asynchronous method. In other words, it doesn't wait for the Data Source to come back. 
	}-*/;

Now, you can refresh WebTwainDemo.html to see whether the Web scanning demo will run successfully.

Source Code

https://github.com/DynamsoftRD/DWT-with-Web-App-Framework/tree/master/gwt

git clone https://github.com/DynamsoftRD/DWT-with-Web-App-Framework.git
  • elecnix

    This example GWT application shows how to invoke native Javascript from GWT, but avoids the use-case where the scanButtonContainer is built from WebTwainDemo.java.

    It’s near-impossible to get the latter working because the scanButtonContainer is added to an iframe, and the plugin can’t find it. Trying to be clever by loading the Javascript from within the iframe won’t work either, because the ‘document’ variable is renamed to $doc by GWT.