Рубрики
Без рубрики

Современный GWT, первые шаги

Минимальное руководство для начала разработки современных проектов GWT. С тегами gwt, java, руководство по запуску, интерфейс.

GWT – мощный инструмент, но иногда эта сила может восприниматься как сложность.

Длинное ненужное объяснение здесь, если вы просто хотите начать с GWT, перейдите к само руководство .

Я думаю, что эту сложность можно разделить на две причины; 1. большие проекты сложны, и когда вы пытаетесь объяснить, как решить сложную ситуацию, то само объяснение является сложным. 2. GWT обладает огромной экосистемой, и для каждой проблемы существуют различные решения. Это вынуждает вас принимать сложные решения.

Но, как мы туда попали?

GWT родилась в 2006 году, с тех пор эволюция веб-экосистемы была удивительной, даже внутри самой GWT произошло множество изменений, альтернатив и третьих сторон, которые создали удивительные решения для управления большими клиентскими веб-приложениями.

С 2006 по 2012 год GWT назывался “Google Web Toolkit”, и это было комплексное решение. В июне 2012 года Google передал управление руководящему комитету и переименовал проект в “GWT”. С тех пор GWT превратился в более открытый инструмент, и большинство архитектурных решений, встроенных в сам GWT, были преодолены сторонними альтернативами. В настоящее время количество решений огромно, и на данный момент GWT – это действительно просто ядро, и оно не зависит от того, как вы должны организовать свой код. Таким образом, GWT больше не является веб-инструментарием , больше не является клиентской платформой , это просто транспилер с гигантской экосистемой вокруг него.

Например, в настоящее время, если вы хотите выбрать архитектурный шаблон клиента, вы должны выбрать между gwt-действиями , gwtp , эррай , react4j , vue-gwt , nalu и многое другое! или, если вы ищете транспортный уровень, вам следует выбрать между gwt-rpc , requestfactory , resty-gwt , gwtp-rest-отправка , автоматический отдых и многое другое!

Вся эта сложность (оправданная только для больших проектов с опытными командами java) и все эти альтернативные архитектурные решения (что на самом деле хорошо) немного сбивают с толку, когда начинаешь с GWT.

Сказал все это, когда я должен использовать GWT? Я думаю, что вы должны использовать GWT в проекте компании только в том случае, если вы соответствуете этим двум пунктам.

  1. у вас есть старшая команда Java , которая уже знает Java и веб-разработку (HTML5, CSS3, ES6). Для разработки с GWT вы должны знать браузеры, вам не нужно быть экспертом по JavaScript, но вам нужно много знать о веб-мире ( MDN ваш друг).
  2. вы должны захотеть поделиться логикой Java , библиотеками и инструментами, которые вы уже используете в Java (серверы или Android) с клиентской стороной или даже iOS с J2ObjC ). В этом весь смысл GWT, обмена кодом между платформами. Это полезно и решает проблему дублирования логики, например, всякий раз, когда вы редактируете поле, вы часто проверяете его с помощью некоторых правил, но затем оно отправляется на сервер и должно быть проверено снова. Этот простой, но распространенный вариант использования прекрасно решается с помощью GWT. Вы пишете свой код валидатора и используете его точно такой же код проверки на всех платформах, что обеспечивает оперативность на стороне клиента, а также безопасность на стороне сервера ( кросс-платформенный пример ).

Если у вас уже есть многолетний опыт работы с GWT, вы можете использовать его для многих вещей, даже для небольших приложений. Но чтобы оправдать усилия по вступлению, вы должны удовлетворить этим двум пунктам. Но, эх! перед проектом компании вы можете просто изучить его для удовольствия, и я надеюсь, что вы здесь для этого!

