创建一个可重用的布局样式uibinder

我想创建一个布局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>?

是甚至可能的？

来源

2015-04-07 Mohammad Amin

在您的自定义窗口小部件 “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>

来源

2015-04-07 09:17:28

<!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()); 
    } 
}

这是垂直居中未知高度的儿童的无人机

来源

2015-04-07 11:30:48

创建一个可重用的布局样式uibinder

回答

相关问题