gwt_component_sample.adoc

Создание GWT компонента

В данном примере мы рассмотрим создание простого GWT-компонента - поля рейтинга в виде 5 звезд, а также использование его в экранах приложения.

Создадим новый проект в CUBA Studio. Имя проекта - ratingsample.

Создайте модуль web-toolkit, нажав на кнопку Create web-toolkit module секции Project properties навигатора Studio.

Далее нажмите на ссылку New UI component. Откроется окно создания визуального компонента UI component generation. В секции Component type выберите значение New GWT component.

В поле Vaadin component class name диалога генерации компонента введите значение RatingFieldServerComponent.

Снимите флажок Integrate into Generic UI. Процесс интеграции компонента в универсальный интерфейс аналогичен описанному в разделе [vaadin_addon_sample_gui], поэтому рассматривать его здесь мы не будем.

После нажатия кнопки OK Studio сгенерирует файлы:

• RatingFieldWidget.java - виджет GWT в модуле web-toolkit.

• RatingFieldServerComponent.java - класс компонента Vaadin.

• RatingFieldState.java - класс состояния компонента.

• RatingFieldConnector.java - коннектор, связывающий клиентский код с серверным компонентом.

• RatingFieldServerRpc.java - класс, определяющий API сервера для клиентской части.

Последовательно рассмотрим сгенерированные студией заготовки файлов и внесем в них необходимые изменения.

• GWT виджет RatingFieldWidget.java. Замените содержимое файла на следующий код:

  link:../../../../../source/ui_component/gwt/RatingFieldWidget.java[role=include]

  Виджет представляет собой клиентский класс, отвечающий за отображение компонента в веб-браузере и реакцию на события. Он определяет интерфейсы для работы с серверной частью. В нашем случае это метод setValue() и интерфейс StarClickListener.

• Класс компонента Vaadin RatingFieldServerComponent. Он определяет API для серверного кода, различные get/set методы, слушатели событий и подключение источников данных. Прикладные разработчики используют в своём коде методы этого класса.

  link:../../../../../source/ui_component/gwt/RatingFieldServerComponent.java[role=include]

• Класс состояния RatingFieldState отвечает за то, какие данные будут пересылаться между клиентом и сервером. В нём определяются публичные поля, которые будут автоматически сериализованы на сервере и десериализованы на клиенте.

  link:../../../../../source/ui_component/gwt/RatingFieldState.java[role=include]

• Интерфейс RatingFieldServerRpc — определяет API сервера для клиентской части, его методы могут вызываться с клиента при помощи механизма удалённого вызова процедур, встроенного в Vaadin. Этот интерфейс мы реализуем в самом компоненте, в данном случае просто вызываем метод setValue() нашего поля.

  link:../../../../../source/ui_component/gwt/RatingFieldServerRpc.java[role=include]

• Коннектор RatingFieldConnector связывает клиентский код с серверной частью.

  link:../../../../../source/ui_component/gwt/RatingFieldConnector.java[role=include]

Код виджета RatingFieldWidget не определяет внешний вид компонента, кроме назначения имён стилей ключевым элементам. Для того, чтобы определить внешний вид нашего компонента, создадим файлы стилей. Для этого можно воспользоваться ссылкой Create theme extension секции Project properties в навигаторе Studio. В появившемся диалоге выбираем тему halo. Эта тема использует вместо значков глифы шрифта FontAwesome, чем мы и воспользуемся. Studio создаст пустые файлы SCSS для расширения темы в каталоге themes модуля web.

Стили каждого компонента принято выделять в отдельный файл componentname.scss в каталоге components/componentname в формате примеси SCSS. В каталоге themes/halo модуля web создадим структуру вложенных каталогов: components/ratingfield. Затем внутри ratingfield создадим файл ratingfield.scss:

link:../../../../../source/ui_component/gwt/ratingfield.scss[role=include]

Подключим этот файл в главном файле темы halo-ext.scss:

link:../../../../../source/ui_component/gwt/halo-ext.scss[role=include]

Для демонстрации работы компонента создадим новый экран в модуле web.

Назовите файл с экраном rating-screen.xml.

Перейдем к редактированию экрана rating-screen.xml в IDE. Нам понадобится контейнер для нашего компонента, объявим его в XML экрана:

link:../../../../../source/ui_component/gwt/rating-screen.xml[role=include]

Откроем класс контроллера экрана RatingScreen.java и добавим код размещения нашего компонента на экране:

link:../../../../../source/ui_component/gwt/RatingScreen.java[role=include]

Запускаем сервер приложения и смотрим на результат.