How to Integrate Dynamic Web TWAIN into Vaadin Platform

Vaadin platform, similar to GWT (Google Web Toolkit), is a set of web components that allow developers to implement HTML5 web apps using the Java programming language. This tutorial aims to help developers to create a simple web document scanning app with Vaadin and Dynamic Web TWAIN SDK.

Setting Up Vaadin Development Environment

The Vaadin quick start tutorial recommends developers to use IntelliJ, Eclipse, and Netbeans as the development tools. But I strongly recommend Visual Studio Code.

With the installer of Visual Studio Code for Java developers, you can set up the development environment by one-click.

Download the latest Apache Maven.

Using Dynamic Web TWAIN in Vaadin Flow

We can quickly get started with Vaadin by learning the basic sample code:

git clone https://github.com/vaadin-learning-center/vaadin-todo

When press F5 to run the code, Visual Studio Code will automatically generate a launch.json file:

If you fail to run the app, copy the configuration to your launch.json file.

To use Dynamic Web TWAIN, we need to know how to import https://tst.dynamsoft.com/libs/dwt/14.3.1/dynamsoft.webtwain.min.js.

According to the online docs, we can import the Dynamic Web TWAIN JavaScript library as follows:

@JavaScript("https://tst.dynamsoft.com/libs/dwt/14.3.1/dynamsoft.webtwain.min.js")

Create a div tag as the container of Dynamic Web TWAIN:

@Tag("div")
public static class WebTWAINContainer extends Component {
public WebTWAINContainer() {
getElement().setProperty("id", "dwtcontrolContainer");
}
}

Initialize the UI with a button and the div tag:

The next step is to trigger the document scanning event by executing JavaScript code.

Get a FREE 30-day trial license key.

Invoke the Java method executeJavaScript to run the JavaScript code that wrapped as a string:

Refresh the web page and the document scan function should work now.

However, the long string is not readable and editable. We’d better optimize it. An alternative way is to move all JavaScript code to a .js file and then import it.

Create a scan.js file under src\main\webapp\frontend\src directory:

Import the JavaScript file from the local path frontend://src/scan.js. The code snippet looks much better now:

Source Code

https://github.com/dynamsoft-dwt/vaadin-document-scan

Originally published at https://www.codepool.biz on June 24, 2019.