Чтобы упростить это руководство, я собираюсь сосредоточиться на стороне клиента. Кроме того, я приму некоторые личные решения, которые, на мой взгляд, являются общими и перспективными. Но помните, GWT – это гораздо больше, чем я объясню здесь!. Это то, что я выбрал:

  1. создайте ПРИЛОЖЕНИЕ только для микроклиентов , поэтому нет транспорта и нет компонентов представления. Часто руководства начинаются с клиент-серверного приложения, оно намного сложнее, и когда вы начинаете с GWT, вы склонны путать/смешивать клиентскую и серверную стороны как одну уникальную виртуальную машину magic. Хотя все на java, и вы можете запускать один и тот же код java в клиенте или на сервере, оба являются независимыми средами выполнения, и эта концепция должна быть ясной.

    Кроме того, если вы создадите приложение только для клиента, руководство станет намного меньше, и вы сможете играть с ним проще. Более того, я настоятельно рекомендую вам найти микроигры или микро-приложения, написанные на JS или машинописном языке, и перенести их в GWT. Это довольно хорошее упражнение, чтобы привыкнуть к GWT (это, например, игра-змея, которую я перенес из проекта JS rxsnake-gwt ).

  2. он управляется с помощью Maven , не требуется IDE или плагин, просто java+maven . Я буду использовать IntelliJ IDEA. Мы не собираемся использовать какой-либо плагин, IntelliJ Ultimate поддерживает GWT, у Eclipse есть очень хороший плагин, но я лично предпочитаю не зависеть ни от чего из этого. Кроме того, проблема с этими плагинами заключается в том, что конфигурацию проекта (в основном путь к классам) нелегко сохранить точно такой же в терминале или Использует плагин IDE. Таким образом, с помощью этого решения, решения Maven, вы сможете запускать, тестировать и упаковывать GWT одинаково во всех этих средах. IMO Maven в настоящее время является самой простой стратегией для компиляции GWT.

1. Базовый архетип Maven 💩

Во-первых, мы создаем минимальный проект maven. Вы можете следовать этому руководству или выполнить эту команду, если у вас уже установлен maven.

› mvn archetype:generate \
    -DarchetypeRepository=https://repo.maven.apache.org/maven2 \
    -DarchetypeGroupId=org.apache.maven.archetypes \
    -DarchetypeArtifactId=maven-archetype-quickstart \
    -DarchetypeVersion=1.4 -DinteractiveMode=false \
    -DgroupId=me -DartifactId=hello-app -Dversion=HEAD-SNAPSHOT

Я надеюсь, вы знаете что-нибудь о мавен . Но, если нет, обратите внимание, что вы можете скомпилировать, протестировать и упаковать свое приложение с помощью mvn verify . Запустите его сейчас же! 😉

Теперь вы можете открыть созданный проект в IntelliJ, просто нажмите “Открыть” и перейдите в папку. IntelliJ автоматически обнаруживает maven и будет использовать конфигурации maven для настройки вашего проекта. Я переформатировал и удалил комментарии, изменил целевую/исходную версию java на 11 (забавно, мы можем использовать var ) и обновил maven-компилятор-плагин к 3.8.1 и maven-верный-плагин для 2.22.1 . Всякий раз, когда вы что-то меняете в POM, IntelliJ попросит вас “импортировать изменения”, нажмите на него, чтобы обновить конфигурацию проекта. Вот как это должно выглядеть:

Повторите попытку проверка mvn но на этот раз используйте меню IntelliJ maven. Любой JDK≥11 должен работать, но если у вас возникнут какие-либо проблемы, просто используйте JDK 11.

Я начинаю с этого базового архетипа maven, потому что хочу отметить, что проект GWT использует всю экосистему Java, и он использует аналогичные шаблоны, но применяется к интерфейсной разработке.

Шаг 1 различие.

2. Подтвердите это 🌈

Во-первых, измените pom.xml чтобы добавить зависимости GWT и плагин GWT Maven, который добавит некоторые полезные цели для компиляции и запуска GWT. Добавьте это в раздел зависимости:


  com.google.gwt
  gwt-user
  2.9.0


  com.google.gwt
  gwt-dev
  2.9.0

Это минимальные зависимости GWT. gwt-пользователь содержит утилиты java на стороне клиента, например интерфейс EntryPoint , который используется в GWT в качестве эквивалента static void main(args) (подробнее об этом позже). И gwt-dev содержит требования к компилятору и другим средствам разработки.

Затем вам нужно настроить плагин GWT и определить проект как gwt-приложение . Добавьте это в раздел сборки:


  
    net.ltgt.gwt.maven
    gwt-maven-plugin
    1.0.0
    true
    
      me.App
      true
    
  

