В GWT есть два режима запуска приложения. Вы можете запустить режим разработки или скомпилировать приложение и развернуть его на веб сервере для тестирования.
В Dev mode режиме JVM будет выполнять весь ваш код, и плагин в браузере будет связывать Java код месте с Javascript кодом. Это очень медленно, особенно для приложений как игры, где такое использование будет не пригодно. Однако, это был единственный способ для правильной отладки GWT приложения. В режиме разработчика вы не будете обнаруживать ошибки, если только скомпилируете Javascript. Потому что в режиме разработчика вы можете полностью использовать Runtime библиотеки. Когда происходит компиляция в Javascript, ваше приложение может только рассчитывать на GWT библиотеку. Чтобы убедится в том, что вы не используете что-нибудь, что не поддерживается в GWT, вам приходится компилировать приложение таким образом. Плагин режима разработчика предъявляет некоторые требования к браузеру, который может быть вести себя немного странно. Новая версия браузера часто требует новой версии плагина, которая не может быть сразу доступна для GWT.
В режиме компиляции или продакшен режиме, ваш Java код компилируется в Javascript GWT компилятором. Это занимает довольно много времени в зависимости от размера Java кода. Кроме того, когда приложение скомпилировано, вы не можете больше отлаживать его. Сгенерированный Javascript код обычно не читабелен для человека.
В super режиме разработки сервер компилирует ваш Java код в Javascript код на лету. Он следит за изменениями в вашей директории исходного кода и динамически скомпилирует заново любые сделанные изменения. Такая компиляция занимает гораздо меньше времени, чем первоначальная. Кроме увеличения скорости компиляции, код сервер предоставляет маппинг исходников. Это мета-данные, которые говорят браузеру какая строка в Javascript коде соответствует строке в оригинальном исходнике Java кода. Этот механизм так же используется для других Javascript компиляторов. Вы можете затем отлаживать ваш Java код в браузере без плагинов.
Начните с создания проекта с помощью setup-ui и замет загрузите его в Eclipse. Следуйте статье, первоначальный вариант настройки выглядит так:
![Первоначальная настройка HTML проекта](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisB4btt8_ghZLBibKsMLt25bS3_6WldlSTx3_NM6u7wwMe4WbSmrNM6DWggyTByOKA4hwlzd2qga-b8TGm1q2onTsK440CoWoC9z47hy1SouHmMstH3n4VEzC9_7QbjsPNIjiWF7mVrLnz/s1600/html-project-initial-setup.png)
Все изменения будут происходить в HTML проекте.
Изменение GWT.xml файла
Сначала нужно изменить параметры компоновщика (linker) в gwt.xml файле HTML проекта, расположенном в html/src/your/package/. Вы должны увидеть что-то вроде этого:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit trunk//EN" "http://google-web-toolkit.googlecode.com/svn/trunk/distro-source/core/src/gwt-module.dtd">
<module>
<inherits name='com.badlogic.gdx.backends.gdx_backends_gwt' />
<inherits name='MyGdxGame' />
<entry-point class='com.me.mygdxgame.client.GwtLauncher' />
<set-configuration-property name="gdx.assetpath" value="../my-gdx-game-android/assets" />
</module>
Нам нужно добавить три новых элемента, указать компоновщик, что мы игнорируем скрипт теги и что включено перенаправление режима разработки (это поможет убедиться в том, что сервер сможет потом внедрять скомпилированный Javascript в HTML). Измененная версия выглядит следующим образом:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit trunk//EN" "http://google-web-toolkit.googlecode.com/svn/trunk/distro-source/core/src/gwt-module.dtd">
<module>
<inherits name='com.badlogic.gdx.backends.gdx_backends_gwt' />
<inherits name='MyGdxGame' />
<add-linker name="xsiframe"/>
<set-configuration-property name='xsiframe.failIfScriptTag' value='FALSE'/>
<set-configuration-property name="devModeRedirectEnabled" value="true"/>
<entry-point class='com.me.mygdxgame.client.GwtLauncher' />
<set-configuration-property name="gdx.assetpath" value="../my-gdx-game-android/assets" />
</module>
Копирование SoundManager Javascript файлов
В качестве аудио для GWT используется SoundManager2. Эта библиотека имеет два Javascript файла, которые нужно включить в проект. С нормальным компоновщиком, они автоматически включаются, однако xsiframe компоновщик не делает этого. Чтобы исправить это, нужно поместить файлы в war директорию и загрузить их вручную в index.html файле.
Положите эти два файла в project-html/war директорию, прямо рядом с index.html файлом. Должно выглядеть так:
![расположение SoundManager-setup.js и SoundManager2-jsmin.js в libGDX GWТ проекте](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-fPSDR3L2ghGr-fZ1gwBlKO5Kzc-N8Gns1Gd7eUwn8-2mYg8CQcj9TARIzxUGlZQzVsCmgBCf-FIU1dGj6DkVc4Gn4vWpEqNuluXHkgn168I2i8WlZRk_wYN8T_lYnLgxjqds34URrC5k/s1600/project-html-soundmanager.png)
Настройка и запуск сервера
Чтобы запустить сервер, проще всего создать в Eclipse новую конфигурацию запуска. Перейдите в Run -> Run Configuration..., затем создайте новую Java Application конфигурацию запуска.
Дайте конфигурации запуска соответствующее имя (mygame code server), и в качестве проекта установите ваш HTML проект. В качестве основного (main) класса укажите com.google.gwt.dev.codeserver.CodeServer. Этот класс отвечает за компиляцию кода и обслуживание браузера.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVnUogEZHH_eb36dZMz6knrN_GzDonYOa1rvVyMdk9Vd2QtZ2lcdU_5GlVmMLHI_w5sWwEL0yG1uE7i7c4aJRGIniNG5likLDU8qbww8FXV_Z5gFOOw2yaYDUbL-d1ib9tmtFSYexHe_8Y/s1600/codeserver-configuration.png)
Класс находиться в jar файле GWT SDK, поэтому нужно добавить его в claspath конфигурации запуска. Перейдите во вкладку Classpath, выберите User Entries, затем нажмите кнопку Add External Jars
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgenf8VDnmq94xglMkU03n5RvxcTcM-ySP14ET4xbClNGEvb1_E1lrWEJC_UcjB0A5ceTTk_t6eSlzsCgIVd8JWVvuG9Xn7qqHGqbU2w-RY2b7nw4R-NXKbVkBQiX8TukMIlKkEllfSQMtT/s1600/classpath-user-entries.png)
Вы можете найти gwt-codeserver.jar файл в установочной директории Eclipse.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuuzA4WxEl-Ud_2TNAlJJf5o2RHump13bc4aKbgLC33mb0z2-0rHinEDQn17k8wxU9cuMESjZiD3o2zP3KjbA9z1GvOQVzJMGjHJnxym_pEjTvAywP7y66Fjgs9-EOlVT4_l35QceubvVI/s1600/eclipse-gwt-codeserver-jar-file.png)
Наконец мы должны указать аргументы для сервера. Он хочет знать, где находится наши исходники и GWT модуль для компиляции. Нужно указать ему gdx-sources.jar, gdx-backend-gwt-sources.jar, src директорию основного проекта и src директорию HTML проекта. Сервер не работает с jar файлами, поэтому нужно распаковать их в соответствующие директории (project-core/libs/gdx-sources.jar, project-html/war/WEB-INF/libs/gdx-backend-gwt-sources.jar), конечный итог:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7RhnOVid1okJtLU6UmrAMMFHRO0dztregu1dRG_ePKEbwHNgh7MO9PyYMH8q85wWB7vQBtk30nDzEiIGOzJAMYlbX-b1hcSG30GGwlJhJWtnbF6BmDHC1joIGdJiusjUo8SwyfjgpfzXm/s1600/code-server-jav-files.png)
Теперь мы можем указать аргументы конфигурации запуска, HTML проект, gdx GWT back-end, gdx исходники и исходники основного проекта:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqgTtWl-WAdLg3HPlbEq_4igTe1HUgLkRZ2rPwdpecmD5JVAoWbjohwvh_J1SP6AMQOu8Xc7z6u8GTDbhG2Wr63mjzzJqxr1be5qub7jdufcjkYnYTDVSFfjPCz0-c6mUumddwvwM5jKjT/s1600/arguments-for-run-configuration.png)
Нажмите Apply и затем Run, после 20 секунд вы должны увидеть это:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCNzMnGL3yorWQKT_hxYJChKiX0Npw3mINiTJv_1Fgui2ZNw3X1XbwSq60QWKMXo8eKaalVcplL12Pt0eptcVqadR0OQqv89bfJciiwNG01pug5PvTuww0Wj3hPHE5ZX386sf66KOH9gsD/s1600/html-project-console.png)
Нажмите на ссылку в нижней части консольного вывода, которая откроет браузер и покажет это:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqsR5MPL9JtiRdYGsi3z5cNw2eAo4cHCGJgonkQma6EM_Pj6MOeXG423f4yVWjAXoGF9TCsnwKaBTAzl3ohT67Kw7yPi5trQPjMObU68GdigA56PPHHSTT5rir-0Vq7o-NmNVlBsvzOeoQ/s1600/gwt-code-server.png)
Перетащите ссылку Dev Mode On в закладки для использования в панели закладок (уже сделано на рисунке выше). Нам нужно будет нажать на закладку позже.
Теперь у нас есть настроенный и запущенный сервер. Он может быть просто запущенным во время написания кода игры. Вам нужно будет повторить установку для каждого вашего нового проекта.
Запуск приложения в super режиме разработки
Теперь самое интересное. Сервер только выполняет маппинг исходников и Javascript код. Нам нужно еще разместить index.html и asset файлы в project-html/war директории через сервер. Можно использовать Mongoose в project-html/war директории. Он будет обслуживать контент war директории по адресу http://localhost:8080/.
В качестве альтернативы можно запустить HTML проект как мы делали в режиме разработчика (нажмите правой кнопкой мыши на проекте, Run -> Web Application, нажмите на URL в окне режима разработки) URL обычно бывает вроде этого http://127.0.0.1:8888/index.html?gwt.codesvr=127.0.0.1:9997, просто удалите часть после ? до самого конца http://127.0.0.1:8888/index.html
Как только вы открыли index.html в браузере, вы увидите это:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibiEYNWXhSycwrrM_YdmTMStMS-x98ILj9Lb-GcpT1OtI4nvm0xA7c-HuoZqBNDcDYZAtq3G3uJoyEg-ibAvYsF-qACVm2_3u_MmJfYYbjCKc81N5N_M9c5J2C3geaUcZvhIvn2Wp6rsJE/s1600/gwt-server-greed.png)
Нажмите кнопку OK, затем нажмите на "Dev Mode On" закладку, ранее добавленную на панель закладок браузера. Вы увидите это:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgekodze6QhjjNUSUEi923nIKyLbMa9vAXaeQCeBfaSheBhYyWdit75IDoSNuEVpaE9WHxDk60_RmLFIgClh6BYit7jW8eFySthWJcRRVkmS7YrTjQ0qHYPdQri7_nMvOkVu8EgB5jNVh8a/s1600/dev-mode-on.png)
Нажмите на кнопку compile, которая сообщит серверу скомпилировать все Java файлы в Javascript и внедрить результат в веб сайт. (Посмотрите в консоль сервера в Eclipse, если вы получили сообщение out of memory, добавьте VM аргумент вроде этого -Xmx1024m в конфигурацию запуска сервера). После компиляции вы увидите тот же диалог как наверху, просто проигнорируйте его. Сейчас ваша игра запущена в браузере.
Отладка
Теперь магическая часть. Вызовите инструменты разработчика в вашем браузере. Если вы используете Chrome браузер, нажмите F12 или нажмите правой кнопкой мыши на сайте и нажмите "Просмотр кода элемента (Inspect Element)". Вы увидите это:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5EIgLB8cRiemYefcRDLIKXDBTEOdDfbU4P-EpRdmMbecbK-hICm-wJJuw51SyjKGbefuyM4pIzHrBixSgC6stp1v8jxc66utQ5obD5V9iyBBj-XecC8yZN4yewVdQOfwVKeFpIGQ0RtHD/s1600/inspect-element.png)
Нажмите на Source, затем нажмите на "Show Navigator" кнопку.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJEopfrd5NuiG_zKLuCWVgYyOcHLGpp7v_8KCJ3dZe0Q_LIrSEZxo66IDxFRB6IdnQv0S2PHHMJijGlYgX1FnfyXFEaTaklORMy2WPuir77GtspUABsaZ7bvP8j4w-3Ohz7SPDO3riUOsk/s1600/show-navigation.png)
Вы увидите такой вид, раскройте записи под localhost:9876 и здесь увидите ваш Java код. Выберите одну из ошибок, например ApplicationListener и установите break point, например, так:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuDMDz4FN3ptgMPwOPrxSgbQ_xhYdVDVJCK3hmEyTrwXL-oQX0xM-A_5GsJ8qv4dp8tYzfhyphenhyphen09vGm1jhimpJVlRVwvRvRGTQig-5O5A_k_rk3pkqYurxE4T-4rxK0u9mr13KqNbMiP6S2F/s1600/libgdx-gwt-javascript-break-point.png)
Теперь вы можете проверять значения переменных, смотреть стек вызовов, делать шаги вне/внутрь и так далее.
Если сделали изменения в исходных файлах, просто нажмите на "Dev Mode On" закладку, нажмите Compile и все перезагрузиться.
Это super режим разработки. Надеемся, что GWT команда сделает интеграцию лучше, так как установка немного запутанная.