GWT - Приложения

Прежде чем мы начнем с создания реального приложения "HelloWorld" с использованием GWT, давайте посмотрим, каковы фактические части приложения GWT -

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

  • Дескрипторы модуля
  • Публичные ресурсы
  • Клиентский код
  • Серверный код

Примеры расположения различных частей типичного приложения gwt HelloWord будет как показано ниже -

название Место расположения
Корень проекта Привет, мир/
Дескриптор модуля src / com / tutorialspoint / HelloWorld.gwt.xml
Публичные ресурсы SRC / com / tutorialspoint / война /
Клиентский код SRC / ком / учебная точка / клиент /
Серверный код SRC / ком / учебная точка / сервер /

Дескрипторы модуля

Дескриптор модуля - это файл конфигурации в форме XML, который используется для настройки приложения GWT.

Расширение файла дескриптора модуля - * .gwt.xml, где * - имя приложения, и этот файл должен находиться в корне проекта.

Ниже будет дескриптор модуля по умолчанию HelloWorld.gwt.xml для приложения HelloWorld.

<?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.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- specify the paths for translatable code                    -->
   <source path = '...'/>
   <source path = '...'/>

   <!-- specify the paths for static files like html, css etc.     -->
   <public path = '...'/>
   <public path = '...'/>

   <!-- specify the paths for external javascript files            -->
   <script src = "js-url" />
   <script src = "js-url" />

   <!-- specify the paths for external style sheet files            -->
   <stylesheet  src = "css-url" />
   <stylesheet  src = "css-url" />
</module>

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

Sr. No. Узлы и описание
1

<module rename-to = "helloworld">

Это обеспечивает имя приложения.

2

<inherits name = "logical-module-name" />

Это добавляет другой модуль gwt в приложение точно так же, как импорт в приложениях Java. Таким образом можно унаследовать любое количество модулей.

3

<entry-point class = "classname" />

Это указывает имя класса, который начнет загрузку приложения GWT. Можно добавить любое количество классов точек входа, и они будут вызываться последовательно в том порядке, в котором они появляются в файле модуля. Поэтому, когда onModuleLoad () вашей первой точки входа завершается, немедленно вызывается следующая точка входа.

4

<source path = "path" />

Это определяет имена исходных папок, которые компилятор GWT будет искать для исходной компиляции.

5

<public path = "path" />

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

6

<script src="js-url" />

Автоматически внедряет внешний файл JavaScript, расположенный в месте, указанном src.

7

<stylesheet src="css-url" />

Автоматически вставляет внешний файл CSS, расположенный в местоположении, указанном src.

Публичные ресурсы

Это все файлы, на которые ссылается ваш модуль GWT, такие как HTML-страница хоста, CSS или изображения.

Расположение этих ресурсов можно настроить с помощью элемента <public path = "path" /> в файле конфигурации модуля. По умолчанию это общедоступный подкаталог, в котором хранится XML-файл модуля.

Когда вы компилируете свое приложение в JavaScript, все файлы, которые можно найти по общедоступному пути, копируются в выходной каталог модуля.

Самый важный общедоступный ресурс - это хост-страница, которая используется для вызова реального приложения GWT. Типичная страница хоста HTML для приложения может вообще не включать в себя видимое содержимое тела HTML, но всегда ожидается, что приложение GWT будет включать в себя тег <script ... /> следующим образом

<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>

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

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;
}

Клиентский код

Это реальный код Java, написанный для реализации бизнес-логики приложения, который компилятор GWT преобразует в JavaScript, который в конечном итоге будет выполняться внутри браузера. Расположение этих ресурсов можно настроить с помощью элемента <source path = "path" /> в файле конфигурации модуля.

Например Entry Point код будет использоваться как код на стороне клиента, а его расположение будет указано с помощью <source path = "path" />.

Модуль entry-point это любой класс, который может быть назначен EntryPointи это может быть построено без параметров. Когда модуль загружен, создается каждый класс точки входа и егоEntryPoint.onModuleLoad()вызывается метод. Пример класса точки входа HelloWorld будет следующим:

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

Серверный код

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

В следующей главе будут использованы все вышеупомянутые концепции для создания приложения HelloWorld с использованием Eclipse IDE.