В этой статье я бы хотел рассказать о фреймворке Google Web Toolkit (GWT, а точнее о его расширении – Smart GWT, но сути не меняет). Для начала немного теории.

Что же вообще такое фреймворк? Далеко ходить не будем, цитата из википедии: «Каркас (англ. framework) — в информационных системах структура программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта. В его состав могут входить вспомогательные программы, библиотеки кода, язык сценариев и прочее».  Данное объяснение как нельзя лучше описывает данный термин. По сути – это набор из множества классов, которые позволяют решать различные задачи с более высокой скоростью за счет экономия времени (избавляемся от привычки создания очередных «велосипедов»).

GWT (Google Web Toolkit) – один из фреймворков, предназначенных для написания приложений на Java. И не простых приложений, а именно ориентированных на веб.

У опытных Java-программистов может возникнуть уместный вопрос: зачем нужен некий фреймворк для разработки веб-приложений, если уже и так есть возможность создания апплетов (если приемлемо исполнение на стороне клиента) и сервлетов (если необходимо исполнение на стороне сервера). Действительно, зачем? Есть очень весомый нюанс, который собственно и является сутью фреймворка. Google Web Toolkit не только предоставляет набор классов, упрощающих разработку, но и еще способен «скомпилировать» проект в набор JavaScript и HTML файлов. Уже интересно. Пишем на Java, а на выходе получаем оптимизированные скрипты. Преимущества такого подхода на поверхности: во-первых, для запуска такого приложения уже не требуется наличие Java-машины и во-вторых, добиваемся почти 100%-ой кросс-платформенности (JS в наше время поддерживают все современные бразуеры) и кросс-браузерности (здесь вопрос, конечно, спорный, но в большинстве своем именно так и есть).

Smart GWT – это довольно внушительная пристройка к стандартному GWT со своим набором классов. Попробуем на его основе создать первый простенький проект.

Во-первых, нам потребуется среда разработки. Eclipse – оптимальный вариант. Так как я тестировал фреймворк в версии 3.5, то в дальнейшем все ссылки будут относиться именно к этой редакции среды.

http://www.eclipse.org/downloads/packages/eclipse-classic-350/galileor — ссылка для скачивания Eclipse.

Среда кросс-платформенная: выбираем нужную ОС и устанавливаем.

Для интегрирования фреймворка GWT в среду необходимо установить плагин. Заходим в пункт меню Help -> Install New Software. Нажимаем на Add и вводим следующий url: http://dl.google.com/eclipse/plugin/3.5 (вместо 3.5 можно вписать другую версию, подробнее http://code.google.com/intl/ru-RU/eclipse/docs/download.html).

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

После перезапуска в меню File -> New должен появиться новый пункт:  Web Application Project. Выбираем его. Делаем настройки, как на скриншоте ниже и жмем Finish.

Создастся проект с минимальным набором файлов. В него входят основные конфигурационные xml-файлы, а также несколько Java-классов со стартовым приложением. Так как мы хотим написать свое, а не разбираться в чужом, то эти классы нам не нужны. Удаляем из проекта файлы GreetingService.java и GreetingServiceAsync.java.

Теперь перейдем к конфигурации нашего проекта. Перво-наперво, подключим к нему библиотеки Smart GWT. Скачиваем их http://code.google.com/p/smartgwt/downloads/list, далее щелкаем правой кнопкой по значку проекта и выбираем properties. Далее JavaBuildPath и во вкладке Libraries нажимаем на кнопку Add External JAR’s.

Идем в папку, в которую были закачаны библиотеки и выбираем два соответствующих .jar файла. Далее идем в Google -> Web Application и кнопкой Add добавляем наши библиотеки.

Теперь необходимо сделать корректировки в конфигурационных файлах.  Выбираем файл YourGWTApplication.xml (YourGWT – имя вашего проекта) и добавляем туда строчку:

<inherits name='com.smartgwt.SmartGwt'/>;

Полный листинг файла:

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='firstgwtapplication'>
  <inherits name='com.google.gwt.user.User'/>
  <inherits name='com.smartgwt.SmartGwt'/>
 
  <inherits name='com.google.gwt.user.theme.standard.Standard'/>
 
  <entry-point class='com.myprog.client.FirstGWTApplication'/>
 
  <source path='client'/>
  <source path='shared'/>
 
</module>

Далее выбираем файл web.xml (находится в /war/WEB-INF), и убираем из него лишнее. Листинг файла:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app     PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"     "http://java.sun.com/dtd/web-app_2_3.dtd">
 
<web-app>
 
  <!-- Default page to serve -->
  <welcome-file-list>
    <welcome-file>FirstGWTApplication.html</welcome-file>
  </welcome-file-list>
 
</web-app>

И наконец открываем файл YourGWTApplication.html и приводим его к следующему виду:

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="FirstGWTApplication.css">
 
    <script type="text/javascript" language="javascript" src="firstgwtapplication/firstgwtapplication.nocache.js"></script>
  </head>
  <body>
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
        <noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
 
    </noscript>
  </body>
</html>

Ну и теперь перейдем к созданию нашего приложения. Открываем файл YourGWTApplication.Java, удаляем из него созданный шаблон (за исключением основного класса с методом onModuleLoad). Напишем простенький код, который отобразит в браузере кнопку и по нажатию выдаст MessageBox.

package com.myprog.client;
 
import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
 
public class FirstGWTApplication implements EntryPoint {
 
	public void onModuleLoad()
	{
		IButton button = new IButton();
		button.setTitle("Click!");
 
		button.addClickHandler(new ClickHandler(){
 
			@Override
			public void onClick(ClickEvent event)
			{
				SC.say("Hello World! :)");
			}
 
		});
 
		button.show();
	}
}

Для того чтобы посмотреть результат выполнения приложения нажмите на кнопку Run (располагается на основной панели инструментов). Справа появится список с url, который нужно открыть в браузере.

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

1. http://www.smartclient.com/smartgwt/showcase/ (демонстрация различных возможностей фреймворка со всеми сопутствующими исходными кодами)
2. http://www.smartclient.com/smartgwt/javadoc/ (документация)