在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

回答

相關問題