И это в начале, после artifactId и версии элементов:

gwt-app

Это расширит maven, добавив конкретные выполнения GWT в жизненный цикл maven. Так, например, после добавления этого, если вы снова запустите пакет mvn вы заметите, что существуют различные новые шаги, наиболее важным из которых является тот, который запускает компилятор GWT, включая исходный код нашего проекта, и выводит окончательный JS. Обратите внимание, что сейчас это не работает, потому что мы не обновили исходный код java! Есть 2 конфигурации, имя модуля указывает на основной gwt.xml файл (объясненный позже) и модуль пропуска используется, чтобы избежать приятной, но немного “волшебной” утилиты из этого плагина, которая будет генерировать gwt.xml файл для вас, на данный момент я предпочитаю создать его вручную на следующем шаге, поэтому я просто настроил плагин так, чтобы он не создавал этот файл для меня.

Обновите проект IntelliJ, чтобы зависимости загружались и добавлялись в путь к классам проекта.

Теперь мы обновим текущий класс App , который работает в JVM, чтобы он работал на стороне клиента. Создайте Приложение реализует com.google.gwt.core.клиент. Точка входа , удалите статический основной метод и реализуйте onModuleLoad с эквивалентным кодом. Просто, верно? Это почти одно и то же, main для JVM и onModuleLoad для GWT. Содержание вашего класса должно быть:

package me.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Text;
import com.google.gwt.user.client.ui.RootPanel;

public class App implements EntryPoint {

    @Override
    public void onModuleLoad() {
        Text textNode = Document.get().createTextNode("Hello World!");
        RootPanel.getBodyElement().appendChild(textNode);
    }
}

Я думаю, что код не требует пояснений, но… да, getBodyElement возвращает тело веб-страницы, чтобы мы могли добавить Привет, мир! и посмотрите это на нашей странице.

