Использование ClientBundle в GWT

     Ресурсы в развернутых GWT приложениях могут быть условно разделены на: некешируемые (.nocache.js), которые всегда кешируются (.cache.html) и “все остальное” (app.css). Интерфейс ClientBundle перемещает записи из категории “все остальное” в всегда кешируемую категорию. 

     ClientBundle - это механизм в GWT для предотвращения медленного выполнения клиентского приложения, он кеширует различные виды ресурсов, напр. изображения, CSS, тестовые и т.д. Преимущество подхода заключается в том, что необходимый ресурс будет загружен один раз, вместо подтягивания каждый раз во время использования. Также уменьшится общий объем хранимых ресурсов. В результате будет уменьшено расходы для хранения однотипных данных. 

     Пример:
Создадим два интерфейса наследуемые от ClientBundle с методами для доступа к изображениям.

public interface FirstBundle extends ClientBundle{
    @Source("first-icon.png")
    ImageResource red();
}

public interface SecondBundle extends ClientBundle {
    @Source("second-icon.png")
    ImageResource blue();
}

* This source code was highlighted with Source Code Highlighter.

     В используемом виджете с помощью аннотации @Inject в Gin, говорим ему использовать этот конструктор. У Gin-а есть специальная обработка для GWT deferred binding, которая потребует минимальной настройки для работы. Т.к. нам не нужно дополнительное конфигурирование, то метод configure() класса ClientBundleModule останется пустым.

@Inject
public MainWidget(FirstBundle resourcesFirst, SecondBundle resourcesSecond) {
    initWidget(uiBinder.createAndBindUi(this));
    
    leftLabel.add(new Image(resourcesFirst.red()));
    rightLabel.add(new Image(resourcesSecond.blue()));
}

@GinModules(ClientBundleModule.class)
public interface ClientBundleInjector extends Ginjector {
    FirstBundle firstBundle();
    SecondBundle secondBundle();
}

public class ClientBundleModule extends AbstractGinModule {
    @Override
    protected void configure() {
    }
}

* This source code was highlighted with Source Code Highlighter.

      После выполнения кода через GWT компилятор на выходе мы получим war-архив с множеством png файлов, среди которых будут first-icon.png и second-icon.png, как отдельные файлы. Давайте объединим наши изображения в одно, тем самым уменьшим загрузку.

public interface ClientBundleExample extends FirstBundle, SecondBundle {
}

public class ClientBundleModule extends AbstractGinModule {
    @Override
    protected void configure() {
        bind(FirstBundle.class).to(ClientBundleExample.class);
        bind(SecondBundle.class).to(ClientBundleExample.class);
    }
}
.....
private final ClientBundleInjector injector = GWT.create(ClientBundleInjector.class);

@Inject
public MainWidget() {
    initWidget(uiBinder.createAndBindUi(this));
    
    leftLabel.add(new Image(injector.firstBundle().red()));
    rightLabel.add(new Image(injector.secondBundle().blue()));
}

* This source code was highlighted with Source Code Highlighter.

Теперь после компиляции мы получим один png файл содержащий два изображения.