Перегрузка стиля GWT + CSS

Question

Я ищу некоторые пользовательские виджеты GWT в едином стиле, не требуя от дизайнера входить в каждый пользовательский интерфейс каждого виджета каждый раз, когда им хочется, чтобы что-то появилось по-другому. Я бы предоставил кучу базовых стилей для элементов в виджетах, и дизайнер приходит позже и устанавливает в UIBinder, HTML, CSS все, что угодно, стиль с использованием того же селектора.

Например: У меня есть составной виджет, который у меня установлен для использования CSSResource. Этот ресурс CSS имеет стиль с именем .myHeaderStyle, который применяется к элементу на композите.

Этот композит используется в другом виджетах GWT и должен выглядеть немного по-другому при использовании в охватывающем виджетах.

Моя надежда заключается в том, что я могу указать другой стиль в определении UIBIN этого UI, также называемого .myHeaderStyle, и этот стиль переопределяет стиль, указанный в CSSResource составного виджета.

Однако, в моих попытках сделать это возможно даже с! Важным включением в свойства стиля, которые должны переопределить начальный стиль, я получаю только исходный .myHeaderStyle, установленный в составном виджетах.

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

Является ли то, что я пытаюсь сделать в той или иной форме с помощью GWT + CSS?

Answer 1

После создания сложных приложений GWT в течение 6 лет я являюсь большим сторонником использования одного CSS-файла для всего приложения и никогда не использую ресурсы CSS или определения UIBinder. После этого вы можете установить «.myWidget» стиль виджета, и ваш дизайнер может сделать:

.myHeaderStyle { 
    font-size: 1.4rem; 
} 
.myWidget .myHeaderStyle { 
    font-size: 1.6rem; 
} 

На мой взгляд, это самый простой способ для поддержания согласованности по всему приложению - все стили находятся в одном месте, используя наследования, блага и других передовых методов. Разработчикам гораздо проще, что ресурсы CSS разбросаны по всему приложению.

Кстати, это также самый простой подход для реализации тем (или скинов) или изменение CSS на основе размера экрана, не касаясь кода.

EDIT:

Это пример одного из моих приложений:

<g:HTMLPanel> 
    <g:Label ui:field="logo" styleName="logo">My App</g:Label> 
    <div class="menu" > 
     <div class="tab" > 
      <g:Label ui:field="tab1" ><ui:text from="{constants.tab1}" /></g:Label> 
      <g:Label ui:field="tab2" ><ui:text from="{constants.tab2}" /></g:Label> 
      <g:Label ui:field="tab3" ><ui:text from="{constants.tab3}" /></g:Label> 
     </div> 
    </div> 
</g:HTMLPanel> 

Обратите внимание, что я использую «класса» для сНа элемента, но StyleName для виджета. Я не ставлю стиль на моих закладках этикетки, потому что я использую CSS, чтобы стиль их все сразу:

.tab>div { 
    float: right; 
    margin: 0 0 0 6px; 
    padding: 2px 6px; 
    width: 120px; 
}