GWT - CssResource - общий стиль - хорошая практика

Question

У меня 5 просмотров (.ui.xml). При каждом просмотре я вставляю что-то подобное:

<ui:style src="../MyStyle.css" />

и на каждой кнопке на каждой странице я помещаю атрибут styleName:

<g:Button ui:field="buttonName" styleName="{style.myButtonStyle}" />

Мой вопрос: нужно ли указывать styleName для всех моих кнопок? Я хотел бы сделать что-то общий стиль для этого вида виджетов. Какова хорошая практика для этого случая?

Answer 1

Вы пытались настроить GWT темы или создать свою собственную? Я думаю, что это то, что вам нужно сделать.

Answer 2

Один из способов - использовать addStyleDependentName(), который создаст дополнительный стиль, добавив его к основному имени стиля, и позволит вам применить определенный стиль.

Например, .gwt-Button является основным стилем по умолчанию для Button. Если у вас есть набор из 5 (N) кнопок, которые вы хотите создать таким же образом, вы бы создали их экземпляр, что добавило бы дополнительный стиль для этой кнопки: .gwt-Button-customButton, который вы можете добавить в файл .css и включите в модуль один раз.

Answer 3

Создайте свою собственную кнопку MyButton, расширив Composite и определите UIBinder для этой кнопки со стилем один раз.

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

Вот ваш виджет:

package com.example.widgets;
...
public class MyButton extends Composite {

    interface MyButtonUiBinder extends UiBinder<Widget, MyButton> {
    }

    private static MyButtonUiBinder uiBinder = GWT.create(MyButtonUiBinder.class);

    @UiField
    Button wrapped;

    public MyButton() {
        initWidget(uiBinder.createAndBindUi(this));
    }

}

и файл UIBinder:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>

    <ui:style>
        .myStyle {
            text-shadow: gray;
            color: gray;
            font-size: 12px;
            text-decoration: italic;    
        }
    </ui:style>

    <g:HTMLPanel>
            <g:Button ui:field="wrapped" styleName="{style.myStyle}" />
    </g:HTMLPanel>
</ui:UiBinder>

По вашему мнению, теперь вы можете включить эту кнопку в файлы UIBinder:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g='urn:import:com.google.gwt.user.client.ui' xmlns:k='urn:import:com.example.widgets'>

 <g:AbsolutePanel width="350px" height="225px">
        <g:at left='10' top='0'> 

                 <k:MyButton></k:MyButton>
</g:at>
</g:AbsolutePanel>

</ui:UiBinder>

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