无法让 SplitLayoutPanel 工作 - GWT + UIBinder 让我发疯

发布于 2024-08-26 07:27:48 字数 1088 浏览 3 评论 0 原文

...
<g:VerticalPanel styleName="{style.mainVerticalPanel}">
    <g:SplitLayoutPanel>
    <g:north size="700">
        <g:VerticalPanel>
                <g:ScrollPanel styleName="{style.conversationPanelContainer}">
                    <g:FlexTable ui:field="conversationPanel" styleName="{style.conversationPanel}"></g:FlexTable>
                </g:ScrollPanel>
                <g:HorizontalPanel styleName="{style.messageTextAndSendPanel}">
                    <g:TextBox ui:field="messageText" styleName="{style.messageText}"></g:TextBox><g:Button ui:field="sendButton">Send</g:Button>
                </g:HorizontalPanel>
        </g:VerticalPanel>
    </g:north>
    <g:south size="300">
    <g:button>TestButton</g:button>
    </g:south>
    </g:SplitLayoutPanel>
</g:VerticalPanel>
...

这看起来有什么问题吗？我想做的就是制作一个简单的分割面板，但每当我运行它时，我得到的只是一个空白页面。没有任何 SplitPanel 东西，它工作得很好。 DockLayoutPanel 也会发生同样的情况。

原文

...
<g:VerticalPanel styleName="{style.mainVerticalPanel}">
    <g:SplitLayoutPanel>
    <g:north size="700">
        <g:VerticalPanel>
                <g:ScrollPanel styleName="{style.conversationPanelContainer}">
                    <g:FlexTable ui:field="conversationPanel" styleName="{style.conversationPanel}"></g:FlexTable>
                </g:ScrollPanel>
                <g:HorizontalPanel styleName="{style.messageTextAndSendPanel}">
                    <g:TextBox ui:field="messageText" styleName="{style.messageText}"></g:TextBox><g:Button ui:field="sendButton">Send</g:Button>
                </g:HorizontalPanel>
        </g:VerticalPanel>
    </g:north>
    <g:south size="300">
    <g:button>TestButton</g:button>
    </g:south>
    </g:SplitLayoutPanel>
</g:VerticalPanel>
...

Anything look wrong with this? All I'm trying to do is make a simple split panel but whenever I run this all I get is a blank page. Without any of the SplitPanel stuff, it works fine. The same happens with DockLayoutPanel.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淡淡绿茶香 2024-09-02 07:27:48

好的，让它工作了（有关以前的尝试，请参阅此答案的旧版本；））。

我的解决方案基于邮件示例。
工作代码：

public class SplitTest implements EntryPoint {

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

    interface TestUiBinder extends UiBinder<SplitLayoutPanel, SplitTest> {
    }

    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        SplitLayoutPanel outer = uiBinder.createAndBindUi(this);

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

UiBinder *.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>
    .conversationPanelContainer, .conversationPanel, .messageTextAndSendPanel, .messageText {
      font-weight: bold;
    }
  </ui:style>
    <g:SplitLayoutPanel>
    <g:north size="700">
        <g:VerticalPanel>
                <g:ScrollPanel styleName="{style.conversationPanelContainer}">
                    <g:FlexTable ui:field="conversationPanel" styleName="{style.conversationPanel}"></g:FlexTable>
                </g:ScrollPanel>
                <g:HorizontalPanel styleName="{style.messageTextAndSendPanel}">
                    <g:TextBox ui:field="messageText" styleName="{style.messageText}"></g:TextBox><g:Button ui:field="sendButton">Send</g:Button>
                </g:HorizontalPanel>
        </g:VerticalPanel>
    </g:north>
    <g:south size="300">
    <g:Button>TestButton</g:Button>
    </g:south>
    </g:SplitLayoutPanel>
</ui:UiBinder>

请注意一些事项：

首先：您的 UiBinder XML 模板中有一个错误：它是，而不是（区分大小写）
使用 RootLayoutPanel 而不是通常的 RootPanel
我对整个 还是有点困惑LayoutPanel 的东西 - 在邮件示例他们使用嵌套在 DockLayoutPanel 中的 SplitLayoutPanel，但仅DockLayoutPanel 显式添加到 RootLayoutPanel - 我是否理解 SplitLayoutPanel 也会自动添加（以便它可以接收调整大小事件， ETC）？嵌套在主 LayoutPanel 中的其他一些 Widget 怎么样 - 它们是否必须显式添加到 RootLayoutPanel 中，或者仅当它们是该 Widget/Composite 的根时，或者甚至不可能？我真的没有时间进一步追求这个 - 我会把它作为其他人的家庭作业;）

顺便说一句：我已经在怪异模式和标准模式下检查了这段代码 - 我没有看到区别，两者work O_o（不过，这是 SplitLayoutPanel 的简单使用 - 更复杂的示例可能会导致 Quirks 模式中的一些奇怪行为和/或渲染错误）

OK, got it working (see older versions of this answer for previous attempts ;)).

My solution is based on Mail example.
The working code:

public class SplitTest implements EntryPoint {

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

    interface TestUiBinder extends UiBinder<SplitLayoutPanel, SplitTest> {
    }

    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        SplitLayoutPanel outer = uiBinder.createAndBindUi(this);

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

UiBinder *.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>
    .conversationPanelContainer, .conversationPanel, .messageTextAndSendPanel, .messageText {
      font-weight: bold;
    }
  </ui:style>
    <g:SplitLayoutPanel>
    <g:north size="700">
        <g:VerticalPanel>
                <g:ScrollPanel styleName="{style.conversationPanelContainer}">
                    <g:FlexTable ui:field="conversationPanel" styleName="{style.conversationPanel}"></g:FlexTable>
                </g:ScrollPanel>
                <g:HorizontalPanel styleName="{style.messageTextAndSendPanel}">
                    <g:TextBox ui:field="messageText" styleName="{style.messageText}"></g:TextBox><g:Button ui:field="sendButton">Send</g:Button>
                </g:HorizontalPanel>
        </g:VerticalPanel>
    </g:north>
    <g:south size="300">
    <g:Button>TestButton</g:Button>
    </g:south>
    </g:SplitLayoutPanel>
</ui:UiBinder>

Note a number of things:

First of all: you had an error in your UiBinder XML template: it's <g:Button>, not <g:button> (case sensitive)
The use of RootLayoutPanel instead of the usual RootPanel
I'm still a bit confused about the whole LayoutPanels thingy - in the Mail example they use a SplitLayoutPanel nested in a DockLayoutPanel, yet only the DockLayoutPanel is explicitly added to the RootLayoutPanel - am I to understand that the SplitLayoutPanel automagically also gets added (so that it can receive resize events, etc)? How about some other Widgets nested in the main LayoutPanel - do they have to be explicitly added to the RootLayoutPanel or only if they are the root of that Widget/Composite or is that not even possible? I don't really have time atm to pursue this further - I'll leave it as a homework for someone else ;)

BTW: I've checked this code under Quirks mode and Standards mode - I don't see a difference, both work O_o (though, this is a simple use of the SplitLayoutPanel - more complex examples will probably result in some weird behavior in Quirks mode and/or rendering errors)

回复收藏 0 原文

生寂 2024-09-02 07:27:48

您使用哪种文档类型？这些面板仅在标准模式下工作（至少对于某些浏览器）。如果您使用怪异模式，那么经常会发生这些面板出现空白页面的情况。

检查您的 HTML 文件。理想情况下，它应该以以下内容开头：

<!DOCTYPE html>

或者其他一些导致标准模式的文档类型（但请确保以 100% 逐字输入），请参阅 http://hsivonen.iki.fi/doctype/

Which doctype are you using? These panels only work in standards mode (at least with some broswers). If you use quirks mode, then it often happens, that you get a blank page with these panels.

Check your HTML file. It should ideally start with: