Создание проекта

Давайте начнем, создадим директорию куда положим наш GWT проект. Создаем директорию с именем StockWatcher под главной директорий GWT (gwt-windows-1.4.60). Создавая наш проект мы будем использовать утилиты командной строки, которые поставляются с GWT. Эти утилиты генерируют файлы и поддиректории необходимы для старта.

Создание Eclipse проекта с projectCreator

Если вы используете Eclipse, то запустите первой утилиту projectCreator. Если вы не используете Eclipse, то переходите к следующему пункту.
Утилита projectCreator генерирует Eclipse проект нашего приложения. Откройте командую строку и перейдите к каталогу StockWatcher, который вы создали. Запустите команду:

projectCreator -eclipse StockWatcher -out StockWatcher

После того как утилита отработает, появится новый подкаталог StockWatcher, с подкаталогами src для исходных текстов, и test для модульного тестирования, а так же файлы Eclipse (.project и .classpath).

Создание GWT проекта с applicationCreator

Следующая утилита applicationCreator сгенерирует минимальное приложение GWT. Утилите необходимо указать полное имя главного (входной точки, оно же main класс) класса. Используйте GWT рекомендации структуры проекта. Данный класс всегда должен быть внутри под пакета client. Для приложения StockWatcher имя нашего главного класса будет: com.google.gwt.sample.stockwatcher.client.StockWatcher.

Утилита applicationCreator может также с генерировать конфигурационный файл Eclipse для запуска режима отладки.

Укажите флаг -eclipse следующий перед имением Eclipse проекта.

В командной строке, перейдите к каталогу StockWatcher. Если вы используете Eclipse, выполните команду:

applicationCreator -eclipse StockWatcher -out StockWatcher com.google.gwt.sample.stockwatcher.client.StockWatcher

Если вы используете другую IDE, то опустите флаг -eclipse и имя проекта.

applicationCreator -out StockWatcher com.google.gwt.sample.stockwatcher.client.StockWatcher

Теперь загляните во внутрь директории StockWatcher. Вы уведите что applicationCreator сгенерировал два скрипта: StockWatcher-compile и StockWatcher-shell. Эти скрипты помогут для распространения (deploy) и запуска приложения в режиме хоста (host-mode).

Тестирование генерированного проекта

Попробуем запустить приложение в режиме хоста. Для этого запускаем скрипт StockWatcher-shell. Вы увидите два окна. Первое окно Development shell, содержит лог запуска приложения и там же появляются сообщения об ошибках. Второе окно содержит встроенный браузер, где вы можете наблюдать работу вашего приложения в режиме хоста, взаимодействовать с ним. В данном режиме работа приложения будет точно такой же как и в конечном, развернутом приложении.


Приложение в режиме хоста означает следующее: что приложение не транслирует в конечный Javascript код. Оно заменяется виртуальной машиной JAVA и исполняется как скомпилированный байт код Java. GWT встраивает данный код в браузер. Это дает возможность отладки приложения используя исходный код в вашей IDE, как любого другого Java приложения. Цикл разработки принимает стандартный вид «кодирование, тестирование, отладка», что даст прирост в скорости разработки приложения.
applicationCreator может генерировать конфигурацию проекта для последующей отладки его в режиме хоста, с помощью Eclipse. Что бы использовать эту возможность испортируйте проект в Eclipse.

Импорт проекта в Eclipse

Что бы открыть проект в Eclipse, запустите сначала Eclipse и щелкните меню File → Import. Выберете Existsing Project into Workspace на первом окне мастера.


Затем выберети директорию которая содержит файл .project


Щелкните Finish и вы увидете что GWT проект появиться в Eclipse.


Для запуска проекта в режиме хоста выберете проект в Package Exp lorer и кликнете зеленую кнопку запуска в панели инструментов (или выберете в меню Run → Run).

Внутри GWT проекта

Теперь вы имеете начальную версию приложения StockWatcher, готового к запуску, давайте поговорим о GWT проекте. Вернитей назад к директории StockWatcher, утилита applicationCreator создала директории с вложенным каталогом src где и содержится исходный код приложения.

Модули

Наше приложение содержится в пакете src/com/google/gwt/sample/stockwatcher, давайте начнем с этого места. Найдите один файл под названием StockWatcher.gwt.xml:

<module>
    <!-- Inherit the core Web Toolkit stuff. -->
    <inherits name='com.google.gwt.user.User'/>
    <!-- Inherit the default GWT style sheet. You can change -->
    <!-- the theme of your GWT application by uncommenting -->
    <!-- any one of the following lines. -->
    <inherits name='com.google.gwt.user.theme.standard.Standard'/>
    <!-- <inherits name="com.google.gwt.user.theme.chrome.Chrome"/> -->
    <!-- <inherits name="com.google.gwt.user.theme.dark.Dark"/> -->
    <!-- Other module inherits -->
    <!-- Specify the app entry point class. -->
    <entry-point class='com.google.gwt.sample.stockwatcher.client.StockWatcher'/>
    <!-- Specify the application specific style sheet. -->
    <stylesheet src='StockWatcher.css' />
</module>


Это GWT модуль. Модуль содержит настройки (определены в XML файле) для GWT приложения или библиотеки. Наше недавно созданное приложение содержит два тега <inherits>, тег <entry-point> и тег stylesheet. Тег inherits сообщает GWT от каких модулей зависит ваше приложение. Это может как один так и несколько встроенных модулей или другие GWT модули которые вы разрабатываете. Необходим только один встроенный модуль чтоб создать GWT приложение: com.google.gwt.user.User, которые содержит основные GWT библиотеки. По умолчанию добавлен еще один модуль com.google.get.user.theme.standard.Standard, он содержит стили по умолчанию используемые в приложении.

Тег entry-point сообщает GWT, что данный класс является запускаемым. Данный класс должен реализовывать интерфейс Entry Point, в котором определен один метод onModuleLoad(). Метод onModuleLoad() необходим для приложения, чтобы сделать такие действия как создание пользовательского интерфейса и регистрации обработчиков событий. В нашем приложении данный класс является: com.google.gwt.sample.stockwatcher.client.StockWatcher.

HTML хост страницы

StockWatcher.html это хост страница нашего приложения. Хост страница содержит GWT приложение. Это обычный HTML файл, содержащий тег script, указывающий на запуск вашего приложения. Этот скрипт указывает на полное имя модуля и заканчивается суффиксом nocache.js:

<script language="javascript" src = "com.google.gwt.sample.stockwatcher.StockWatcher.nocache.js"></script>

Мы будем неоднократно просматривать StockWatcher.html. По началу стоит использовать GWT приложения с использованием указанного суффикса.

CSS стили

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

В дополнение к таблице стилей, созданные applicationCreator, вы можете использовать любой из визуальных тем, что GWT обеспечивает. Визуальные темы добавляются по умолчанию для всех виджетов GWT, что ваше приложение публикует.

Добавление GWT в существующею WEB страницу

Один из фактов, что вы должны знать, хост страница приложения не обязана быть только HTML файлом, созданной с нуля. Гибкая архитектура GWT дает возможность для интеграции GWT с существующими веб-страницами, в том числе использование технологий сервера как PHP, PERL, JAVA и т.д.
Допустим, например, что ваш существующий веб-сайт был построен с PHP. Вы хотите добавить на стороне клиента поведение в одной из ваших страниц, используя GWT. Нет проблем. Просто добавьте <script> тег, указывающий на GWT приложение, внутри вашего PHP страницы - тега <head>:

<html>
    <head>
        <title>Wrapper PHP for StockWatcher</title>
        <script language='javascript' src='com.google.gwt.sample.stockwatcher.StockWatcher.nocache.js'></script>
    </head>
    <body>
        <?php
        echo 'PHP version: ' . phpversion();
        ?>
    </body>
</html>


Добавив одну строчку в эту PHP, страницу вы сделали поддержу GWT. Вы можете добавить виджеты GWT стороны клиента к страницам так же, как вы может со статическими хост страницами. GWT не должен явно поддерживать PHP для этого, чтобы работать. Фактически, так как GWT работает на стороне клиента (в отличие от стороны сервера - PHP), GWT даже не знает о факте, что хост страница была динамически произведена с PHP. К GWT это - только другая хост страница. Это означает, что GWT может легко работать с любой технологией стороны сервера, которую вы используете, пусто будет хоть PHP, Рубин, или даже ASP.NET.

Комментариев нет:

Отправить комментарий