ansaurus

Question

Can't get SplitLayoutPanel working - GWT + UIBinder are driving me crazy

Answer 1

+2 A:

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:

<!DOCTYPE html>

Or alternatively some other doctype that results in standards mode (but make sure to type it in 100% verbatim), see http://hsivonen.iki.fi/doctype/

Chris Lercher 2010-03-22 20:31:01

Hi, my doctype is set to what you suggested, but unfortunately it still doesn't work. :(

Matt H 2010-03-22 20:34:37

Just to make sure: Is it in the very first line of the resulting HTML that's sent to the browser (there may not even be a comment above it)?

Chris Lercher 2010-03-22 20:52:46

You can also quickly check in which mode Firefox renders the page by right clicking -> View Page Info and checking the Render Mode value.

Igor Klimer 2010-03-22 22:08:03

Answer 2

+3 A:

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"&gt;
<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)

Igor Klimer 2010-03-22 20:43:43

I THINK I already tried this when I was trying to get DockLayoutPanel to work, but I'll try it again when I'm back on my work PC. Thanks. :)

Matt H 2010-03-22 21:18:48

Should be similar to DockLayoutPanel. See http://stackoverflow.com/questions/2493101/how-do-i-use-splitlayoutpanel-with-uibinder

Carnell 2010-03-22 21:48:01

Did you also check it in IE's quirks mode? It usually works in Firefox's quirks mode.

Chris Lercher 2010-03-23 13:32:20

Yeah, my guess's also that it's IE that is the problematic one (as usual >_>). Can't test it atm though.

Igor Klimer 2010-03-23 14:11:43

It works! Thanks alot.One more thing though, how can I style the individual sliders, preferably without having to add the styles via Java? This is shown in the GWT showcase, but there must be a way to do it with UIBinder.

Matt H 2010-03-25 10:37:44

You can change the splitters' styles via `.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger` and `.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-VDragger` if that's what you mean (I'm not quite sure I understand you here - could you provide a link to the part of the Showcase in question?).

Igor Klimer 2010-03-25 13:03:48

That sounds like what I want to do. Could I do this within the UIBinder file in <ui:style> tags or would it have to be in my host page's CSS file? Don't UIBinder styles have to be coupled with a widget?

Matt H 2010-03-25 13:41:33

In my projects, I always have one global CSS file (of course, apart from the other styles in UiBinder, etc) for some generic stuff, like overriding GWT styles, common styles, etc. It gets the same treatment as the UiBinder styles - obfuscation, etc and you can use them in UiBinder code - see http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html. I'd put that style there. Another possiblity is to add a style to your `SplitLayoutPanel` and just set the style in your UiBinder file via `.SplitPanelStyle .gwt-SplitLayoutPanel-VDragger` - something like that should work.

Igor Klimer 2010-03-25 13:54:15

ansaurus

tags:

views:

answers:

Can't get SplitLayoutPanel working - GWT + UIBinder are driving me crazy

related questions