How can I create a widget that wraps the main content and delivers a default design?

Question

I want to create a wrapper-widget that is providing some kind of "default" layout for different pages. I want to be able to do something like this:

<!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"
    xmlns:m="urn:import:gwt.material.design.client.ui"
    xmlns:m.addins="urn:import:gwt.material.design.addins.client.ui"
    xmlns:mz="urn:import:com.mz.client.admin.widget"
    >

    <ui:style>
    </ui:style>

    <mz:defaultpagelayout.DefaultPageLayout>        
        <m:MaterialTitle title="Basic Information"/>
        <m:MaterialTextBox text="Forename"/>
        <m:MaterialTextBox text="Surname"/>        
    </mz:defaultpagelayout.DefaultPageLayout>

</ui:UiBinder>

Where DefaultPageLayout is just a container that provides a certain look for the actual content. I've tried to do it like this:

DefaultPageLayout.ui.xml:

<!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" 
    xmlns:m="urn:import:gwt.material.design.client.ui"
    xmlns:m.addins="urn:import:gwt.material.design.addins.client.ui">

    <ui:style>
    .main-content {
        padding: 20px;
    }   
    </ui:style>

    <g:HTMLPanel addStyleNames="{style.main-content}">
    </g:HTMLPanel>
</ui:UiBinder> 

DefaultPageLayout.java:

public class DefaultPageLayout extends Composite {

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

    interface DefaultPageLayoutUiBinder extends UiBinder<Widget, DefaultPageLayout> {
    }

    public DefaultPageLayout() {
        this.initWidget(uiBinder.createAndBindUi(this));
    }
}

But this is actually not working:

[ERROR] Found unexpected child element: <m:MaterialTitle title='Basic Information'> (:13)

What do I have to do to get such a widget working for me here?

Answer 1

Your DefaultPageLayout needs to implement HasWidget (and ideally HasWidgets.ForIsWidget)