Java-практикум: GWT - алкозельцер для веб-мастера

Программист, специализирующийся на создании клиент-серверных веб-приложений, должен знать целую кучу синтаксисов. Тут тебе и HTML, и CSS, и Javascript. Это только для написания клиентской части. Если же он самостоятельно пишет еще и сервер, то не обойтись без PHP, или CGI на Perl, или JSP/Java Servlets, или ASP или... Вариантов, короче говоря, много, суть одна: либо нужно привлекать группу товарищей (кто-то специализируется на клиентской части, кто-то на серверной), либо учить всё самому. Недостаток первого варианта - нескольким людям бывает трудно найти общий язык (да и затраты - огого). Недостаток второго - программист должен обладать высокой квалификацией сразу в нескольких областях, каждая из которых уже сама по себе заслуживает углубленного изучения. Но не стоит отчаиваться! У нас есть волшебный Серёга Брин - один из основателей Google, создатель огромного множества удобных сервисов. Пару лет назад в недрах возглавляемого им учреждения появился фреймворк GWT, позволяющий писать и клиентскую, и серверную части на одном и том же языке. Угадайте с трех попыток, на каком? Ну конечно же на Java!

Java, насколько я понимаю, пользуется в недрах Google респегтом и уважухой. Одного сотрудника этой компании спросили: есть ли в их внутренней сети сервисы, написанные на PHP? Он долго морщил репу и наконец сказал, что да, где-то работает Богом забытый PHP-скрипт, через который они пиццу заказывают. Остальное, надо полагать, на Java. Этот же синтаксис Google выбрал и для своей мобильной платформы Android. Ну и GWT (Google Web Toolkit), о котором пойдет речь, тоже основан на Java-синтаксисе, причем очень строгом, "всамделешном", с возможностью создания классов, использования библиотек.

Язык Java базируется на принципе "Написано однажды - работает везде". Он описывает преимущественно такие сущности, которые можно создать на любом устройстве, оснащенном микропроцессором: файлы, сокеты, процессы, потоки, строки, наиболее общие элементы графического интерфейса. Программы, написанные на Java, компилируются в псевдокод, за адаптацию которого к конкретной платформе отвечают "виртуальные машины". Java-программист может не задумываться, например, о том, чем файлы в Windows отличаются от файлов в Unix.

Гуглевцы дотумкали, что принципы Java можно распространить и на браузеры. Зачем программисту ломать голову над тем, как его веб приложение будет выглядеть под Internet Explorer'ом, под FireFox'ом, Oper'ой?  Пусть лучше сосредоточится на бизнес-логике, а специфику поведения кода под разными браузерами возьмет на себя "виртуальная машина".

Трудности с адаптацией веб-кода к различным браузерам не так безобидны, как кажутся. В свое время автор этих строк на годы забросил веб-программирование из-за того, что один и тот же проект пришлось практически реализовывать дважды - под Internet Explorer и под Netscape. Конечно, это было в начале 2000-ных, когда война браузеров была в самом разгаре, но и сейчас она далеко не закончена. И сегодня написание сколь либо сложного приложения, которое одинаково смотрелось бы под тремя основными браузерами, требует изрядного опыта и знаний.

GWT хорош в первую очередь тем, что берет на себя проблему совместимости кода с различными "обозревателями Интернета". Кроме того,  GWT обладает следующими преимуществами:

• требует знания только одного синтаксиса - Java (ну и чуть-чуть HTML/CSS). Прочие AJAX-фреймворки (а GWT это ни что иное, как разновидность AJAX) требуют знания HTML, CSS и Javascript по полной программе;
• корректно работает с национальными языками (при использовании встроенного пакета i18n);
• обеспечивает выполнение удаленных процедур (RPC);
• ужимает генерируемый Javascript-код за счет механизма обфускации (фукнции и переменные с именами типа getSomthing(), nifigasebefamilia преобразует в безликие и короткие a(), b). При этом код становится еще и нечитаемым, что удобно в случаях, когда нужно сохранить в относительной секретности какое-нибудь ноу-хау.

Есть у GWT и недостатки:

• прилагаемые к фреймворку средства разработки диктуют (э-хе-хе...) собственную структуру каталогов и скриптов. Это, впрочем, не сложно преодолеть;
• прилагаемое средство отладки - GWT-shell - не всегда адекватно отображает результат (по крайней мере я для себя решил, что этой встроенной в фреймворк усеченной версией Mozilla пользоваться не буду и просматриваю результат прямо в браузере, что дольше, но надежнее);
• проекты компилируются довольно медленно (0,5-2 минуты);
• результирующий код абсолютно непонятен для человеческого восприятия и что-то подправить можно только в исходном Java-коде, перекомпилировав его затем заново. Впрочем, это не недостаток, а особенность, перерастающая порой в достоинство (см. выше).

