Прежде чем мы начнем с создания реального приложения «HelloWorld» с использованием GWT, давайте посмотрим, каковы фактические части приложения GWT:
Приложение GWT состоит из следующих четырех важных частей, из которых последняя часть является необязательной, но первые три части являются обязательными.
- Дескрипторы модуля
- Государственные ресурсы
- Код на стороне клиента
- Серверный код
Примеры расположения различных частей типичного приложения gwt HelloWord будут такими, как показано ниже:
| название | Место нахождения |
|---|---|
| Корень проекта | Привет, мир/ |
| Дескриптор модуля | SRC / COM / tutorialspoint / HelloWorld.gwt.xml |
| Государственные ресурсы | SRC / COM / tutorialspoint / война / |
| Код на стороне клиента | SRC / COM / tutorialspoint / клиент / |
| Серверный код | SRC / COM / tutorialspoint / сервер / |
Дескрипторы модуля
Дескриптор модуля — это файл конфигурации в форме 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 |
<наследует имя = «логическое имя модуля» /> Это добавляет другой модуль 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. |
<module rename-to = «helloworld»>
Это обеспечивает название приложения.
<наследует имя = «логическое имя модуля» />
Это добавляет другой модуль gwt в приложение так же, как импорт в приложениях java. Любое количество модулей может быть унаследовано таким образом.
<entry-point class = «classname» />
Это указывает имя класса, который начнет загрузку GWT-приложения. Может быть добавлено любое количество классов точек входа, и они вызываются последовательно в порядке их появления в файле модуля. Поэтому, когда onModuleLoad () вашей первой точки входа завершается, следующая точка входа вызывается немедленно.
<source path = «path» />
Здесь указываются имена исходных папок, которые GWT-компилятор будет искать для исходной компиляции.
<public path = «path» />
Публичный путь — это место в вашем проекте, где хранятся статические ресурсы, на которые ссылается ваш модуль GWT, например CSS или изображения. Публичный путь по умолчанию — это публичный подкаталог, в котором хранится XML-файл модуля.
<script src = «js-url» />
Автоматически внедряет внешний файл JavaScript, расположенный в месте, указанном src.
<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» /> в файле конфигурации модуля.
Например, код точки входа будет использоваться в качестве кода на стороне клиента, а его местоположение будет указано с помощью <source path = «path» />.
Точкой входа модуля является любой класс, который назначается EntryPoint и может быть создан без параметров. Когда модуль загружен, создается экземпляр каждого класса точки входа и вызывается его метод EntryPoint.onModuleLoad () . Пример класса точки входа HelloWorld будет следующим:
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
Window.alert("Hello, World!");
}
}
Код на стороне сервера
Это серверная часть вашего приложения, и она очень необязательна. Если вы не выполняете никакой серверной обработки внутри приложения, тогда вам не нужна эта часть, но если в серверной части требуется некоторая обработка, и ваше клиентское приложение взаимодействует с сервером, вам придется разрабатывать эти компоненты.
В следующей главе будут использованы все вышеупомянутые концепции для создания приложения HelloWorld с использованием Eclipse IDE.