在GWT中，我如何使用<ui:style>或ClientBundle

覆盖DisclosurePanel的CSS我有一个扩展了Composite的类，并在关联的UiBinder文件的顶层包含一个DisclosurePanel。在GWT中，我如何使用<ui:style>或ClientBundle

在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 =“{风格???}”和风格的一些东西，比如我可以风格的DisclosurePanel本身我可以我的样式里面的HTMLPanel，但我不能样式的

<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）或引用从gwt.xml文件引用CSS文件，但两者的那些方法做事不推荐。

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

来源

2010-07-30 dgrant

所以，你想要的是应用CSS而不使用CSS，是不是？这非常不寻常的要求是什么原因？ – 2010-07-30 23:21:18

我所有的小部件都使用UiBinder文件，并在块中定义了一些css。我希望能够用这个小部件做同样的事情来设计锚元素，但它似乎不可能。你是什么意思我想不使用CSS应用CSS？我不认为我说过，所以我们必须误解对方。 – dgrant 2010-07-30 23:34:20

嗯...将ensureInjected（）做我想要的？我可以定义一个引用该CssResource的CssResource和ClientBundle，然后在CssResource上调用ensureInjected并且它将注入所有的CSS，即使我没有引用CssResource子接口上的所有方法？ – dgrant 2010-07-31 00:18:37

嗯...... will ensureInjected（）做我想要的？我可以定义一个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;

如果这不符合您的需求（或者是繁琐），通过各种手段做使用的那些“过时”（不是真的）方法之一。

来源

2010-07-31 10:06:50

@external是我需要感谢的。 – dgrant 2010-08-04 23:18:09

我会在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()); 
}

来源

2013-03-07 16:00:20 oski

在GWT中，我如何使用<ui:style>或ClientBundle

回答

相关问题