Платформа Vaadin, похожая на GWT (Google Web Toolkit), представляет собой набор веб-компонентов, которые позволяют разработчикам реализовывать веб-приложения HTML5 с использованием языка программирования Java. Это руководство призвано помочь разработчикам создать простое приложение для сканирования веб-документов с помощью Vaadin и Dynamic Web TWAIN SDK.

Настройка среды разработки Vaadin

Руководство Быстрый старт Vaadin рекомендует разработчикам использовать IntelliJ, Eclipse и Netbeans в качестве инструментов разработки. Но я настоятельно рекомендую Visual Studio Code.

С помощью установщика Visual Studio Code для Java-разработчиков вы можете настроить среду разработки одним щелчком мыши.

Загрузите последнюю версию Apache Maven.

Использование Dynamic Web TWAIN в Vaadin Flow

Мы можем быстро начать работу с Vaadin, изучив базовый пример кода:

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

Когда вы нажмете F5 для запуска кода, Visual Studio Code автоматически создаст файл launch.json:

Если вам не удается запустить приложение, скопируйте конфигурацию в файл launch.json.

Чтобы использовать Dynamic Web TWAIN, нам нужно знать, как импортировать https://tst.dynamsoft.com/libs/dwt/14.3.1/dynamsoft.webtwain.min.js.

Согласно онлайн-документам, мы можем импортировать библиотеку JavaScript Dynamic Web TWAIN следующим образом:

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

Создайте тег div в качестве контейнера Dynamic Web TWAIN:

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

Инициализируйте пользовательский интерфейс с помощью кнопки и тега div:

Следующим шагом является запуск события сканирования документа путем выполнения кода JavaScript.

Получите БЕСПЛАТНЫЙ пробный 30-дневный лицензионный ключ.

Вызовите метод Java executeJavaScript, чтобы запустить код JavaScript, заключенный в строку:

Обновите веб-страницу, и теперь функция сканирования документов должна работать.

Однако длинная строка недоступна для чтения и редактирования. Мы лучше его оптимизируем. Альтернативный способ — переместить весь код JavaScript в файл .js, а затем импортировать его.

Создайте файл scan.js в каталоге src\main\webapp\frontend\src:

Импортируйте файл JavaScript из локального пути frontend://src/scan.js. Фрагмент кода теперь выглядит намного лучше:

Исходный код

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

Первоначально опубликовано на https://www.codepool.biz 24 июня 2019 г.