GWT - CssResource -通用风格-良好实践

Question

我有5个视图(.ui.xml)。在每个视图上，我都会粘贴这样的内容：

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

在每个页面的每个按钮上，我都添加了styleName属性：

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

我的问题是:我必须为我所有的按钮都放上styleName吗？我想为这种小工具做一些一般的风格。对于这种情况，什么是好的实践？

Answer 1

您是否尝试过自定义GWT themes或创建自己的own？我认为这就是你需要做的。

Answer 2

通过扩展组合来创建您自己的按钮MyButton，并使用样式定义此按钮的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>

如果您需要在您的个人小部件上设置文本或其他属性，只需从包装的按钮中委托这些方法来公开它们。

Answer 3

一种方法是使用addStyleDependentName()，它将通过将附加样式附加到主样式名称来创建附加样式，并允许您应用特定的样式。

例如，.gwt-Button是Button的默认主要样式。如果您希望以相同的方式设置一组5 (N)个按钮的样式，则可以使用实例化它们，这将为该按钮添加额外的样式：.gwt-Button-customButton，您可以将其添加到.css文件中，然后将其包含在模块中一次。