GWT — UIBinder добавление стилей CSS

Несколько примеров добавления CSS стилей при использовании UIBinder в GWT.

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

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

Рассмотреть как добавлять\подключать css стили при работе с фреймворком UIBinder в Google Web Toolkit.

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

GWT UIBinder css structure

Если вам необходимо получить полное описание всех классов в этом проекте, то вам необходимо прочитать GWT – UIBinder Hello World. Пример использования UIBinder в GWT. Если нужно посмотреть как подключить css, то можете переходить дальше.

Добавлены несколько файлов .css, а также интерфейс HelloWidgetPanelResources для работы с ресурсами вроде файла с css стилями.

3. Подключение css стилей

Подключить стили при работе с UIBinder можно несколькими способами. Один из них уже рассматривался в прошлой статье.

3.1 Подключение css из Java кода

Первый способ задания стиля компоненту это вызвать метод setStyleName() с указанием имени стиля в css файле модуля.

GwtApp:

GwtApp.css

3.2 Подключение дополнительного css через xml

Для начала приведу полный пример описание UIBinder’a в xml, а затем опишу отдельно разные способы указания стиля компонента.

HelloWidgetPanel.ui.xml

3.2.1 Подключение стиля через ссылку на css файл

Сначала указываем ссылку на путь к таблице стилей (путь указывается относительно местонахождения ui.xml в котором прописываем стили). Т.е. в нашем случае:

ru/javastudy/gwtApp/client/ui/HelloWidgetPanel.ui.xml

ru/javastudy/gwtApp/client/ui/SimpleCss.css

Затем стиль прописывается у компонента:

SimpleCss.css

3.2.2 Создание класса (интерфейса) для подключения ресурсов

Еще один способ указания стиля через создания класса (или интерфейса) в Java коде и ссылке на него в ui.xml. Снова наш HelloWidgetPanel.ui.xml:

  1. Создается интерфейс HelloWidgetPanelResources,
  2. Прописывается @UiField HelloWidgetPanelResources cssBinder в java классе для ui.xml,
  3. Добавляются стили для компонента с помощью styleName={fieldName.callCSSResourceMethod.name}.

Теперь подробнее.

Можно подключать стили через интерфейс и код Java. Для этого создадим интерфейс и css файл (если имена и пакет будут совпадать, то Idea позволит удобно навигироваться между java и css файлами).

HelloWidgetPanelResources:

HelloWidgetPanel.css

Теперь класс, соответствующий HelloWidgetPanel.ui.xml:

Доступ к интерфейсу, который ссылается на файл с css ресурсами происходит с помощью строчек:

4. Тестирование подключения стилей

Всё осталось с прошлой статьи, указанной в начале.

Файл модуля GwtApp:

GwtApp.html

Результат:

GWT UIBinder css test

 

Исходный код:

GWT — UIBinder css

 

 

 

Share Button
3
1814 Total Views 1 Views Today

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