CODEWITHSUNDEEP
gwtuibinder
Abhinav
Abhinav

Reputation: 1015

Gwt UIBinder DockLauout north element raise error as must contain a widget, but found <app:HeaderPanel ui:field='headerPanel'>

While trying to use Gwt UIBinder to have a custom widget loaded from main UI i am getting exception as 

[ERROR] <g:north size='5'> must contain a widget, but found <app:HeaderPanel ui:field='headerPanel'> Element <g:DockLayoutPanel styleName='{style.outer}' unit='EM'> (:8)

while parsing XML in development mode. Below is the XML which I created for the same

<!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:app='urn.import:com.test.test.client'
    xmlns:test='urn.import=com.test.test.client'>
     <ui:style src="Resources/GlobalStyles.css" />

  <g:DockLayoutPanel unit='EM' styleName='{style.outer}'>

    <g:north size='5'>
      <app:HeaderPanel ui:field='headerPanel' />
    </g:north>

    <g:west size='14'>
      <test:FriendList ui:field='friendList' />
    </g:west>

    <g:center>
      <g:HTMLPanel styleName='{style.boxPadding}'>

        <div class="{style.titleBar}">Latest Activity</div>
        <g:ScrollPanel ui:field='mainPanel' styleName='{style.mainPanel}' />
      </g:HTMLPanel>
    </g:center>

    <g:south size="3">
      <g:HTMLPanel styleName='{style.footerPanel}'>
        <div>
          <a href="#">Contact us</a>
          |
          <a href="#">Privacy</a>
          |
          <a href="#">About</a>
        </div>
      </g:HTMLPanel>
    </g:south>

  </g:DockLayoutPanel>

</ui:UiBinder>

The headerPanel widget exits in the hierarchy. The corresponding code for above UiBinder is given below

public class TestApp implements EntryPoint {

    @UiField
    HeaderPanel headerPanel;
    @UiField
    ScrollPanel mainPanel;


    RootLayoutPanel root;

    private static TestApp singleton;

    public static TestApp get() {
        return singleton;
    }

    interface TestAppUiBinder extends UiBinder<DockLayoutPanel, TestApp> {
    }

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


    @Override
    public void onModuleLoad() {
        // TODO Auto-generated method stub
        singleton = this;
        DockLayoutPanel outer = uiBinder.createAndBindUi(this);

        root = RootLayoutPanel.get();
        root.add(outer);
    }

}

Basically I am novice in Gwt and trying to learn the things. Any pointer in this regard will be a great help.

Thanks.

Upvotes: 0

Views: 453

Answers (2)

Abhinav
Abhinav

Reputation: 1015

Issue got fixed as it was xml parsing issue. Thanks for providing inputs.

Upvotes: 0

Chris Hinshaw
Chris Hinshaw

Reputation: 7285

What is <app:HeaderPanel ui:field='headerPanel' />? If it does not extend Widget then it will not work. Try putting <g:Label>FOO</g:Label> in there and see if it works. Also make sure that your xmlns is correct. It will look for Header Panel in the package com.test.test.client. If you are trying to use the gwt Header Panel then it needs to be 

<g:HeaderPanel ui:field="headerPanel" />

I think you are misunderstanding the xmlns. This tells gwt where to look for your java class. Both app and test are pointing to the same package. You should only add namespaces when you want to include your own custom widget classes or extra things like CellTable and DataGrid. I believe you are wanting to use the header.

Upvotes: 1

Related Questions