Panels Vs LayoutPanles in GWT - gwt

I'm a newbie to GWT.And i wonder when to use panels and when to use layout panels.I'm really confused.Can anyone provide a legit use case , where we need to use panels instead of layout panels and vice versa?.Thanks.

When you need a child to take its initial size from a parent and then resize when a parent resizes, use a LayoutPanel or another panel that implements ProvidesResize() interface. This way, for example, you can split the browser window into top menu and main area parts, and make the main area change its size as the browser windows is resized.
When you want a panel to take its size from its own content, use HTMLPanel or FlowPanel.

Related

Gwt, the Dilemma of TabPanel, TabLayoutPanel & Custom Tab using TabBar +DeckLayoutPanel

My app has a need to store many Panel dynamically. So TabPanel is the suitable choice. However, TabPanel only works in Quirks Mode, it can also work in Standards Mode but with some Quirks, ex, when u click a link put inside a TabPanel then there is a small shaking appeared. But TabPanel is pretty simple, not heavy & easy to code.
I am not sure if i put link into a HTMLpanel & then put that HTMLPanel into that TabPanel then the shaking problem will be solved or not?
Some others say do not use TabPanel cos its behavor is unpredictable in many different webbrowsers since it support only Quirks Mode. They prefers to use TabLayoutPanel. Ok, TabLayoutPanel is very stable solid, but it is quite complicated, it must be put into the RootLayoutPanel. If I don't put it into RootLayoutPanel, then i have to set its fixed width & height (ex: 600px 300px) to be able to see it in Non-root presenters. But I want its height + width to stretch out to 100%. Some peopl have problems with TabLayoutPanel so they have to switch to TabPanel but TabPanel may be deprecated in the future.
So, some suggest me to use custom TabPanel using TabBar + DeckLayoutPanel, but i couldn't find any UiBinder guide for how to use TabBar + DeckLayoutPanel to make custom TabPanel.
If u have to use Tab in ur app (in respect to the above constraints, ie run smoothly in standards mode & not put into RootPanel) then which solution will u choose?
What approach is the best?
I use the TabLayoutPanel where possible.
When I need a tab panel that does not use the entire window or I want the tab contents to take just the side needed for the selected tab then I use a custom made TabPanel. That one is using the TabLayoutPanel for showing the tabs but the contents are put outside in a FlowPanel.

Stacking GWT layouts on top of one another

I'm trying to build a GWT GUI, but I'm not sure if it's possible. Basically, I need to be able to stack three layouts/panels, one on top of another like this:
Bottom Layout: Panel that fills the whole screen (will actually contain SVG stuff).
Middle Layout: DockLayoutPanel with tools docked around the edges, also full screen.
Top Layout: Transparent panel, again filling the whole screen.
Is it possible to stack panels like this? I assume I could use AbsolutePanel to do it somehow, but I was hoping for a nicer solution.
Thanks,
Jon
Because you want a DockLayoutPanel inside, try with a LayoutPanel (or the RootLayoutPanel) and simply add your widgets in order as, by default, a child of a LayoutPanel fills its parent.

GWT: how to nest a TablayoutPanel inside a scroll Panel without specifying its exact height?

I need a scrollPanel with a verticalpanel and a tablayout panel inside it. Problem is, unless I specify the exact height of the tablayoutPanel, the tab content does not show. Any known fixes/ workarounds?
Not the answer you are looking for, but might spark an idea for another way to do this - what does it mean to scroll a tab panel? As soon as the user starts scrolling down, the tabs will no longer be visible to change tabs, user will always need to scroll all the way to the top to consider any other tab.
That said, any of the *LayoutPanel classes GWT has introduced that implement ProvidesResize, RequiresResize, etc need sizing to properly draw themselves and their content. This is why you are having the issue. These classes are designed to size their children, not to just consume as much space as those children require.
Closest I can suggest to a workaround (except for putting a ScrollPanel inside the TabLayoutPanel instead) would be to know the height of the current tab's contents, add to that the height of just the tabs themselves, and assign that as the height of the tabpanel. Not a very nice solution, but it might get you by.

GWT: How to change root (?) panel panel type?

It is said here http://code.google.com/intl/ru-RU/webtoolkit/tools/gwtdesigner/quick_start.html
that one should "Choose an appropriate panel type for" one's UI.
How this can be accomplished?
It all depends on your application layout. There is one RootPanel and you keep adding more panels and Widgets into it.
You can read about different panels at:
http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html
Panels in GWT are much like their layout counterparts in other user
interface libraries. The main difference is that GWT panels use HTML
elements to lay out their child widgets. Panels contain widgets and
other panels. They are used to define the layout of the user interface
in the browser.
In GWT Designer choose Panel from Layouts and then you drop other child widgets inside (Buttons, Labels, etc).
The main panel is always RootPanel, which can be retrieved by RootPanel.get("");
What they are trying to say in the quick start guide is you should choose a panel to add to the RootPanel and start adding widgets in there.

Moveable Panels in GWT?

I need some panels in GWT that have moveable functionality. This is so that if you have a series of event-driven panels that have to be displayed on screen, they aren't all directly on top of each other. This can cause problems when you want to compare two different panels or want to close panels in your own order.
I'm currently using PopupPanels which as far as I'm aware, don't have this functionality.
I think what you want is a DialogBox. This class is a movable PopupPanel and has a constructor argument to create it as non modal, meaning if set to non modal mouse/keyboard events outside the panel are not ignored, but passed to the underlying widgets. This allows to open multiple DialogBox at once and being able to click on them or what's under it.
However, these panels can be moved inside the whole browser window and it's not possible to limit the movable area in the browser window. If you want such functionality you might want to look at the http://code.google.com/p/gwt-dnd/ library, which makes it possible to create movable panels inside a specific area.
Does your DialogBox refuse to be moved/dragged around? Make sure you DO NOT add() it into your RootPanel. Just create a new dialog and call show() on it.