GUI Design - Layout Panels

[Marco]

Hello,

i have planned to design my application with following areas:

-----------------------------------

Toolbar Area

----------------------------------

Workspace Header (for some information or filter criteria's)

-----------------------------------

Workspace Area

-----------------------------------

Statusbar Area

-----------------------------------

To use a datagrid which automatically resizes with the screensize, I have read that the best way

is to use the DockLayoutPanel.

I have also read following article:

https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels 

In this articel it's also recommended to use Layout Panels for better standard mode support. 

Therefore I have build a very easy example to test the Layout Panels.

In my GwtTestDock.java example I have created a empty application skeleton with Layout Panels.

In GwtTestDockFilled.java I have filled this skeleton with some widgets.

In this example I have some problems:

* The css padding is not working for SimpleLayoutPanel. Which class should I use instead?

I want to use the css padding in the empty skeleton class because if I replace the widgets for

this place holder, it should automatically use the css of the parent (slpWorkspaceHeaderPlaceholder).

I don't want to set the padding for every child of slpWorkspaceHeaderPlaceholder.

* The Disclosure Panel for "Additional Details" is not working. The reason is because the DockLayoutPanel

has a fix size for North. I tested a solution that I just change the North size if I open the Disclosure Pane but

the animation is not working.

* Is this the right track to design my application or should I use different Panels?

* Should I try to use only Layout Panels (better standard-mode support) or are there special cases for other Panels?

Thx for any help.

Marco

[Andrei]

LayoutPanel can handle all use cases. For example, for your design you can do something like this (use Ui:Binder). It will keep the height of three layers constant, while one of the layers will take all the available space.

Now, when a user clicks on one of the menu options, you call contentPanel.clear(), and then populate it with the new content. Or, if your content is already wrapped in a panel, you can clear the ScrollPanel, and then add your new content panel to it.

<g:LayoutPanel>

    <g:layer top="0" height="52px">
        <g:FlowPanel>
            <g:InlineLabel styleName="menuOption">Option 1</g:InlineLabel>
            <g:InlineLabel styleName="menuOption">Option 2</g:InlineLabel> 
            <g:InlineLabel styleName="menuOption">Option 3</g:InlineLabel> 
        </g:FlowPanel>
    </g:layer> 

    <g:layer top="54px" height="26px">
        <g:FlowPanel>

               // Workspace widgets go here
        </g:FlowPanel> 
    </g:layer> 

    <g:layer top="80px" bottom="26px">

        <g:ScrollPanel>

            <g:FlowPanel ui:field="contentPanel" >

                // Your content goes here
            </g:FlowPanel> 
        </g:ScrollPanel>
    </g:layer>

    <g:layer bottom="0" height="26px"> 
        <g:FlowPanel>

               // Status bar content
        </g:FlowPanel> 
    </g:layer> 

</g:LayoutPanel>

[Marco]

Thx for the answer but my problems described in my post are not solved with your solution.

One more thing to be clear, with Layout Panels I don't mean just the LayoutPanel.class but

all the classes described here:

https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels#LayoutPanels 

[Thomas Broyer]

I'm not sure I understand that one, but maybe try getWidgetContainerElement(...).addClassName(...)

And play around with Firebug or WebInspector or whichever dev tool for your browser of choice, then try to recreate what worked within GWT.

 

* The Disclosure Panel for "Additional Details" is not working. The reason is because the DockLayoutPanel

has a fix size for North. I tested a solution that I just change the North size if I open the Disclosure Pane but

the animation is not working.

Try HeaderPanel.

 

* Is this the right track to design my application or should I use different Panels?

It depends. Maybe a FlowPanel would be enough for the DisclosurePanel+center widgets, it depends what layout you want to achieve for those.

If you feel more comfortable with CSS, then use RootPanel/FlowPanel/HTMLPanel instead.

[Marco]

Thanks Thomas for this hint, also HeaderPanel was new for me.

Maybe for better understanding I have added a screenshot with some remarks of GwtTestDockFilled.class

My background is plain Java, therefore it's easier for me to have less CSS,HTMLPanel I think.  ;-)

I still have no idea whats the best way to structure my application. It's also a hard for me to understand

all the panels and which panels can/should be used together in which order (also with respect of standard-mode).

Normally I think it sould be very easy. I have 4 areas (or maybe it's better to have only 3). 

Toolbar (fix size), WorkspaceHeader(with no fix size because of DisclosurePanel), Workspace (should use all available space), and a statusbar(fix size) area.

Can you please give me one more hint.