Cell Properties question

[deuce4]

How does the "cell properties" relate to the size of panel widgets?

I want to create a layout where a panel on the left side is a fixed width, but the panel on the right takes up all the remaining space. Just not sure how "Cell Properties" fits in.

For example, if you have two vertical panels, each set at 100% width, inside a horizontal panel, shouldn't they each take up half the space across the layout? Not really sure how that works here.

thanks

[Konstantin.Scheglov]

Panels with "Cell" properties contributed to children, such as for example Grid, are HTML Table based.
So, you need to learn how Table works in browsers.
GWT and GWT Designer just allow you to set corresponding properties/attributes to TD and its children.

See below example for fixed column and column which takes up all the remaining space.

Code: Select all

public class ImageViewer2 implements EntryPoint {
    public void onModuleLoad() {
        RootPanel rootPanel = RootPanel.get();
       
        Grid grid = new Grid(1, 2);
        rootPanel.add(grid, 43, 35);
        grid.setSize("469px", "291px");
       
        FlowPanel leftPanel = new FlowPanel();
        grid.setWidget(0, 0, leftPanel);
        grid.getCellFormatter().setWidth(0, 0, "150px");
        grid.getCellFormatter().setHeight(0, 0, "100%");
        leftPanel.setSize("100%", "100%");
       
        FlowPanel rightPanel = new FlowPanel();
        grid.setWidget(0, 1, rightPanel);
        grid.getCellFormatter().setHeight(0, 1, "100%");
        rightPanel.setSize("100%", "100%");
    }
}

[deuce4]

Thanks--your solution looks more lightweight. I did something like this using a DockPanel--do you see any issues with it?

//MAIN DOCK PANEL:
dockLayoutPanel = new DockLayoutPanel(Unit.EM);
dockLayoutPanel.setStyleName("mainDockCSS");
rootPanel.setSize("100%", "100%");
rootPanel.add(dockLayoutPanel, 0, 0);
dockLayoutPanel.setSize("100%", "100%");

topHPanel = new HorizontalPanel();
topHPanel.setStyleName("topPanel");
dockLayoutPanel.addNorth(topHPanel, 6.25);
topHPanel.setSize("100%", "100%");

leftVPanel = new VerticalPanel();
dockLayoutPanel.addWest(leftVPanel, 27.0);
leftVPanel.setSize("100%", "100%");

AbsolutePanel mapPanel=new AbsolutePanel();
mapPanel.setStyleName("mapPanelBorder");
// mapPanel add to resizable dock CENTER (instantiated globally)
dockLayoutPanel.add(mapPanel);
mapPanel.setSize("100%", "100%");

//END MAIN DOCK PANEL

[Konstantin.Scheglov]

It depends on your design preference.
In general new "Layout" panels are better.
However note that you mixes now Table based panels (HorizontalPanel, VerticalPanel) with "Layout" panels.
You should consult your UX designer if this is OK for your site.