Наложение изображений в gxt Tree Panel - PullRequest
Новая
       22

Наложение изображений в gxt Tree Panel

0 голосов
/ 08 марта 2012

Я разрабатываю приложение gxt, которое предоставляет представление для svn-подобного управления версиями: TreePanel, которое отображает структуру файловой системы с файлами и папками, имеющими различные состояния (новые, измененные, удаленные и т. Д.).

Я хочу отобразить маленький значок наложения на каждом элементе, чтобы отразить его состояние. Что я мог сделать, так это создать иконку для каждого состояния, но я не хочу этого делать, потому что в итоге я бы создал большой пакет избыточных изображений.

Как лучше всего реализовать возможности значков наложения в деревьях или сетках?

1 Ответ

0 голосов
/ 09 марта 2012

После проверки доменной структуры дерева я выяснил, что значок дерева отображается с использованием атрибута background-url css. Чтобы изображение отображалось с правильным размером, атрибут src элемента заполняется URL-адресом изображения-заполнителя.

Хитрость заключается в том, чтобы заменить изображение-заполнитель значком наложения, поскольку оно отображается над фактическим изображением.

Для этого я расширил ClippedImagePrototype, чтобы добавить URL оверлейного изображения: 

public class OverlayImagePrototype extends ClippedImagePrototype {
  protected String overlayImageUrl = null;

  public static AbstractImagePrototype create(ImageResource resource, String overlayUrl) {
    return new OverlayImagePrototype(resource.getSafeUri(),
                 resource.getLeft(), resource.getTop(), resource.getWidth(),
                 resource.getHeight(), overlayUrl);
  }

  private OverlayImagePrototype(SafeUri url, int left, int top, int width,
                                int height, String overlayUrl) {
    super(url, left, top, width, height);
    this.overlayImageUrl = overlayUrl;
  }

  public ImagePrototypeElement createElement() {
    ImagePrototypeElement imgEl = super.createElement();
    if (overlayImageUrl != null) {
      imgEl.setAttribute("src", overlayImageUrl);
    }
    return imgEl;
  }
}

Вот как я использую OverlayImagePrototype в реализации IconProvider: 

tree.setIconProvider(new ModelIconProvider<ModelData>() {
  public AbstractImagePrototype getIcon(ModelData model) {
    return OverlayImagePrototype.create(model.get("icon"), model.get("overlayIconUrl"));
  }
});
...