Статьи

Использование виджетов GWT в Vaadin 7 — часть 1

Декабрь 9, 2018

Даже если Vaadin предоставит вам множество готовых компонентов, скорее всего, рано или поздно вы захотите использовать тот специальный виджет GWT, который вы только что видели в последний день. В таком случае, будь счастлив, потому что Ваадин позволил тебе это сделать. Затем вы сможете упаковать компонент в простой JAR-архив и повторно использовать его во всех нужных вам проектах, как и сами компоненты Vaadin. В этой серии статей из 3 частей мы увидим, как это сделать с помощью Vaadin 7:

  • Эта первая часть посвящена просто оборачиванию виджетов GWT в компоненты Vaadin.
  • Во второй части мы увидим, как настроить клиентский виджет из серверного компонента.
  • В заключительной части будет подробно описано, как общаться от клиента к серверу.

 Первый шаг — выбрать виджет для переноса. В качестве иллюстрации мы будем использовать GWT-Bootstrap , GWT-реализацию Twitter Bootstrap и, в частности, com.github.gwtbootstrap.client.ui.Button. Конечно, полученные уроки можно легко перенести для других виджетов GWT.

Для переноса виджета GWT в код Vaadin требуется пара классов:

  • Первым классом, который нужно создать, является сам компонент Vaadin. Такие компоненты должны расширять com.vaadin.ui.AbstractComponent (или com.vaadin.ui.AbstractComponentContainer для компонентов, содержащих другие компоненты, что не относится к кнопкам): 
    public class BootstrapButton extends AbstractComponent {

    ...
}
  • Второй класс для создания — это сам клиентский виджет. Это очень просто: просто расширьте нужный виджет GWT (кнопка Bootstrap в нашем случае). Обратите внимание, что обязательно размещать его в подпакете ui.client относительно вышеуказанного компонента: 
    public class VBootstrapButton extends Button {

    public VBootstrapButton() {

        addStyleName("v-button-bootstrap");
    }
}
  • Последний класс будет связывать компонент и виджет. В семантике Vaadin это называется соединителем. Соединители должны расширять com.vaadin.terminal.gwt.client.ui.AbstractComponentConnector (или com.vaadin.terminal.gwt.client.ui.AbstractComponentContainerConnector для тех виджетов, которые содержат другие виджеты). Соединение достигается за счет реализации createWidget (), которая должна возвращать ранее реализованный клиентский класс, и путем аннотирования соединителя @Connect, который принимает класс сервера в качестве значения. 
    @Connect(com.morevaadin.vaadin7.custom.BootstrapButton.class)
public class BootstrapButtonConnector extends AbstractComponentConnector {

    @Override
    protected Widget createWidget() {

        return GWT.create(VBootstrapButton.class);
    }
}

    Он также должен находиться в подпакете ui.client.

GWT читает код Java и отображает HTML и JavaScript. При использовании стандартных компонентов Vaadin код предварительно компилируется и доступен в Jar Vaadin, но при добавлении сторонних виджетов нам необходимо скомпилировать как Vaadin, так и другие виджеты. Для этого необходимы две вещи:

  • Сначала мы должны создать файл gwt.xml набора виджетов GWT, ссылающийся как на набор виджетов Vaadin, так и на Bootstrap: 
    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">
<module>
    <inherits name="com.vaadin.terminal.gwt.DefaultWidgetSet" />
    <inherits name="com.github.gwtbootstrap.Bootstrap" />
    <!-- Reduces compilation time in development mode -->
    <!--
        <set-property name="user.agent" value="safari,gecko1_8" />
    -->
</module>
  • Затем мы должны обработать саму компиляцию. Либо используйте функцию компиляции плагина Eclipse Vaadin, либо вставьте следующий фрагмент в Maven POM: 
    <build>
    <plugins>
        <plugin>
            <groupId>org.codehaus.mojo</groupId>
            <artifactId>gwt-maven-plugin</artifactId>
            <version>2.4.0</version>
            <configuration>
                <webappDirectory>${project.build.directory}/${project.build.finalName}/VAADIN/widgetsets</webappDirectory>
                <extraJvmArgs>-Xmx512M -Xss1024k</extraJvmArgs>
            </configuration>
            <executions>
                <execution>
                    <goals>
                        <goal>resources</goal>
                        <goal>compile</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
        <plugin>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-maven-plugin</artifactId>
            <version>1.0.2</version>
            <executions>
                <execution>
                    <configuration>
                    </configuration>
                    <goals>
                        <goal>update-widgetset</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

 Источники для этой статьи можно найти на GitHub . В следующей части мы подробно расскажем, как позволить разработчикам настраивать виджеты через компоненты на стороне сервера.

41
Share: