Учебники

GWT – Создать приложение

Поскольку мощь GWT заключается в написании на Java, запуске на JavaScript , мы будем использовать Java IDE Eclipse для демонстрации наших примеров.

Давайте начнем с простого приложения HelloWorld

Шаг 1 – Создать проект

Первым шагом является создание простого проекта веб-приложения с использованием Eclipse IDE. Запустите мастер проекта, используя опцию Google Icon Сервисы Google и инструменты разработки > Новый проект веб-приложения …. Теперь назовите ваш проект как HelloWorld, используя окно мастера следующим образом:

Мастер создания проекта GWT

Снимите флажок « Использовать Google App Engine», потому что мы не используем его в этом проекте, оставив другие значения по умолчанию (оставьте флажок « Создать образец кода проекта» ) и нажмите кнопку «Готово».

Как только ваш проект будет успешно создан, вы будете иметь следующий контент в Project Explorer –

Структура проекта GWT

Вот краткое описание всех важных папок

Sr.No. Папка и местоположение
1

ЦСИ

Файлы исходного кода (Java-классы).

Папка клиента, содержащая специфичные для клиента Java-классы, отвечающие за отображение пользовательского интерфейса.

Папка сервера, содержащая классы java на стороне сервера, отвечающие за обработку на стороне сервера.

Общая папка, содержащая класс модели Java для передачи данных с сервера на клиент и наоборот.

HelloWorld.gwt.xml, файл дескриптора модуля, необходимый для компилятора GWT для компиляции проекта HelloWorld.

2

тестовое задание

Тестовый код (Java-классы) исходных файлов.

Папка клиента, содержащая классы Java, отвечающие за тестирование кода на стороне клиента gwt.

3

война

Это самая важная часть, она представляет собой реально развертываемое веб-приложение.

WEB-INF, содержащий скомпилированные классы, библиотеки gwt, библиотеки сервлетов.

HelloWorld.css, таблица стилей проекта.

HelloWorld.html, отображает HTML, который вызывает приложение GWT UI.

ЦСИ

Файлы исходного кода (Java-классы).

Папка клиента, содержащая специфичные для клиента Java-классы, отвечающие за отображение пользовательского интерфейса.

Папка сервера, содержащая классы java на стороне сервера, отвечающие за обработку на стороне сервера.

Общая папка, содержащая класс модели Java для передачи данных с сервера на клиент и наоборот.

HelloWorld.gwt.xml, файл дескриптора модуля, необходимый для компилятора GWT для компиляции проекта HelloWorld.

тестовое задание

Тестовый код (Java-классы) исходных файлов.

Папка клиента, содержащая классы Java, отвечающие за тестирование кода на стороне клиента gwt.

война

Это самая важная часть, она представляет собой реально развертываемое веб-приложение.

WEB-INF, содержащий скомпилированные классы, библиотеки gwt, библиотеки сервлетов.

HelloWorld.css, таблица стилей проекта.

HelloWorld.html, отображает HTML, который вызывает приложение GWT UI.

Шаг 2 – Изменить дескриптор модуля: HelloWorld.gwt.xml

Плагин GWT создаст файл дескриптора модуля по умолчанию src / com.tutorialspoint / HelloWorld.gwt.xml, который приведен ниже. В этом примере мы не изменяем его, но вы можете изменить его в соответствии с вашими требованиями.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- 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.clean.Clean'/>
   <!-- <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.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

Шаг 3 – Изменить таблицу стилей: HelloWorld.css

Плагин GWT создаст файл таблицы стилей по умолчанию war / HelloWorld.css . Давайте изменим этот файл, чтобы сохранить наш пример на простейшем уровне понимания –

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Шаг 4 – Изменить хост-файл: HelloWorld.html

Плагин GWT создаст файл хоста HTML по умолчанию war / HelloWorld.html . Давайте изменим этот файл, чтобы сохранить наш пример на простейшем уровне понимания –

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Hello World</h1>
      <p>Welcome to first GWT application</p>
   </body>
</html>

Вы можете создавать больше статических файлов, таких как HTML, CSS или изображения, в том же исходном каталоге, или вы можете создавать дополнительные подкаталоги и перемещать файлы в этих подкаталогах и настраивать эти подкаталоги в дескрипторе модуля приложения.

Шаг 5 – Изменить точку входа: HelloWorld.java

Плагин GWT создаст файл Java по умолчанию src / com.tutorialspoint / HelloWorld.java , в котором хранится точка входа для приложения.

Давайте изменим этот файл для отображения «Hello, World!»

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Window.alert("Hello, World!");
   }
}

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

Шаг 6 – Компилировать приложение

Как только вы будете готовы со всеми внесенными изменениями, самое время скомпилировать проект. Используйте опцию Google Icon Сервисы Google и инструменты разработки > GWT Compile Project … для запуска диалогового окна GWT Compile, как показано ниже –

Мастер компиляции проекта GWT

Оставьте значения по умолчанию без изменений и нажмите кнопку «Компилировать». Если все пойдет хорошо, вы увидите следующий вывод в консоли Eclipse

Compiling module com.tutorialspoint.HelloWorld
   Compiling 6 permutations
      Compiling permutation 0...
      Compiling permutation 1...
      Compiling permutation 2...
      Compiling permutation 3...
      Compiling permutation 4...
      Compiling permutation 5...
   Compile of permutations succeeded
Linking into C:\workspace\HelloWorld\war\helloworld
   Link succeeded
   Compilation succeeded -- 33.029s

Шаг 7 – Запустить приложение

Теперь нажмите на Запустить приложение Запустите приложение и выберите приложение HelloWorld, чтобы запустить приложение.

Кнопка запуска GWT

Если все в порядке, вы должны увидеть активный режим разработки GWT в Eclipse, содержащий URL, как показано ниже. Дважды щелкните URL, чтобы открыть приложение GWT.

GWT Run Application

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

Если у вас уже установлен плагин GWT для вашего браузера, вы должны увидеть следующий вывод

Результат применения GWT

Поздравляем! Вы реализовали свое первое приложение с помощью Google Web Toolkit (GWT).