Сегодня 3-е. В апреле 2021 года я выпустил GWT Boot Starters 1.0.0 для Maven Central, который является первой финальной версией GWT Boot Starters. В этой короткой статье я покажу вам, как GWT Boot Starters могут помочь нам создавать наши веб-приложения GWT проще и быстрее.
Что такое GWT («gwit», также известный как Google Web Toolkit)?
GWT - это набор средств разработки для создания и оптимизации сложных браузерных приложений. Его цель - обеспечить продуктивную разработку высокопроизводительных веб-приложений без необходимости для разработчика быть экспертом в особенностях браузера, XMLHttpRequest и JavaScript. Это открытый исходный код, полностью бесплатный и используется тысячами разработчиков по всему миру с 2007 года. GWT предлагает транспилятор Java в JavaScript (основной компонент), Java API, виджеты пользовательского интерфейса, инфраструктуры пользовательского интерфейса, разработку server и некоторые другие утилиты. Между тем, существует множество библиотек, построенных вокруг транспилятора GWT, просто посмотрите Список великолепных библиотек GWT.
Для начала вы можете взглянуть на GWT Padlet. В этом блокноте я собрал все вступления, видео, статьи, презентации по GWT и J2CL (новый транспилятор Java в JavaScript, также от Google).
Что такое стартеры загрузки GWT?
Прежде всего, один важный момент: GWT Boot Starter НЕ является интеграцией между Spring Boot и GWT!
GWT Boot Starters - это набор удобных дескрипторов зависимостей, которые вы можете включить в свое приложение. Вы получаете универсальный магазин для всех GWT и связанных технологий, которые вам нужны, без необходимости рыться в примерах кода и копировать и вставлять множество дескрипторов зависимостей. Например, если вы хотите начать использовать GWT и Domino UI для своего Material Design и Elemental2, просто включите зависимость gwt-boot-starter-ui-domino
в свой проект, и все готово.
Давайте начнем наше простое путешествие по созданию первого веб-приложения Hello World с простейших загрузчиков GWT
gwt-boot-starter
(базовых библиотек, которые поступают из самого GWT)! Исходный код можно найти в этом проекте GitHub gwt-boot-sample-basic.
Шаг 1 - Создайте проект Maven
Просто создайте простой проект Maven. Добавьте родительский проект и начальные зависимости. Список стартовых зависимостей можно найти здесь. Чтобы иметь возможность компилировать в JavaScript, вам необходимо добавить gwt-maven-plugin и добавить имя вашего модуля GWT.
<parent> <groupId>com.github.gwtboot</groupId> <artifactId>gwt-boot-starter-parent</artifactId> <version>VERSION</version> </parent> <dependencies> <dependency> <groupId>com.github.gwtboot</groupId> <artifactId>gwt-boot-starter</artifactId> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>net.ltgt.gwt.maven</groupId> <artifactId>gwt-maven-plugin</artifactId> <configuration> <moduleName>hello.YourModule</moduleName> <startupUrls> <url>/basic/</url> </startupUrls> </configuration> </plugin> </plugins> </build>
Шаг 2. Создайте дескриптор модуля GWT module.gwt.xml
Создайте дескриптор модуля GWT в каталоге src / main. В этом файле вы описываете класс EntryPoint, который аналогичен классу и методу Java Main. Модуль rename-to = ”basic” означает, что JavaScript будет скомпилирован в сценарий basic.nocache.js. Этот модуль наследует все от модуля Starter. Список стартовых модулей можно найти здесь. Этот код JavaScript можно импортировать в HTML-файл хоста на следующем шаге.
<module rename-to="basic"> <inherits name="com.github.gwtboot.starter.Starter"/> <entry-point class='hello.client.YourEntryPoint'/> </module>
Шаг 3. Создайте HTML-файл хоста, в котором будет работать ваш JavaScript.
В этом HTML-файле, расположенном по адресу hello / public, будет выполняться созданный вами JavaScript. Этот JavaScript может получить доступ к HTML-файлу. В этом примере сгенерированный JavaScript будет обращаться к div с помощью id = ”helloButton”.
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Demo GWT Webapp</title> <script type="text/javascript" language="javascript" src="basic.nocache.js" async=""></script> </head> <body> <div id="helloButton"/> </body> </html>
Шаг 4 - Создайте основной класс точки входа Java
EntryPoint - это первый класс, который будет выполнен («Основной метод в приложении Java»). В этом примере он заменит «helloButton» на кнопку.
package hello.client; import com.google.gwt.core.client.*; import com.google.gwt.user.client.ui.*; public class YourEntryPoint implements EntryPoint { @Override public void onModuleLoad() { Button button = new Button("Click me"); button.addClickHandler(clickEvent -> { Window.alert("Hello World!"); }); RootPanel.get("helloButton").add(button); } }
В gwt-boot-sample-basic вы можете взглянуть на базовый пример в GWT.
Теперь вы готовы впервые запустить свой базовый образец приложения GWT.
Запуск GWT в DevMode (он же Super DevMode)
Приложение gwt-boot-sample-basic использует встроенный сервер Jetty от GWT для доставки хост-файла HTML. Это можно сделать и с другими сервлетами.
Шаг 1. Запустите GWT DevMode, чтобы автоматически скомпилировать код.
Сначала сгенерируйте дескриптор модуля GWT, а затем запустите режим разработки GWT в режиме SuperDev, чтобы иметь возможность скомпилировать код Java в код JavaScript при перезагрузке в веб-браузере. В Maven вы можете выполнить следующую команду:
mvn gwt:generate-module gwt:devmode
Вы можете просто сгенерировать модуль один раз, а после этого просто запустить:
mvn gwt:devmode
Шаг 2 - Запустите приложение в своем браузере
Теперь вы можете скопировать и вставить результат «Копировать в буфер обмена» пользовательского интерфейса режима разработки GWT, приведенного выше. Запустите его:
http://localhost:8888/basic
Просто перезагрузите свое веб-приложение, и режим GWT SuperDev перенесет ваш Java-код в JavaScript на лету. Вот и все, теперь вы можете разрабатывать свое веб-приложение с помощью GWT постепенно и быстро!
Шаг 3 - Отладьте приложение в своем браузере
Вы можете отлаживать Java-код в браузере с помощью исходных карт. В этом примере мы используем Google Chrome.
Резюме
В этой короткой статье мы увидим, как стартеры загрузки GWT помогают быстрее создавать веб-приложения GWT. С помощью Maven мы можем легко начать разработку веб-приложений GWT всего за несколько шагов. С помощью GWT Boot Starters мы превращаем наш проект в ад зависимостей, точно так же, как Spring Boot Starters делают с проектами Spring Boot.
В настоящий момент стартеры загрузки GWT не поддерживают автоматическое создание веб-приложений с помощью таких веб-приложений, как Spring Initializr, но следующим важным шагом будет GWT Initializr, основанный на стартерах загрузки GWT.
А пока наслаждайтесь работой с GWT и ознакомьтесь с некоторой информацией о загрузке GWT и стартерах загрузки GWT:
- GWT Padlet: https://bit.ly/GWTIntroPadlet
- GWT Boot GitHub: https://github.com/gwtboot
- Модули GWT Boot Starters со списком поддерживаемых библиотек и фреймворков GWT: https://github.com/gwtboot/gwt-boot-modules
- Примеры начальных загрузок GWT: https://github.com/gwtboot/gwt-boot-samples