Сложности в стилях Интерфейсы GWT

Question

Я получаю стили gwt существующих виджетах, таких как украшенная панель, как изменить цвета границ от синего до другого цвета или панели стека, как изменить цвет заголовка. Кто-нибудь знает, как полностью настроить виджеты или панель?

Answer 1

Стили по умолчанию, применяемые к виджетам GWT, перечислены в API. Взгляните на DecoratedStackPanel. Там вы увидите следующие стили перечислены:

• .gwt-DecoratedStackPanel {панель самого}
• .gwt-DecoratedStackPanel .gwt-StackPanelItem {невыбранных пунктов}
• .gwt-DecoratedStackPanel. GWT-StackPanelItem выбранные { выбранные элементы}
• .gwt-DecoratedStackPanel .gwt-StackPanelContent {обертки вокруг содержимого элемента}
• .gwt-DecoratedStackPan эль .stackItemTopLeft {верхний левый угол элемента}
• .gwt-DecoratedStackPanel .stackItemTopLeftInner {внутренний элемент клетки}
• .gwt-DecoratedStackPanel .stackItemTopCenter {верхний центр пункт,}
• .gwt-DecoratedStackPanel .stackItemTopCenterInner {внутренний элемент клетки}
• .gwt-DecoratedStackPanel .stackItemTopRight {верхний правый угол элемента}
• .gwt-DecoratedStackPanel .stackItemTopRightInner {ИН Нер элемент клетки}
• .gwt-DecoratedStackPanel .stackItemMiddleLeft {левая сторона пункт,}
• .gwt-DecoratedStackPanel .stackItemMiddleLeftInner {внутренний элемент клетки}
• .gwt-DecoratedStackPanel. stackItemMiddleCenter {центр пункт, в котором текстовый элемент находится }
• .gwt-DecoratedStackPanel .stackItemMiddleCenterInner {в этих внутренний элемент ячейки}
• .gwt-DecoratedStackPa нель .stackItemMiddleRight {правая сторона пункт,}
• .gwt-DecoratedStackPanel .stackItemMiddleRightInner {на внутреннего элемента ячейки}

Для того, чтобы перезаписать один из этих стилей не забудьте объявить определение, как @external чтобы убедиться, что он не запутался (см. here).

Answer 2

Темы GWT вводятся через модули темы. Их можно найти в com.google.gwt.user.theme package. Например, чтобы включить стандартный добавить следующую наследованные:

<inherits name="com.google.gwt.user.theme.standard.StandardResources"/> 

Вы можете создать свой собственный стиль, создавая подобный модуль. Просто скопируйте содержимое одной из стандартных тем и создайте свой собственный модуль gwt и добавьте наследование в свой модуль.

Чтобы сделать вещи проще, генератор этой темы: http://gwt-theme-generator.appspot.com/ генерирует как CSS, так и изображения для стиля GWT. Это должно помочь вам быстро начать. Он содержит стиль .gwt-Decorated.