Сложности в оформлении интерфейсов GWT

Question

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

Answer 1

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.

Answer 2

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

• .gwt-DecoratedStackPanel {сама панель}
• .gwt-DecoratedStackPanel .gwt-StackPanelItem {невыбранные элементы}
• .gwt-DecoratedStackPanel .gwt-StackPanelItem-selected {выбранные элементы}
• .gwt-DecoratedStackPanel .gwt-StackPanelContent {обертка вокруг содержимого элемента}
• .gwt-DecoratedSta.stackItemTopLeft {левый верхний угол элемента}
• .gwt-DecoratedStackPanel .stackItemTopLeftInner {внутренний элемент ячейки}
• .gwt-DecoratedStackPanel .stackItemTopCenter {верхний центр элемента}1021 *
• .gwt-DecoratedStackPanel .stackItemTopCenterInner {внутренний элемент ячейки}
• .gwt-DecoratedStackPanel .stackItemTopRight {верхний правый угол элемента}
• .gwt-DecoratedStaPPstackItemTopRightInner {внутренний элемент ячейки}
• .gwt-DecoratedStackPanel .stackItemMiddleLeft {левая сторона элемента item}
• .gwt-DecoratedStackPanel .stackItemMiddleLeftInner {внутренний элемент ячейки}
• .gwt-DecoratedStackPanel .stackItemMiddleCenter {центр элемента, в котором находится текст элемента}}
• .gwt-DecoratedStackPanel .stackItemMiddleCenterInner {внутренний элемент ячейки}}элемент ячейки}

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