Приступим теперь к практике.

===============================================================
package com.michaelbelyakov1967.projects.GWT_TUTORIAL.client;

import com.google.gwt.core.client.*;
import com.google.gwt.user.client.*;
import com.google.gwt.user.client.ui.*;

public class North implements EntryPoint, TabListener{

 private String[] links;
 private ConstantsNorth cnst;

 public void onModuleLoad() {
  cnst = (ConstantsNorth) GWT.create(ConstantsNorth.class);
  links = cnst.getLinks();
  String[] tabs = cnst.getTabs();
  TabPanel tp = new TabPanel();
  for(int i = 0; i < tabs.length; i++)tp.add(new HTML(""), tabs[i]);
  tp.selectTab(0);
  tp.addTabListener(this);
  RootPanel.get().add(tp);
 }

 public void onTabSelected(SourcesTabEvents w, int n){
  Window.open(links[n], "center", null);
 }

 public boolean onBeforeTabSelected(SourcesTabEvents w, int n){
  return true;    
 }    
}  
===============================================================

Вот код на чистейшей Java, "рисующий" в браузере столь модную нынче панель с вкладками (TabPanel). Щелкаешь по одной из них - внизу (в данном случае - в отдельном фрейме) появляется какая-нибудь страничка с соответствующим контентом. Те, кто имеет опыт работы с AJAX, могут прикинуть, сколько бы понадобилось HTML/Javascript/CSS-кода, чтобы получить такой же результат.

Попробуем превратить этот код в нечто работающее. Вот исходные данные. Все они  могут быть изменены в соответствии с вашими предпочтениями, включая ОС (это может быть и Windows).

• ОС Linux Slackware 12.1;
• Локаль: ru_RU.CP1251;
• Каталог-лаборатория: ~/.3f-lab;
• Каталог для готовых классов, ресурсов и библиотек: ~/3f-lab/_classes;
• Каталог с проектами: ~/.3f-lab/_projects;
• Сборщик проекта: Apache ant;
• Инструменты программирования: JDK, GWT, консоль, редактор Vim, Midnight Commander;
• Название проекта: - GWT_TUTORIAL;
• Версия JDK: - 1.6;
• Версия GWT: - 1.5.

Создаем пустые каталоги для нового проекта:

mkdir -p ~/.3f-lab/_projects/GWT_TUTORIAL/{client, output}

В каталог ~/.3f-lab/_projects/GWT_TUTORIAL/output будем помещать готовый результат. В каталоге ~/.3f-lab/_projects/GWT_TUTORIAL/client создаем файл North.java, в который помещаем вышеприведенный код. Почему файл (и содержащийся в нем класс) называется North? Потому что я использую фреймовую компановку, в которой фреймы удобно называть по сторонам света: самый верхний "северный", слева - "западный", справа - "восточный". Не мной придумано.

Помимо самого исходника, в каталоге client разместим подкаталог north, в котором поместим минималистичные HTML и CSS-файлы, относяшиеся к классу North. Ведь GWT - это разновидность AJAX, то есть сочетание HTML, CSS и Javascript. Поскольку речь идет о браузерах, совсем без HTML обойтись не получится, хотя сам файл разметки может содержать всего 5 строк.

Проект содержит также файл ресурсов - ConstantsNorth.txt. В нем лежат строковые константы, необходимые для того, чтобы надписи на нашей страничке были написаны по-русски. Осталось создать и отредактировать в каталоге ~/.3f-lab/_projects/GWT_TUTORIAL/client файл North.gwt.xml. Он содержит всего пару строк, в которых описываются некоторые параметры для сборки "класса".

Кто-то может сказать, что слишком много файлов для такой несложной задачи. Может и так, но если увеличить сложность задачи в 10 раз, количество файлов не изменится. А если и изменится, то с очень хорошими показателями масштабируемости. Поэтому советую не поддаваться панике, разобраться с назначением файлов и убедиться в гибкости и эффективности GWT.

Теперь готовим, так сказать, "бинарное оружие". Дело в том, что фреймворк GWT не только превращает Java-исходники в AJAX-приложения, но и сам написан на Java. Поэтому скачиваем GWT для своей ОС. Потрошим его, извлекаем jar-архивы: gwt-user.jar, gwt-dev-linux.jar. Помещаем их в каталог ~/.3f-lab/_classes.

Процесс сборки подробно описывать не буду, он понятен из build.xml, прилагаемого к проекту (все файлы проекта я выкладываю вложением к данной статье). Так что достаточно запустить команду ant - и в каталоге output мы получаем совокупность html и js файлов, делающих то, что нам надо. Может у них и не очень удобоваримые имена, зато работают адекватно, причем под любым из трех доминирующих браузеров.

GWT_TUTORIAL.tgz