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.