Еще одна вещь о классе App , переместите его в клиент пакет (возможно, ваша среда разработки уже жаловалась на это, если вы скопировали и вставили предыдущий код). Это немного облегчает задачу. Обратите внимание, что приложения GWT предназначены для совместного использования кода, поэтому в вашем проекте, вероятно, появятся пакеты сервер , общий доступ и клиент . И хотя это пример только для минимального клиента, мы будем следовать этому соглашению, поэтому переместите его в клиент пакет (предупреждаю: если вы используете IntelliJ, он может изменить pom.xml < <имя модуля> от меня. Приложение для меня.клиент. Приложение после перемещения App.java для клиента пакета, но это должен быть я. Приложение

Затем создайте gwt.xml файл называется App.gwt.xml (создайте его в пакете me , а НЕ в клиенте ). Это имя должно соответствовать пакету и имени, которые мы настроили в gwt-maven-плагине имя модуля


  
  
  
  

Этот файл называется Файл модуля GWT . Это необходимо, чтобы компилятор GWT знал, какие источники должны быть скомпилированы, т. Е. GWT НЕ компилирует все, что находится в пути к классам, он компилирует только источники, указанные в source тег. Это прокомментировано, потому что модуль добавляет эти 2 строки неявно. Источник указывает, что все классы java внутри пакета {module-package}.client будут включены, и именно поэтому мы переместили Приложение внутри клиентского пакета. Модуль наследует является зависимостью, этот модуль зависит от gwt.пользователя. Пользователь модуль и Пользователь источник будут рекурсивно зависеть от других модулей. Вторая строка точка входа указывает точку входа. Поэтому, когда окончательная компиляция GWT будет загружена на веб-страницу, эти точки входа будут вызваны. Это Загрузка по модулю который мы создали в классе App . Это эквивалентно свойству манифеста основного класса для файла jar .

Наконец, создайте index.html файл в me.public пакете с этим содержимым:




GWT • Hello App

Первые 2 строки – это “сильная” рекомендация. Заголовок просто необязателен, и единственной действительно интересной строкой является скрипт . Это приведет к загрузке транспилированного кода GWT, и после некоторых шагов он в конечном итоге вызовет вашу onModuleLoad точку входа! да! Как вы можете видеть, имя файла {Имя модуля}.nocache.js . nocache – это просто простое соглашение в GWT, компилятор генерирует различные файлы, и некоторые из них содержат .без кэша. и другие содержат .кэш. . Файлы с .без кэша. никогда не следует кэшировать и .кэш. может быть сохранен в кэше НАВСЕГДА. Это делает тривиальным добавление фильтров на сервер для добавления заголовков кэша, это называется GWT perfect caching ™ .

Обратите внимание, это public/index.html – это утилита, настроенная в файле модуля GWT, но аналогично соглашению <источник/> , все модули содержат неявную <общедоступную/> строку. И компилятор GWT скопирует все из всех модулей общедоступных путей в конечный вывод компилятора. НО я рекомендую вам стараться добавлять как можно меньше в общедоступные папки. У GWT есть множество возможностей для добавления управляемых ресурсов в ваш проект, общая папка – это всего лишь капля, которую GWT копирует вслепую. Я не хочу терять вас здесь с объяснениями, но, поверьте мне, если вы добавите слишком много вещей в папку public , это может быть расценено как запах кода. В этот момент попросите о помощи (в конце этого поста я объясню, где лучше всего обратиться за помощью).

Шаг 2 различие.

3. Пакет, запуск и отладка 🔥

GWT перенес код в JS, и чтобы увидеть результат, вам нужно будет открыть его в своем браузере. Но сначала вам нужно скомпилировать и упаковать проект. Бежать:

mvn package

Это создаст необходимые файлы и поместит их в целевую папку проекта. Затем, после успеха, откройте результат на mac, вы можете использовать открыть цель/привет-приложение-ГОЛОВА-СНИМОК/меня. App/index.html в терминале. В противном случае откройте этот файл в своем браузере или перетащите файл в окно браузера. Вы должны увидеть Привет, мир! в вашем браузере.

Что здесь происходит? В index.html в меня. Папка App – это та, которую мы написали ранее в пакете public . Таким образом, это на самом деле не генерируется GWT, оно слепо скопировано с наших общедоступных ресурсов. Этот файл указывает на me.App.nocache.js которые помещаются в ту же папку компилятором GWT. Этот файл является загрузчиком GWT. Он отвечает за выбор окончательной перестановки клиента. Это называется перестановкой, потому что GWT определяет особый тип свойства компиляции, которое можно использовать для выбора между различными “реализациями”, и оно может использовать его для генерации определенных конечных результатов компиляции для всех возможных комбинаций всех этих свойств, каждая из этих комбинаций называется перестановкой (например. chrome+es – это перестановка для браузера chrome и языка испанский).

Если вы способны видеть Привет, мир! это означает, что все эти шаги были выполнены успешно. Я предлагаю открыть консоль devtools в вашем браузере и проверить сетевую панель, вы можете увидеть, что браузер загружает файл nocache , а затем загружает странный {хэш}.cache.js файл, который является фактической перестановкой. Вы можете попробовать другой браузер, чтобы убедиться, что этот файл перестановок отличается, потому что по умолчанию GWT будет генерировать определенную перестановку для каждого браузера. Это настраивается, но я опущу это в этом руководстве. Между версиями уникальным файлом, который следует проверять, является nocache , потому что если что-то изменится, это будет указывать на новые хэшированные файлы (вот почему кэш файлы могут быть кэшированы навсегда).

Это хорошо, но это не так хорошо, если вам нужно отладить или перезагрузить с небольшими изменениями. Во время разработки вы будете использовать специальную функцию GWT, называемую сервер кода . Сервер кода – это сервер, который будет компилировать и обслуживать код на лету. Вы можете запустить сервер кода с помощью mvn gwt:сервер кода , но мы собираемся использовать в этом случае цель mvn gwt: режим разработки . Хорошо, извините, это немного сбивает с толку, но здесь будут запущены 2 сервера, сервер кода и еще один причал, просто чтобы открыть index.html . Я не хочу это объяснять, потому что это немного запутанно и требует длинного объяснения. Но пока просто имейте в виду, что то, что мы действительно хотим и что мы используем, – это сервер code , и мы используем режим разработки только для того, чтобы иметь возможность открыть index.html (все это будет иметь больше смысла в будущем учебнике о серверной части). Поэтому, пожалуйста, запустите mvn gwt: devmode . В IntelliJ вы можете просто дважды щелкнуть gwt:режим разработки цель на панели maven, очень удобно!

Если вы внимательно изучите журнал, вы увидите оба сервера, сервер кода на порту 9876 и второй сервер причала на 8888. Начните с сервера кода . Откройте его в своем браузере. Пока только проверьте, что во втором пункте, где есть список модулей, вы видите свой я. Приложение модуль. Надеюсь, вы это увидите! Затем откройте другой сервер на порту 8888 (оба могут быть открыты как localhost:9876 или локальный хост: 8888 в любом браузере). Когда вы откроете сервер jetty, вы увидите каталог своих модулей, нажмите на me. Приложение/ , чтобы открыть эту папку. Это приведет к открытию вашего index.html , затем он получит me.App.nocache.js файл, но на этот раз (и это немного devmode магия) он будет использовать специальный nocache.js файл, который обнаружит перестановку, а также будет взаимодействовать с сервером кода , скомпилирует код на лету и отправит перестановку плюс исходные коды в ваш браузер. В течение нескольких секунд вы должны заметить “Компилирующий меня. Приложение” диалог, который исчезнет при успешном выполнении. Вы можете изменить сообщение привет, мир , например, удалить мир часть, и перезагрузите страницу. Это снова запустит компиляцию. Это стандартный жизненный цикл разработки, редактирование и перезагрузка.

Теперь я попрошу вас перейти в chrome. Вы можете сделать это в любом браузере, но проще объяснить с помощью одного конкретного браузера. Перейдите в devtools и откройте вкладку Источники . Теперь найдите ресурс (сочетание клавиш ctrl+p или cmd+p) и напишите Приложение чтобы найти наш класс точки входа. Вы должны увидеть файл Java в браузере, это связано с тем, что сервер кода автоматически генерирует исходные карты JS, а chrome разрешает сопоставленные источники Java и отображает их в devtools . Нажмите на RootPanel.getbodyelement номер строки, чтобы добавить точку останова, она должна стать синей, указывая на активную точку останова. Затем перезагрузите страницу. Если вы сделали это правильно, отладчик должен остановиться в этой строке, вы должны увидеть что-то вроде этого:

Это все, что вам нужно для отладки кода GWT. Но, обратите внимание, что вы можете написать много кода на чистой Java, этот код, особенно если вы избегаете конечного уровня пользовательского интерфейса, тривиален для запуска в JVM или для тестирования с помощью JUnit. GWT – это все о совместном использовании и использовании инструментов Java, поэтому, если вы разрабатываете такие инструменты, как, например, пространственный индекс, гораздо проще и быстрее тестировать, запускать и отлаживать его с помощью простой Java. А затем используйте его на стороне клиента.

4. Приправьте это 🌮

И вот тут личный подход становится сумасшедшим. Теперь я собираюсь объяснить, как добавить 2 фунта, “чистую” JS-библиотеку (Elemental 2) и “чистую” Java-библиотеку (RxJava). Я специально выбрал обе библиотеки в качестве противоположных крайних случаев. Используя “чистые” библиотеки JS, вы должны увидеть, как вы можете получить доступ к собственному JS-коду в GWT и насколько он прост и легок. И используя “чистую” Java-библиотеку, вы увидите, что в GWT вы можете использовать классические библиотеки чистой Java в браузере. Но мы не собираемся напрямую зависеть от этих 2 библиотек, вместо этого мы будем использовать этот график зависимостей:

Elemental 2 – это библиотека Google, которая предоставляет весь API браузера на Java. Уникальная небольшая проблема с этой библиотекой заключается в том, что в некоторых случаях API недостаточно удобен, в частности, для создания событий и элементов требуются приведения, что не распространено в мире Java. Итак, хотя мы будем использовать эту библиотеку за кулисами, мы будем напрямую зависеть от супер маленькой библиотеки Red Hat под названием Elemento , которая добавляет эти недостающие части. Эта библиотека представляет собой API ручной работы для элементов и события , прекрасная библиотека, которая дает нам возможности JS с безопасностью типов Java.

RxGWT – это набор утилит для использования RxJava в GWT, т. Е. такой же, как RxAndroid, но для GWT. RxGWT зависит от RxJava GWT , библиотеки тонких адаптеров GWT поверх RxJava. Да, хорошо, вы не можете напрямую зависеть от RxJava, но если вы зайдете в репозиторий, вы увидите, что есть всего несколько незначительных изменений и конфигураций, чтобы заставить его работать в GWT, почти весь фактический исходный код RxJava одинаков.

Помните мою рекомендацию; идея с этими 2 библиотеками заключается в том, что вы сможете найти На JS+RxJS проекты и миграция к Ява+RxJava с GWT, используя ваши знания Java! Это потрясающий способ привыкнуть к GWT, и есть много забавных микрореактивных проектов, которые можно улучшить!

Чтобы добавить эти зависимости, обновите pom.xml с:



  4.0.0

  me
  hello-app
  HEAD-SNAPSHOT
  gwt-app
  hello-app

  
    UTF-8
    11
    11
  

  
    
      
        com.google.gwt
        gwt
        2.9.0
        pom
        import
      
    
  

  
    
      com.google.gwt
      gwt-user
    
    
      com.google.gwt
      gwt-dev
    
    
      org.jboss.gwt.elemento
      elemento-core
      0.9.1-gwt2
    
    
      com.intendia.gwt.rxgwt2
      rxgwt
      2.2
    
    
      com.intendia.gwt
      rxjava2-gwt
      2.2.10-gwt1
    
    
      junit
      junit
      4.11
      test
    
  

  
    
      
        net.ltgt.gwt.maven
        gwt-maven-plugin
        1.0.0
        true
        
          me.App
          true
        
      
    
    
      
        
          maven-compiler-plugin
          3.8.1
        
      
    
  

Мы добавили специальную зависимость типа pom и области импорта под названием Спецификация . Это служебная зависимость, которая утверждает, что все зависимости, определенные в Спецификация будет иметь версию, указанную в Спецификация сама по себе. Это полезно, потому что мы можем получить различные gwt-xxx губы с различными версиями, и это может быть проблемой, так что это BOM утверждает, что все зависимости ядра GWT имеют одну и ту же версию.

Кроме того, мы добавили 3 новых явных зависимости, элемент-ядро , rxgwt и rxjava-gwt .

Затем перейдите к своему App.gwt.xml файл модуля и добавьте эти 2 зависимости:



Если у вас все еще работает gwt:devmode , вам потребуется перезагрузка. Существуют новые зависимости maven, и поскольку эти зависимости должны быть добавлены в путь к классам, вы будете вынуждены перезапустить его. Это всего несколько секунд, так что никаких проблем. Остановите его и снова запустите mvn gwt: режим разработки . Откройте локальный хост: 8888 и перейдите в приложение. Приложение и убедитесь, что вы все еще видите Привет, мир! в вашем браузере.

Теперь обновите содержимое App.java с:

package me.client;

import com.google.gwt.core.client.EntryPoint;
import org.jboss.gwt.elemento.core.Elements;

public class App implements EntryPoint {

    @Override
    public void onModuleLoad() {
        Elements.body().add("Hello World!");
    }
}

Круто, это гораздо менее многословно. Elements – это утилита element , она содержит все эти удобные типобезопасные API-интерфейсы элементов. Большинство типов методов Elements возвращают конструкторы, которые являются оболочками вокруг фактического типа elemental 2 . Вы можете извлечь элементаль 2 вызов типа получить() . В этот момент вы получаете доступ к API браузера практически напрямую. GWT перенесет исходный код Java в JS, но строка кода, подобная этой Dom Global.document.body.background; будет переведена в document.body.background; , почти то же самое. СОВЕТ : Навигация по исходному коду elemental 2 является хорошей стратегией для изучения того, как сопоставлять собственный API в Java GWT.

Теперь мы собираемся применить RxJava , обновить содержимое App.java к:

package me.client;

import com.google.gwt.core.client.EntryPoint;
import com.intendia.rxgwt2.elemento.RxElemento;
import elemental2.dom.HTMLElement;
import org.jboss.gwt.elemento.core.Elements;

import static elemental2.dom.DomGlobal.document;
import static org.jboss.gwt.elemento.core.EventType.mousemove;

public class App implements EntryPoint {

    @Override
    public void onModuleLoad() {
        HTMLElement el = Elements.span().style("font-weight: bold;").get();
        Elements.body().add("mouse position: ").add(el);
        RxElemento.fromEvent(document, mousemove)
                .subscribe(ev -> el.textContent = ev.clientX + ", " + ev.clientY);
    }
}

О! сообщение привет, мир было удалено 😅 ! Мы добавили span и прослушиватель событий для перемещения мыши событий на странице документа . Это довольно простой код, но с множеством приятных вещей! Elements.span() является элементом конструктором, посмотрите, как легко установить стиль и получить элемент, используя его свободный API. HTML-элемент является типом elemental 2 , что почти похоже на прямое использование API браузера. RxElemento.FromEvent является RxGWT утилита, которая объединяет элемент типобезопасные события с RxJava . Это фактический тип Наблюдаемый <Событие мыши> , возвращаемый из события , т. Е. Это Наблюдаемый конкретного типа события. Этот наблюдаемый добавит новый прослушиватель событий к каждой подписке и удалит его при отмене подписки. Последняя строка – это фактическая подписка, которая обновит элемент el span координатами клиента мыши.

В этом микро-примере мы смешиваем чистую библиотеку Java для подписки и создания событий с собственным API браузера. Это так просто, что не удивляет, но это довольно потрясающе и мощно, если вы подумаете об этом 🤯 ! На самом деле, если вы разработчик Android и у вас большой опыт работы с пользовательским интерфейсом, MVP, Dagger, RxJava и всеми этими причудливыми вещами для управления состоянием пользовательского интерфейса? Тогда это должно стать вашей отправной точкой, чтобы начать применять все эти знания для создания веб-приложений пользовательского интерфейса!

Шаг 4 различие.

Просто шучу, никакого вывода вообще, только несколько заметок о том, куда вам следует идти дальше. Надеюсь, тебе понравится. GWT – это супер мощный транспилер. Мы даже не говорили о том, как он может управлять ресурсами (JS, CSS, HTML, переводами, изображениями и т. Д.) И встраивать все это в один JS-файл. Он огромен, но даже игнорируя все эти дополнительные утилиты, просто как “простой” транспилер, его более чем достаточно, чтобы быть полезным для всех тех экспертов Java, которые хотят писать код браузера.

Если вам нравится это вступление, я постараюсь сделать какой-нибудь клиент-серверный учебник. Я действительно думаю, что приложения только для клиентов – лучшая отправная точка, но да, людям нравится идея написания клиента и сервера на одном языке, и, вероятно, почти все, кто использует GWT, используют его с этой целью. Но, конечно, этот учебник тоже будет довольно предвзятым 😬 .

Существует проект, который нужно начать с GWT с использованием подхода spring boot . Лично я предпочитаю ручной подход, как описано в этом руководстве, потому что подход spring boot добавляет множество зависимостей и заставляет вас чувствовать, что вы немного теряете контроль. Но если вам это нравится, то вам понравится этот проект gwt-boot-samples и с этого еще проще начать. В любом случае, в этом проекте есть различные современные популярные решения, поэтому, даже если вы не используете сами зависимости, вы можете вдохновиться и настроить его вручную.

Наконец, моя рекомендация по поводу обращения за помощью :

  • stackoverflow gwt – довольно очевидно, но да, лучшее место для стандартных проблем
  • gitter gwt – чат gitter, он довольно активный, если у вас нет идей или у вас есть быстрый вопрос, это лучшее место
  • группы gwt здесь много старых вопросов, также есть различные специальные группы для участников, руководящий комитет, различные классические библиотеки GWT и больше

Этих 3 мест должно быть достаточно. Но, если вы хотите найти больше вещей, может быть, какой-нибудь сюрприз, тогда перейдите в удивительный gwt где есть бесконечный список полезных ресурсов GWT, учебник, советы, видео, блоги и многое другое!

Оригинал: “https://dev.to/ibaca/modern-gwt-first-steps-509k”