Working with Layouts

I’ve been trying to learn how to use the various Layout classes to get my application organized the way I want. I’ve tried a lot of different approaches but have been unsuccessful in controlling or predicting the layout of my components. I’ve read through the article on creating a
Title Bar
and it seemed pretty straight forward. But my efforts have been unsuccessful.

Here is my sample code:


public class ContainerTest extends Application {

	@Override
	public void init() {
		
		Window main = new Window("Layout Example");
		setMainWindow(main);
		
		ExpandLayout exp = new ExpandLayout(ExpandLayout.ORIENTATION_VERTICAL);
		main.setLayout(exp);
		
		Panel buttonPanel = new Panel();
		Panel componentPanel = new Panel();
		
		Button btnOne = new Button("Button one");
		Button btnTwo = new Button("Button two");
		
		buttonPanel.setLayout(new OrderedLayout(OrderedLayout.ORIENTATION_HORIZONTAL));
		buttonPanel.addComponent(btnOne);
		buttonPanel.addComponent(btnTwo);
		
		Label lblOne = new Label("Components");
		componentPanel.addComponent(lblOne);
		
		exp.addComponent(buttonPanel);
		exp.addComponent(componentPanel);
		
		exp.expand(componentPanel);
	}

}

I was expecting the
componentPanel
to expand to fill the remaining vertical space of the browser window and dynamically resize with the browser. However, the image below shows my results:

Have I misunderstood how the ExpandedLayout is supposed to work?

Add


componentPanel.setSizeFull();

and there you go!

This is how it works, Panel does not try to eat up unneccessary space unless it really needs to. On your example you only got one tiny label inside it.

Other option is to fill your componentPanel up with bunch of labels (try with for loop) and see what happens :slight_smile:

Thanks for the quick response Jani.

So now as I extend the functionality of my application. I want to add a table inside the componentPanel.


//		Label lblOne = new Label("Components");
//		componentPanel.addComponent(lblOne);
		TableExample table = new TableExample(this);
		componentPanel.addComponent(table);
		
		componentPanel.setSizeFull();
		

I copied the code from the
Table Example
in the reference manual. In the example code, the table is placed inside a horizontal ExpandedLayout. I found I had to remove this to get it to display in my panel. You can see in the code below I remarked out the layout that was used in the example. Can anyone explain to me why this was necessary? Why would this layout prevent the table from displaying?


public class TableExample extends CustomComponent {
    @Autowired
    MarketService marketService;
    
    /* Create the table with a caption. */
    Table table = new Table("Market Snapshot");

    /* A layout needed for the example. */
//    ExpandLayout layout = new ExpandLayout(OrderedLayout.ORIENTATION_HORIZONTAL);
    
    TableExample (Application main) {
        setCompositionRoot (table);
//        setCompositionRoot (layout);
//        layout.addComponent(table);
//        layout.setSizeFull();

        SpringContextHelper helper = new SpringContextHelper(main);
        marketService = (MarketService)helper.getBean("marketService");
        List<Object[]> lstSnapshot = marketService.getMarketSnapshot(1, 1);
        
        /* Define the names, data types, and default values of columns. */
        table.addContainerProperty("State", String.class, "--");
        table.addContainerProperty("District", String.class, "unknown");
        table.addContainerProperty("School", String.class, "unknown");
        table.addContainerProperty("Site", String.class, "unknown");
        table.addContainerProperty("GUID", String.class, "");
        table.addContainerProperty("Check-in", Date.class, null);
        table.addContainerProperty("Version", String.class, "0.0.0.0");
        table.addContainerProperty("Status", String.class, "unknown");
  
        for (Object[] site : lstSnapshot) {
            table.addItem(new Object[]{site[3]
, site[4]
, site[5]
, site[6]
, site[11]
, site[12]
, site[10]
, site[13]
 }, site[1]
);
        }
    }
}

Maybe this isn’t a Layout question any more but rather a table question. How can I make the table dynamically size to fill the component? I read in the forums somewhere about the table.setPageLength() method but I don’t know how to calculate the number of rows to pass this function. All my attempts to discover how big the container or even the terminal window using the getHeight() method of various objects always return -1.

You can make the table fill all available space by doing table.setSizeFull();

Usually, when a “setSizeFull” component mysteriously disappears, it’s because its parent does not have an appropriate size; the component is then 100% of something undefined, which is often 0px.
Basically, if you put a 100% component inside a layout, but you don’t specify the size of the layout, 100% means 0px if nothing else is forcing the layout to be bigger.

Let me try to explain a little…
The layouting can get complicated at times because we support two different layouting ‘styles’ as once - I’ll call these ‘webpage’ and ‘application’.
The ‘webpage’ layouting pushes size: adding a 20px button to a layout will make the layout 20px, adding another will make it 40px, and so on.
The ‘application’ layouting relies on absolute sizes and percentages; the layout sizes are usually dynamic, depending on the container/window size.
When you mix the two styles, you can get weird results; if you have a layout without size (‘webpage style’) that has been pushed to 50px, and add a 100% (setSizeFull) component, it will be 50px. But if nothing is pushing the layout, the 100% component will not show up.

Often, you’ll want to specify 100%, or a specific pixel size, for all your main layouts, and only leave specific part of the app in the unspecified ‘webpage’ mode, to grow with the content.

Ok, I’m repeating my self, and this post really needs diagrams, so I’ll stop here :wink:
And yes, this is tricky, and we’re aware that the layouting needs a really good tutorial. I think there is a stub in the trac wiki somewhere…

Hope this helped in some way… :wink:

Best Regards,
Marc