Pull to refresh

Создание GWT приложения с GWT-Ext контролами, работающего на JBoss, с помощью NetBeans. Step By Step

Reading time 3 min
Views 6.5K
Решил поделиться с широкой общественностью каким образом можно создать полноценное GWT приложение с помощью NetBeans, а так же каким образом развернуть его на сервере приложений JBoss. К сожалению в сети я не нашел полного описания этого процесса(есть статьи отдельно GWT, отдельно про GWT-EXT и отдельно про JBoss), поэтому и решил собрать всё в одну кучу. Надеюсь кому-то этот гайд пригодится и послужит отправной точкой. Итак приступим.

Осторожно! Много больших скриншотов

Нам понадобятся:


Sun JDK v1.6
JBoss Application Server v4.2.3 GA
NetBeans v6.5.1
Google Web Toolkit 1.6.4
GWT-Ext v2.0.5
ExtJS v2.0.2 или extjs.com/products/extjs/download.php

Пара моментов


— В своём руководстве я буду использовать папку C:/Java. В неё я буду помещать все необходимые вещи. Советую вам поступать так же.
— Помните, что при установке переменных среды Windows XP лучше перезагрузить

Шаг 1. Установка Java


Как инсталить джаву я рассказывать пожалуй не буду. Тут всё уже разжёвано и пережевано много раз. Скажу только, что полной работоспособности нужно, чтобы в переменных среды была прописана переменная JAVA_HOME.

Шаг 2. Распаковка всех архивов и переменные среды


Архивы нужно распаковать следующим образом. Не забудьте прописать переменные среды.
Sun JDK v1.6 C:\Java\Jdk JAVA_HOME
JBoss Application Server v4.2.3 GA C:\Java\JBoss JBOSS_HOME
Google Web Toolkit 1.6.4 C:\Java\GWT GWT_HOME
GWT-Ext v2.0.5 C:\Java\GXT GXT_HOME

image
image

Шаг 3. Запуск JBoss


После распаковки идем в JBoss/bin и запускаем run.bat. Если всё прошло успешно, то мы должны увидеть следующее:
image

Шаг 4. NetBeans и установка плагина GWT4NB


После установки NetBeans нужно зайти в Tools -> Plugins. Там во вкладке выбрать плагин GWT4NB. После инсталляции плагина должно получиться следующее:
image

Шаг 5. Создание веб- проекта


image
image
image
image
image
image
image
image
image

Шаг 6. Пробная публикация проекта


Нажимаем правой клавишей на проекте и выбираем пункт Deploy. Так как JBoss у нас уже запущен, то NetBeans скомпилирует проект и самостоятельно положит на сервер. Должно получиться вот так:
image
Теперь проект доступен по следующему адресу: http://localhost:8080/SampleGwtApplication. Там будет кнопка с надписью.

Шаг 7. Учим клиентскую часть дергать серверный код. AJAX в действии


Для этого нам нужно создать сервис. Тыкаем правой клавишей по проекту.
image
image
image

После того как NetBeans сгенерит необходимые классы идем в MainModuleEntryPoint.java и там в функцию onModuleLoad пишем следующее:
image
Снова публикуем проект. После компиляции на странице проекта (http://localhost:8080/SampleGwtApplication) появится текстовое поле и кнопка. Кнопка будет отправлять полноценный аяксовый запрос к серверу. Подробности об устройстве сервисов и как они работают с клиентом читать в интернетах.

Шаг 8. Прикручиваем GWT-Ext


Первое что необходимо сделать – это подключить к библиотеками проекта GWT-Ext. Для этого тыкаем правой клавишей мыши на библиотеках проекта и выбираем «Add Library..».
image
…создаем новую библиотеку в NetBeans
image
Указываем саму библиотеку, которая у нас лежит C:\Java\GXT\gwtext.jar
image
…и документацию к ней
image
Теперь в файле MainModule.gwt.xml добавляем одну строку:
image
Теперь в коде MainEntryPoint.java мы можем использовать GWT-Ext контролы. Однако этого недостаточно чтобы всё работало. Еще необходимо положить в проект клиентские скрипты ExtJS. Для этого нужно создать в папке web папки scripts, css и images. Как здесь:
image
…из архива ext-2.0.2.zip в папку scripts нужно положить adapter и ext-all.js
image
… в папку css нужно положить содержимое ext-2.0.2.zip/resources/css
image
… в папку images нужно положить содержимое ext-2.0.2.zip/resources/images
image
…теперь подключаем эти скрипты в странице. Прописываем в файле welcomeGWT.html вот такие штуки…
image
Осталась самая малость. В коде MainModuleEntryPoint.java пишем создание GWT-Ext панели и кнопочки для неё. Точно так же можно использовать и другие контролы пэкеджа com.gwtext.client.widgets
image
Снова публикуем проект и видим результат
image
Вот собственно и всё. Спасибо за внимание.

P.S. Простите за неловкость слога и большие картинки. Время 23.41, а я еще на работе сижу. Для вас стараюсь.
Tags:
Hubs:
+37
Comments 27
Comments Comments 27

Articles