PDA

View Full Version : When I remove Viewport my GUI collapses to almost nothing



b_basham
9 Mar 2011, 10:57 AM
Hello,

For the past three months I have build a moderately complex GXT v2.0 webapp with a Viewport at the root of the container/widget layout hierarchy. This naturally pushed the scrollbars to containers deep within the hierarchy.

Now the client has decided that they do not want to use Viewport, but rather let the screen expand as necessary with scrollbars at the top level of the browser window. So I have the task of refactoring the GUI code to accomplish this.

The first thing I tried was simply to replace Viewport with a generic LayoutContainer. When I did this the screen collapsed upon itself. I have attached a before and after screenshot.

Any advice on how to approach this refactoring is greatly appreciated.

Respectfully,
Bryan

sven
9 Mar 2011, 12:26 PM
The problem is that the layoutsystem works from the outer container to the inner and not the outher way around. Depening on your layoutchain, it will get complicated to implement it.

You should draw a picture of the containers and the layouts you use so we can get an exact picture of your needs.

b_basham
9 Mar 2011, 1:25 PM
Thanks for the swift response, Sven.

Below is a partial explanation of the GUI container hierarchy. Let me give a brief description of the top-level GUI: The Root is a plain-vanilla LayoutContainer using the BorderLayout. There is a header in the NORTH region and a footer in the SOUTH region. The header is fine but the SOUTH region is overlapping the CENTER region (see new attachment).

The CENTER region is a CardPanel of two "workspaces". I'm trying to get the "system config workspace" working because it is far less complex than the "primary workspace". These workspaces are custom classes that extend LayoutContainer. The guts of these are basically a combination of VBox and HBox layouts and sometimes TabPanels and FormPanels. The hierarchy below drills down in the system config workspace to give you an idea of what it looks like.

The attached screen shot shows what the GUI looks like when I force the workspace to be exactly 500px tall. What I want is to allow GXT to figure out how big the workspace should be and size the containers accordingly (bottom up). I've tried using setAutoHeight(true) up and down the container hierarchy but I see nothing until I set a specific height at the workspace level.

Also, why does the footer (SOUTH region) overlap with the CENTER region? This might be a symptom of my problem. So maybe if I understand why this is happening I might get a clue when auto height isn't working.

Please help.

Thanks,
Bryan



Root (LayoutContainer / BorderLayout)
NORTH:
HeaderView (custom LayoutContainer / HBoxLayout / height=64px, width=100%)
- HtmlContainer (title)
- "spacer" HtmlContainer (flex=1.0)
- Html (welcome text)
- Html (sys config workspace link)
- Html (logout link)
CENTER:
CardPanel (height=auto)
- SystemConfigWorkspace (custom LayoutContainer / VBoxLayout / more below)
- PrimaryWorkspace (custom LayoutContainer / VBoxLayout / more below)
SOUTH:
Html (footer text, height=30px)

SystemConfigWorkspace (custom LayoutContainer / VBoxLayout / STRETCH / height set to 500px to make visible)
- Title bar [flex=0.0] (LayoutContainer / HBoxLayout / MIDDLE / height=31px)
* Html (workspace title) [flex=0.0]
* Html (spacer) [flex=1.0]
* WidgetComponent(Image) (exit button) [flex=0.0]
- Body [flex=1.0] (TabPanel / height=auto)
* TabItem (sys info form / height=auto)
-- FormPanel (height=auto)
** TextField (name)
** NumberField (etc)
** NumberField
** NumberField
** NumberField
** NumberField
** Button (Save form button)
* TabItem (sys info form / height=auto)
-- FormPanel (height=auto)
** TextField (SMTP server)
** NumberField (etc)
** TextField
** TextField
** TextField
** "form button" (Button within a LayoutContainer/FlowLayout within AdapterField)
** Button (Save form button)