войти зарегистрироваться

Google Web Toolkit whois

индекс
0,00

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

Решил поделиться с широкой общественностью каким образом можно создать полноценное 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, а я еще на работе сижу. Для вас стараюсь.

комментарии (24)

  • а пробовали gwt + gae/j?
    • Ухты! А я даже и не знал про такую штуку как Google App Engine. Обязательно поковыряю. Спасибо Вам большое.
  • Был опыт прикручивания spring+maven+gwt+gxt+iBatis. Такое и за 20 шагов не описать :-)
    За статью спасибо. надо попробовать будет
    • Вообще изначально я стремился сделать не NetBeans-проект, а Maven-овский проект. Но не получилось. Из-за сложносей с плагином для GWT пришлось выбрать вот такой вариант.
      • да я тоже тот плагин не асилил, такое впечатление, что нечто тяжелей хелловорда на нём завести почти нереально. (частое «there is no way to do it» в списке рассылки плагина тому в подтверждение).

        сейчас думаю еще раз попробовать завести это всё, но для руления gwt использовать ant, благо это maven умеет.
        • по поводу плагина… пришлось пару дней с бубном потанцевать :-) и заработал. И hosted mode тоже. Сейчас у меня gwt+maven+gxt и все это под Idea
          • надо бы попробовать идею поближе
        • самому нравиться ant, но для больших проектов maven больше подходит. Особенно если модульная структура.
  • Я просто оставлю это здесь.
    • Я вас понял. Когда в следующий раз буду писать пост — сделаю png
    • концептуальней было бы сделать эту картинку в жпг
  • Обязательно поковыряю!
  • Связка gwt-ext + GWT1.6 — рабочая или только для примера?
    Потому что gwt-ext поддерживает только 1.5.
    • Вообще у GWT-Ext'шников на сайте заявлено, что поддерживается 1.5.3. Но я попробовал и вроде бы работает.
    • Разрабатываю на gwt 1.6.4 и gwt-ext — полет нормальный
  • Спасибо! Как раз начинаю с этим разбираться ))
  • Мне кажется получилось бы проще если бы это был скринкаст.
    • Хорошая мысля приходит опосля. Когда я начал вставлять скрины меня тоже осенило, что было лучше сделать скринкаст. Но было уже поздно. :-)
  • Не плохая статья, но скорее для студентов.
  • "— Помните, что при установке переменных среды Windows XP лучше перезагрузить"
    не согласен. Просто надо перезапустить приложение, в котором вам нужна новая переменная среды, так как переменные среды сохраняются для процесса при его запуске.
  • У gwt-ext на сайте нашел вот такой топик:
    gwt-ext.com/forum/viewtopic.php?f=13&t=3465&st=0&sk=t&sd=a

    Вкратце, они прекращают разработку новых компонентов, и предлагают пользователям переходить на SmartGWT.
    Кому-нибудь про это известно? И работают ли они над своим проектом?
  • Возможно будет интересен учебник по сходной тематике: Eclipse + GWT + ExtGWT — ru.wikibooks.org/wiki/%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0_%D1%81_%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%BE%D0%B9_ExtGWT
  • A PHP на сервере использовать можно?
    Т.е. обычный php/mysql-хостинг + gwt
Только авторизованные пользователи могут оставлять комментарии. Авторизуйтесь, пожалуйста.