Лучший способ стилизовать виджеты GWT в библиотеке

Question

Я разрабатываю некоторые виджеты в библиотеке для внутреннего пользования в компании, в которой я работаю.

Я не знаю, каков рекомендуемый способ стилизации виджетов.

Есть как минимум эти способы:

• использовать Widget.setPrimaryStyleName и позволить пользователю предоставить внешний CSS. Для создания приложений мы используем архетипы maven, чтобы мы могли предоставлять стили по умолчанию. Во всяком случае, мне это не очень нравится.

• использовать GWT 2.0 CssResourceBundle. Таким образом, мы можем скомпилировать CSS в модуль, и он будет оптимизирован (и это также может зависеть от браузера).

• предоставить модуль со стилем. Что-то вроде стандартных тем GWT. Но я не знаю, как именно это работает.

Я хочу:

• сделать компоненты настолько связными, насколько я могу (не зависит от внешних включенных CSS)
• оставить открытой дверь для изменения стилей (если я хочу изменить внешний вид некоторых виджетов в конкретном приложении).

Какой у вас опыт по этому предмету?

Примечание: Если вы ищете точный ответ, просмотрите все ответы и комментарии. Есть разные идеи и все хорошие. Затем выберите то, что лучше для вас:)

Answer 1

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

Я делаю аналогичный проект, который размещен на github (http://github.com/markovuksanovic/gwt-styles),, так что вы можете проверить это. Вы можете скачать файл jar, включить его в свой проект и указать в своем модуле xml, что ты хочешь использовать этот стиль .. что-то вроде

<inherits name='gwt.theme.flick.Flick'/>

Я бы предложил вам использовать новый модуль для ваших стилей, чтобы вы могли легко переключаться между стилями ... (просто измените тег наследования). Так, например, если один из ваших виджетов использует класс css «my-widget», у вас будет модуль «style» (или несколько модулей), который определит этот класс css (в файле css) - таким образом, вы могли бы иметь Несколько модулей, которые реализуют этот класс css и переключаются между ними, так же просто, как изменить имя модуля в теге наследования. Таким образом, вы бы прекрасно отделили код - стили не будут зависеть от технической реализации виджетов. Если у вас есть еще вопросы, не стесняйтесь спрашивать.

P.S. Я забыл упомянуть выше - обратите пристальное внимание на то, как собран модуль стиля (build.xml), это немного сложно. Дополнительную информацию о создании модулей вы можете найти по следующей ссылке http://developerlife.com/tutorials/?p=229

Answer 2

Если вы просто пишете новый виджет и хотите, чтобы люди могли настраивать его CSS, то я использовал один шаблон:

public class MyWidget extends Composite {
  public interface MyCss extends CssResource {
    ...
  }

  private static MyCss defaultStyle;
  private static MyCss ensureDefaultStyle() {
    if (defaultStyle == null) {
      defaultStyle = GWT.create(DefaultResourceBundle.class).css();
    }
    return defaultStyle;
  }

  /** If you want to use default style, call this */
  public MyWidget() {
    this(ensureDefaultStyle());
  }

  /** If you want to use your custom style, call this */
  public MyWidget(MyCss css) {
    ...
  }
}

Таким образом, ваша библиотека виджетов может предоставить интерфейс CSS и предоставить для него реализацию по умолчанию. Если ваш пользователь хочет настроить его, он может связать интерфейс CSS с файлом CSS по своему выбору в своем наборе ресурсов и использовать вместо него второй конструктор.