Пишем сайт на GWT: Часть 1

Добрый день дамы и господа,

На хабре есть не так много статей на тему GWT (Google Web Toolkit) и в большинстве своем написаны они в ключе «какая это бяка, ничего не умеет, ничего не понятно». Кроме того, как показывает мой опыт, большинство программистов о GWT вообще ничего не слышали, а те кто слышал, думают, что больше чем на „Hello World“он не способен. Я постараюсь показать вам, что с помощью этого замечательного Фреймворка можно делать такие вещи, которые большинству JavaScript программистам просто не по зубам. 

Перед началом небольшое отступление, т.к. вопрос «а зачем?» обязательно прозвучит. Этот сайт я написал на GWT, т.к. у меня и выбора то не было. С HTML,CSS, PHP и JavaScriptом я знаком(был) весьма поверхностно( как собственно и большинство Java-программистов), а вот идея и желание были. А потому использовал я что имел и получилось вроде весьма не плохо.

Посмотрите на этот сайт. Да это не шедевр, но он показывает, что GWT может все, что может JavaScript и даже больше. Почему больше? Ответ на этот вопрос полностью совпадает с ответом на вопрос: «почему С++ может больше чем Assembler?». На эту тему я предлагаю подискутировать в комментариях. А мы возвращаемся к GWT. Нет ничего лучше( мое стойкое убеждение), чем объяснять что либо на примере, а посему я предлагаю вам препарировать этот сайт.

Итак, начали

Вешаем слушателей на элементы

Итак, любое GWT приложение состоит из как минимум одной HTML-страницы и кучи яваскриптов. Посмотрим на эту самую страничку. Как не сложно догадаться, все самое интересное будет происходить в диве „ content“. Весь хедер и футер сделаны хардкорно, т.е. статически, и по существу к GWT никакого отношения не имеют(выключите JavaScript и поймете о чем я ). Но вот клики на кнопки обрабатывает GWT. Как это сделано? На каждый див(кнопку) вешается слушатель:

final Element element = DOM.getElementById("homeSite");

        DOM.sinkEvents(element, Event.ONCLICK);

        DOM.setEventListener(element, new EventListener() {

            public void onBrowserEvent(Event event) {

                if (DOM.eventGetType(event) == Event.ONCLICK) {

                    // наша логика

                }

            }

        });

Вот и все, вот так просто. Я думаю в этом коде все понятно, может быть только за исключением строки:

DOM.sinkEvents(element, Event.ONCLICK);

Эта строка обязательна, т.к. говорит браузеру, что с этого момента этот элемент реагирует на клик. Если эту строку выкинуть, то слушатель сигнала о событии не получит и ваша логика, соответственно, обработана не будет. Эту мелочь надо просто знать, как собственно, везде и всегда.

Загрузка статического HTML-файла.

Read more: Habrahabr.ru

QR: 

Posted via email from Jasper-net