2015-04-07 68 views
2

我想創建一個佈局uibinder以在其他的uibinder中使用。創建一個可重用的佈局樣式uibinder

我有一個我經常使用的佈局模式,它有很多html和放置內容的地方。我想創建一個uibinder,並把它放在所有佈局相關的html中,然後我會在我的其他uibinders中使用這個uibinder(稱爲<my:myHTMLPanel>),並從xml文件中提供它的內部html,如下所示:

<my:myHTMLPanel> 
    Hello world(+other wigets or html) 
</my:myHTMLPanel> 
<my:myHTMLPanel> 
    How are you 
</my:myHTMLPanel>? 

是甚至可能的?

回答

2

在您的自定義窗口小部件 「myHTMLPanel」,你可以添加此功能:

@UiChild 
public void addContent(Widget content) { 
    // add the content in your custom widget 
} 

然後,您可以使用它像在ui.xml部分:

<my:myHTMLPanel> 
    <my:content> 
     <g:HTML> Hello world </g:HTML> 
    </my:content> 
</my:myHTMLPanel> 
0
<!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> 
    .VCenter { 
     vertical-align: middle; 
    } 
    </ui:style> 
    <g:HTMLPanel styleName="{style.VCenter}" ui:field="Wrapper"> 
     <table class="{style.VCenter}" width="100%" valign="middle" border="0" ui:field="Table"> 
      <tr class="{style.VCenter}" valign="middle"> 
       <td class="{style.VCenter}" valign="middle"> 
        <g:HTMLPanel styleName="{style.VCenter}" ui:field="Container"></g:HTMLPanel> 
       </td> 
      </tr> 
     </table> 
    </g:HTMLPanel> 
</ui:UiBinder> 


package package; 

import java.util.Iterator; 

import com.google.gwt.core.client.GWT; 
import com.google.gwt.dom.client.Style.Unit; 
import com.google.gwt.dom.client.TableElement; 
import com.google.gwt.event.dom.client.ClickEvent; 
import com.google.gwt.event.dom.client.ClickHandler; 
import com.google.gwt.event.dom.client.HasClickHandlers; 
import com.google.gwt.event.shared.GwtEvent; 
import com.google.gwt.event.shared.HandlerManager; 
import com.google.gwt.event.shared.HandlerRegistration; 
import com.google.gwt.uibinder.client.UiBinder; 
import com.google.gwt.uibinder.client.UiChild; 
import com.google.gwt.uibinder.client.UiConstructor; 
import com.google.gwt.uibinder.client.UiField; 
import com.google.gwt.user.client.ui.HTMLPanel; 
import com.google.gwt.user.client.ui.HasWidgets; 
import com.google.gwt.user.client.ui.IsWidget; 
import com.google.gwt.user.client.ui.Widget; 

public class VCentered implements HasWidgets, IsWidget, HasClickHandlers { 

    private static VCenteredUiBinder uiBinder = GWT 
      .create(VCenteredUiBinder.class); 

    interface VCenteredUiBinder extends UiBinder<Widget, VCentered> { 
    } 

    HandlerManager handlerManager; 
    @UiField HTMLPanel Container; 
    @UiField HTMLPanel Wrapper; 
    @UiField TableElement Table; 

    public void setHeight(String height) { 
     Table.getStyle().setHeight(Integer.parseInt(height), Unit.PX); 
    } 

    public @UiConstructor VCentered(String height) { 
     handlerManager = new HandlerManager(Container); 
     uiBinder.createAndBindUi(this); 
     setHeight(height); 
    } 

    @Override 
    public Widget asWidget() { 
     return Wrapper; 
    } 

    @UiChild 
    public void addContent(Widget content) { 
     Container.add(content); 
    } 
    @Override 
    public void add(Widget w) { 
     Container.add(w); 
    } 

    @Override 
    public void clear() { 
     Container.clear(); 
    } 

    @Override 
    public Iterator<Widget> iterator() { 
     return Container.iterator(); 
    } 

    @Override 
    public boolean remove(Widget w) { 
     return Container.remove(w); 
    } 

    @Override 
    public void fireEvent(GwtEvent<?> event) { 
     handlerManager.fireEvent(event); 
    } 

    @Override 
    public HandlerRegistration addClickHandler(ClickHandler handler) { 
     return Container.addDomHandler(handler, ClickEvent.getType()); 
    } 
} 

這是垂直居中未知高度的兒童的無人機