Question

我有一个扩展Composite的类，并在关联的UiBinder文件的顶层包含DisclosurePanel。

在DisclosurePanel中，HTML如下所示：

<table class="gwt-DisclosurePanel gwt-DisclosurePanel-closed>
  <tr>
    <td>
      <a href="javascript:void(0);" style="display: block;" class="header">
        <div class=""> <!-- an HTMLPanel I've shoved in to a <gwt:customHeader> block -->
           ...
        </div>
      </a>
...

在我的UiBinder文件中，我可以使用addStyleNames =“{style。???}”并设置一些样式，比如我可以设置DisclosurePanel本身的样式，我可以在其中设置我的HTMLPanel样式，但我无法设置样式< / p>

<a>

除此之外：

disclosurePanel.getHeader().getParent().getElement().getStyle().setTextDecoration(TextDecoration.NONE);
disclosurePanel.getHeader().getParent().getElement().getStyle().setColor("black");

在代码中，但这很难看，而且样式现在分为两个地方，即代码和UiBinder文件。

我这样做的原因是为了摆脱默认情况下的下划线和蓝色。另一种选择是做这样的事情：

.gwt-DisclosurePanel a {
    text-decoration: none;
    text: black;
}

但是我需要从我的主页（Client.html）引用该CSS文件或从gwt.xml文件引用，但是这两种方法都不推荐使用。

我如何以更好的方式做到这一点，还是不可能？

Answer 1

嗯......将确保注入（）做我的事想？我可以只定义一个CssResource 和一个引用的ClientBundle 那个CssResource然后调用 EnsureInjected在CssResource和它会注入所有的CSS，即使我没有引用所有的方法我的CssResource子界面？

是和否 - 您必须disable CSS obfuscation（<set-configuration-property name="CssResource.style" value="pretty" /> - 警告，这是全局的，所以可能不是您想要的），以使其发挥作用。但是，如果你只是从你的UiBinder模板中引用这些类名，你应该没问题：

<!-- Insert usual UiBinder stuff here -->
<ui:with field='res' type='com.example.client.resource.SomeCoolBundle'/>
<!-- SomeCoolBundle has a CssResource defined and available via style() -->

<div class='{res.style.lbox}'></div>

请记住在CSS文件中将GWT类标记为@external，否则您将无法覆盖它们（因为它们会被混淆）：

@external .gwt-TextBox, .gwt-PasswordTextBox, .gwt-Button, .gwt-CheckBox;

如果这不符合您的需求（或者是繁琐的），那么做会使用其中一种“已弃用”（非实际）方法。

Answer 2

我会在UIBinder中声明我的样式，然后在我的java代码中添加CssResource。

在UiBinder中：

   <ui:style field="dPanelStyle" type="com.*.client.*.JavaFile.DisclosurePanelStyle">
        .main {
            padding-top:10px;
            padding-left:10px;
            width:492px;
        }
        .open {
        }
        .closed {
        }
        .header,
        .header a,
        .header td {
            text-decoration: none;
            color: black; 
            cursor: pointer;
            cursor: hand;
            font-weight: bold;
            background-color:#A2DCE8;
        }
        .content {
            border-left: 0px solid white;
            padding: 0px 0px 0px 8px;
            margin-left: 0px;
        }        
    </ui:style>

    <g:HTMLPanel>
        <g:DisclosurePanel ui:field="dPanel" styleName="{dPanelStyle.main}">
        </g:DisclosurePanel>
    </g:HTMLPanel>

在JavaFile.java中：

public interface DisclosurePanelStyle extends CssResource {
    String main();
    String header();
    String content();
}

@UiField DisclosurePanelStyle dPanelStyle;
@UiField DisclosurePanel dPanel ;

public JavaFile() {
    initWidget(uiBinder.createAndBindUi(this));

    dPanel.getHeader().setStyleName( dPanelStyle.header() );
    dPanel.getContent().setStyleName( dPanelStyle.content() );
}

在GWT中，如何使用<ui：style>或ClientBundle </ui：style>覆盖DisclosurePanel的CSS

2 个答案: