Сегодня 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: