Home/ Questions/Q 6970329
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T16:41:46+00:00

I need help with some gwt (ui:binder) code. I would like to add the

  • 0

I need help with some gwt (ui:binder) code.
I would like to add the content of the div element to the center of my DockLayoutPanel

The interesting part of my html file:

  ...     
  <body>
        <div id="Browser"></div>
  </body>  
  ...

My 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">
    <ui:style>
        .westPanel {
            background-color: #00FFFF;
        }
        .northPanel {
            background-color: #FF0000;
        }
        .southPanel {
            background-color: #FFFF00;
        }
        .centerPanel {
            background-color: #FFFFFF;
        }
    </ui:style>
     <g:DockLayoutPanel unit='EM'>
       <g:north size='8'>
         <g:FlowPanel styleName="{style.northPanel}">
           <g:Label>NORTH panel</g:Label>
         </g:FlowPanel>
       </g:north>
       <g:west size='5'>
         <g:FlowPanel styleName="{style.westPanel}">
           <g:Label>Navigation panel</g:Label>
           <g:ListBox ui:field='listBox' visibleItemCount='5'/>
         </g:FlowPanel>
       </g:west>
       <g:center>
         <g:FlowPanel styleName="{style.centerPanel}">  

<!--             <g:HTMLPanel>  -->
<!--             <div id="Browser"> -->
<!--            </div> -->
<!--             </g:HTMLPanel> -->

         </g:FlowPanel>
       </g:center>
        <g:south size="5">
         <g:FlowPanel styleName="{style.southPanel}">
           <g:Label>SOUTH panel</g:Label>
         </g:FlowPanel>
        </g:south>
     </g:DockLayoutPanel>
</ui:UiBinder>

My owner class:

public class MyDockLayoutPanel extends Composite {

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

@UiField ListBox listBox;

interface MyDockLayoutPanelUiBinder extends
        UiBinder<Widget, MyDockLayoutPanel> {
}

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

public MyDockLayoutPanel(String... paths ) {
    initWidget(uiBinder.createAndBindUi(this));
    for (String path : paths) {
        listBox.addItem(path);
    }
}    
}

This didn’t work for me :

public class HelloUiBinder implements EntryPoint {

     public void onModuleLoad() {

         RootLayoutPanel.get().add(new MyDockLayoutPanel());
         MyDockLayoutPanel mydocklayoutpanel = new MyDockLayoutPanel("able","baker","charlie");

         MyDockLayoutPanel mydocklayoutpanelID = new MyDockLayoutPanel();

         RootPanel.get("Browser").add(mydocklayoutpanelID);

         RootLayoutPanel.get().add(mydocklayoutpanelID);
         RootLayoutPanel.get().add(mydocklayoutpanel); 
     }
}

How can I add the “Browser” to the center of my mydocklayoutpanel ?
Thanks in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Normally, Widgets are added to a div, not the opposite. So you can actually create a widget that wrap the “Browser” using HTMLPanel and then add it to MyDockLayoutPanel , here is an example:

    Browser.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">
<ui:style>
   <g:HTMLPanel>  

   </g:HTMLPanel>

    Browser.java

    public class BrowserPanel extends Composite {
   private static BrowserPanelUiBinder uiBinder = 
   GWT.create(BrowserPanelUiBinder.class);
   interface BrowserPanelUiBinder extends   UiBinder<Widget, BrowserPanelPanel> {}

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

    The entryPoint 

    public class HelloUiBinder implements EntryPoint {
 public void onModuleLoad() {
 MyDockLayoutPanel mydocklayoutpanel = new MyDockLayoutPanel    ("able","baker","charlie");
 mydocklayoutpanel.addWidget(new BrowserPanel());
 RootPanel.get().add(mydocklayoutpanel);
 }

    }

    In MyDockLayoutPanel.ui.xml change the FlowPanel 

    <g:center>
 <g:FlowPanel styleName="{style.centerPanel}" ui:field="browser"> 
    </g:FlowPanel>
</g:center>

    in MyDockLayoutPanel.java add : 

    @UiField FlowPanel browser;    
    ...      
    public void addWidget(Widget widget){
    browser.add(widget);
    }
    • 0