java GWT设置TabLayoutPanel的样式时出现问题

Question

我想使用TabLayoutPanel实现一个水平导航栏，使用自定义样式来满足我的需要

但是我不知道如何覆盖default样式。下面是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">
  <ui:style>
    .gwt-TabLayoutPanel .gwt-TabLayoutPanelHeader {
      background-color: red;
      padding: 0;
      margin: 0;
    }
  </ui:style>
  <g:TabLayoutPanel barHeight="3.75" barUnit="EM">
    <g:tab>
      <g:header>Latest</g:header>
      <g:Label>Latest Activities</g:Label>
    </g:tab>
    <g:tab>
      <g:header>Patients</g:header>
      <g:Label>Patients</g:Label>
    </g:tab>
  </g:TabLayoutPanel>
</ui:UiBinder>

这不管用。但是如何引用默认样式呢

Answer 1

我认为附加一个单独的css-内联样式用于同一模板中的{style.xyz}。实际上还有第二个解决方案。如果你坚持把它放在用户界面上。xml-使用外部作用域：http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes

Answer 2

下面是一个有效的例子

http://code.google.com/p/salvadordiaz/source/browse/trunk/gwt-exception-handler/src/fr/salvadordiaz/gwt/client/BlocImage.ui.xml?spec=svn56&r=56

Answer 3

经过一些研究，我使用了下面的方法，它的工作。。。我正在使用GWT2.5

/**the panel itself**/
.gwt-TabLayoutPanel {
    border: none;
    margin: 0px;
    padding: 0px;
}
/**the tab bar element**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
    background-color: #F4F4F4 !important;
}
/**an individual tab**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab {
    background-color: #6F6F6E !important;
}

.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected {
    background-color: white !important;
}
/**an element nested in each tab (useful for styling)**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner {
    font-family: Arial !important;
}

/**applied to all child content widgets**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
    border: none;
    margin: 0px;
    overflow: hidden;
    padding: 15px;
}

Answer 4

或者您可以简单地将!important添加到样式定义中

Answer 5

如果您想了解GWT css文件的声明方式：

1. 打开gwt用户。罐子
2. 查找主题包，即：com。谷歌。gwt。使用者主题为清洁主题清洁，并打开public/gwt/clean/clean。css
3. 找到方法。gwt TabLayoutPanel，看看它是如何声明的
4. 制作您自己的css文件并在您的模块中声明它。gwt。xml

如果需要，可以更改主题

Answer 6

为了详细说明atamur的答案，他建议的第二个选项实际上是两个选项中最好的一个，特别是如果您的所有其他样式都是使用UiBinder或客户端包设置的。基本上，在初始<ui:style>标记下面添加以下行：

@external .gwt-TabLayoutPanel .gwt-TabLayoutPanelHeader

问题是GWT混淆了您在UiBinder模板中定义的样式规则。因此，当您编写“gwt TabLayoutPanel”时，它会被混淆为“GMDW0RHDH”之类的内容，然后再也不会应用于TabLayoutPanel的元素。添加“@external”将禁用此混淆，并允许按预期应用UiBinder中的样式