Question

我需要一些gwt（ui：binder）代码的帮助。我想将div元素的内容添加到我的DockLayoutPanel的中心

我的html文件的有趣部分：

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

我的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>

我的老板班：

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

这对我不起作用：

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

如何将“浏览器”添加到mydocklayoutpanel的中心？提前谢谢！

Answer 1

通常情况下，小部件会添加到div中，而不是相反。因此，您实际上可以创建一个使用HTMLPanel包装“浏览器”的小部件，然后将其添加到MyDockLayoutPanel，这是一个示例：

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

entryPoint

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

}

在MyDockLayoutPanel.ui.xml中更改FlowPanel

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

在MyDockLayoutPanel.java中添加：

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

Answer 2

尝试使用Document.get().getElementById()和HTMLPanel.wrap() [1]将div作为窗口小部件，然后将其移动到DockLayoutPanel（只需将其添加为子项）

[1] http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/HTMLPanel.html#wrap(com.google.gwt.dom.client.Element）

gwt-ui：binder：请更正我的代码

2 个答案: