GWT — UIBinder Hello World. Пример использования UIBinder в GWT

Использование UIBinder в Google Web Toolkit. Пример Hello World UIBinder.

Используемые технологии
  • GWT 2.7.0
  • Intellij Idea 15.0

1 Описание задачи

Рассмотреть как использовать фреймворк UIBinder в Google Web Toolkit для упрощения «шаблонизирования» страницы.

2. Структура проекта

GWT UIBinder structure

Основа взята из предыдущих статей: Пример создания проекта Google Web Toolkit (GWT) Hello World Example и GWT – передача объектов на сторону сервера). Внутри настройки maven, GWT и описание классов. Здесь добавлен пакет ui и 4 файла в нем. Так же были добавлены небольшие изменения в главный модуль и его xml описание (изменения описаны ниже).

3. Создание UIBinder класса

В Idea можно нажать правой кнопкой и выбрать New > Google Web Toolkit > GWT UIBinder and ui.xml file. Будет создан класс и его xml описание.

GWT create UIBinder

Для Hello World примера были созданы два разных класса: обычный DOM (div-элемент), где используется чистый HTML и второй, более реальный, с использованием GWT виджета.

HelloWorldBinder.ui.xml

HelloWorldBinder.class

HelloWidgetPanel.ui.xml

HelloWidgetPanel.class

Для того, чтобы связать описание элементов в xml файле с Java классом используются такие строчки:

  • Интерфейс UiBinder<U, O> задает два параметра:
    U — тип корневого элемента, указанного в ui.xml файле, который будет возвращаться с помощью вызова createAndBindUi,
    O — владелец, где должны быть заполнены поля @UIFields.
  • MyUiBinder uiBinder = GWT.create(MyUiBinder.class); — создание экземпляра UIBinder’а.
  • @UIField — связывает элемент в xml и его Java копию.

Обратите внимание на вызов метода в конструкторе для обычного DOM элемента и для виджета.

 4. Описание модуля

GwtApp:

В главном модуле при загрузке мы инициализируем экземпляры наших UIBinder классов. Затем задаем некоторые необходимые свойства вроде имени поля или css стиля и затем добавляем их в html страницу.

5. Html страница и css файл

GwtApp.html:

Весь верх стандартный, добавлено только два div элемента — helloId и panelId, с которыми выше были связаны div-элемент и виджет-панель соответственно.

GwtApp.css:

Для виджет панели и листбокса были добавлены css стили.

6. Запуск GWT UIBinder Hello World example

После запуска увидим, что <div id=»helloId»/> и <div id=»panelId»/> успешно связаны с Java кодом и элементами.

GWT Test

 

Исходный код

GWT — UIBinder

Share Button
6
7224 Total Views 1 Views Today

Добавить комментарий