Платформа 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 г.