2013-05-04 60 views
2

如何在使用UiRenderer和GWT 2.5時更改跨度HTML元素的樣式? 我已經在CellTable中設置了一個簡單的單元格。該ui.xml看起來是這樣的:使用UiRenderer更改GWT Cell的跨度元素樣式

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"> 
<ui:with field='stkval' type='java.lang.String'/> 
<ui:with field='stkchg' type='java.lang.String'/> 
<ui:with field='res' type='com.mycompanyclient.client.Enres'/> 

<div id="parent"> 
    <span><ui:text from='{stkval}'/></span>. 
    [<span class="{res.newstyle.positive}" ui:field="signSpan"> 
     <ui:text from='{stkchg}'/> 
    </span>] 
</div> 
</ui:UiBinder> 

現在,當這個小區由CellTable實例化,我希望改變基於傳遞到render函數值要更改的signSpan的類名。我的Java代碼看起來是這樣的:

public class IndCell extends AbstractCell<QuoteProxy> { 

@UiField 
SpanElement signSpan; 
@UiField(provided=true) 
Enres res = Enres.INSTANCE; 

interface MyUiRenderer extends UiRenderer { 
    SpanElement getSignSpan(Element parent); 
    void render(SafeHtmlBuilder sb, String stkval,String stkchg); 
} 
private static MyUiRenderer renderer = GWT.create(MyUiRenderer.class); 

public IndCell() { 
    res.newstyle().ensureInjected(); 
} 


@Override 
public void render(com.google.gwt.cell.client.Cell.Context context, 
     QuoteProxy value, SafeHtmlBuilder sb) { 
      if (value.getChangeSign().contentequals('d')) { 
    renderer.getSignSpan(/* ?? */).removeClassName(res.newstyle().negative()); 
      renderer.getSignSpan(/* ?? */).addClassName(res.newstyle().positive()); 
      } 
    renderer.render(sb, value.getAmount(),value.getChange()); 
} 

如果我嘗試使用UiField直接將其設置爲NULL。這是有道理的,因爲我沒有像我爲UiBinder那樣調用createandbindui函數。 renderer.getSignSpan看起來很有希望,但我不知道要通過什麼父母。 我可以找到的所有示例都使用event來標識父級。但我不想單擊生成的單元格。

在渲染方法中是否有改變樣式的方法?

回答

1

因爲該元素的class不是一個常數,你會想要將它作爲參數傳遞給render方法使電池的render寫着:

public void render(Cell.Context context, QuoteProxy value, SafeHtmlBuilder sb) { 
    renderer.render(sb, value.getAmount(), value.getChange(), 
     value.getChangeSign().contentequals('d') ? res.newstyle.positive() : res.newstyle.negative()); 
} 
+0

沒有意識到類字段可以獲得**更改**值。在ui.xml中,我添加了''並且它工作正常。看起來它不需要用戶界面:文本在那裏...感謝您的幫助。 – 2013-05-04 12:53:18

1

我只是想,我會提供對於那些仍在爲此苦苦掙扎的人們提供了一個示例解決方案。如果您想在渲染之前設置樣式,例如呈現正值爲「綠色」,負值爲「紅色」,則需要執行以下操作:

這將是您的電池類:

import com.google.gwt.cell.client.AbstractCell; 
import com.google.gwt.core.client.GWT; 
import com.google.gwt.safehtml.shared.SafeHtmlBuilder; 
import com.google.gwt.uibinder.client.UiRenderer; 

public class ExpenseInfoCell extends AbstractCell<YourClassProxy> { 

    interface ExpenseInfoCellUiRenderer extends UiRenderer { 
     void render(SafeHtmlBuilder sb, String cost, String newStyle); 

     ValueStyle getCostStyle(); 
    } 

    private static ExpenseInfoCellUiRenderer renderer = GWT 
      .create(ExpenseInfoCellUiRenderer.class); 

    @Override 
    public void render(Context context, YourClassProxy value, SafeHtmlBuilder sb) { 

     String coloredStyle = (value.getCost() < 0) ? renderer.getCostStyle() 
       .red() : renderer.getCostStyle().green(); 

     renderer.render(sb, value.getCost()), 
       coloredStyle); 
    } 

} 

,這將是伴隨UiBinder的XML文件

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"> 
    <ui:style field="costStyle" type="com.myproject.client.tables.MyValueStyle"> 
     .red { 
      color: red; 
     } 

     .green { 
      color: green; 
     } 
    </ui:style> 

    <ui:with type="java.lang.String" field="cost" /> 
    <ui:with type="java.lang.String" field="newStyle" /> 
    <div> 
     <span class='{newStyle}'> 
      <ui:text from='{cost}' /> 
     </span> 
    </div> 
</ui:UiBinder> 

此外,請注意該字段= 「costStyle」 類中的 「getCostStyle」,吸氣相匹配。你必須遵循這個命名約定,否則渲染器會拋出一個錯誤。

相關問題