Component sizing problem

I have a window class which extends VerticalLayout. In the window, I define a header, a footer, both of which are horizontal layouts, and a workspace area which is another vertical layout. The workspace now contains a form and a table. I originally set the height of the table to something like 500px and it works - until the table gets large - at which point the table scrolls incorrectly off the screen, buttons get covered up and can’t be made visible again and all sorts of bad things happen…

So I tried setting the size of the table to “95%” - and now the table scrolls properly, but it only fills up about half the screen real-estate below the form. There is a large blank space between the bottom of the form and the table. Clearly, I don’t understand how components are spaced within the layout. I would appreciate someone explaining this to me, or pointing me at an example of how to make this work properly…

nbc

Hard to say without some code. Can you post some lines?

I’ll try to put some code together this week - thanks…

nbc

Sounds like you haven’t specified any expand ratios for the layout, and then all relative sized components inside it will get expand ratio “1” by default.

Read about expand ratios in the book:
Layout formatting

I have been trying to dig deeper into the layout documentation. I went back to my code and did some re-organizing and removed many of the height and width specifications. When I run the program using the ?debug argument, it now shows zero problems - where before it was telling me that I had layout issues. However, I still can’t seem to get the table to fill up the entire screen. The code for the window is about 250 lines long. I’m going to remove some of the buttons and text fields and strip it down to something more basic and I will post that code later today. I would be grateful if someone can tell me what I need to do to stretch the table correctly.

While I’m doing that - I can post the code here - but is there an easy way to post a screen shot? I can show what the window looks like now… I have not tried to do that in this forum before… Thanks

nbc

Here is the code that creates my window. This is a popup (sub) window from the main program. At the end of the construction, you can see that I print the header, workspace and footer height - and all 3 values show up in my log file as -1.0. The window is created correctly, and shows about 15 rows of data - but there is about 1 inch (2.5 cm) of blank space at the bottom of the window - and I don’t know why that isn’t being used. Any help would be appreciated. The code is listed here - I’ll try to upload a screenshot of the resulting window… Note that there are other buttons and a couple of checkboxes on the real window - but they are all on one line in the header or one line in the footer so I removed them to shorten the code…

Thanks in advance,

nbc


package com.verisign.jart.window;

import com.vaadin.data.Property.ValueChangeListener;
import com.vaadin.addon.jpacontainer.JPAContainer;
import com.vaadin.ui.Button;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.NativeButton;
import com.vaadin.ui.Table;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;
import com.vaadin.ui.Button.ClickEvent;
import com.verisign.common.rrd.db.Ctl_RRD_Record;
import com.verisign.common.rrd.dm.Playlist;
import com.verisign.common.rrd.dm.RrdRecord;
import com.verisign.common.utils.VRSNLogger;
import com.verisign.jart.Dispatcher;
import com.verisign.jart.JART_Application;

public class Win_AddGraphs extends VerticalLayout {
	private static final long serialVersionUID = 1L;
	private static final VRSNLogger Logger = VRSNLogger.getLogger(Win_AddGraphs.class);
	private Dispatcher myDispatcher = null;
	private HorizontalLayout hlFilter = null;
	private HorizontalLayout hlHeader = null;
	private HorizontalLayout hlFooter = null;
	private JART_Application myApp = null;
	private JPAContainer<RrdRecord> jc_RRD_Record = null;
	private Playlist curPlaylist = null;
	private Table tbl_RRDRecord = null;
	private TextField txt_RRD_Filter = null;
	private TextField txt_Desc_Filter = null;
	private VerticalLayout myPage = null;
	private VerticalLayout vlWorkspace = null;
	private Window wAddGraph = null;

	public VerticalLayout getMyPage() {
		return myPage;
	}

	public Win_AddGraphs(JART_Application app, Window w, Dispatcher disp){
		myPage = this;
		myApp = app;
		myDispatcher = disp;
		curPlaylist = myDispatcher.getCurPlaylist(false);
		wAddGraph = w;

		myApp.traceEnter(myDispatcher.getCurUser().getUname(), "Win_AddGraphs::Constructor");

//		setSizeFull();
		buildHeader();
		buildWorkspace();
		buildFooter();

		addComponent(hlHeader);
		addComponent(vlWorkspace);
		addComponent(hlFooter);
		setExpandRatio(vlWorkspace, 1.0f);
		
		Logger.info("11111");
		Logger.info("Header Height: " + hlHeader.getHeight());
		Logger.info("WS     Height: " + vlWorkspace.getHeight());
		Logger.info("Footer Height: " + hlFooter.getHeight());
		myApp.traceLeave(myDispatcher.getCurUser().getUname(), "Win_AddGraphs::Constructor");
	}

	private void buildHeader(){
		VerticalLayout vlHeader = new VerticalLayout();
		hlHeader = new HorizontalLayout();
		hlHeader.setWidth("100%");
		
		Label lFilter_Title = new Label("Filters");
		lFilter_Title.setStyleName("jart-label-bold");
		
		txt_RRD_Filter = new TextField("RRDPath Filter");
		txt_RRD_Filter.setWidth("250px");
		txt_RRD_Filter.setImmediate(true);
		txt_RRD_Filter.addListener(new ValueChangeListener(){
			private static final long serialVersionUID = 1L;

			@Override
			public void valueChange(com.vaadin.data.Property.ValueChangeEvent event) {
				Logger.info("Apply RRD Filter");
//				applyRRDFilter();
			}

		});
		
		HorizontalLayout hlFilter_RRDPath = new HorizontalLayout();
		hlFilter_RRDPath.addComponent(txt_RRD_Filter);
		
		hlFilter = new HorizontalLayout();
		hlFilter.setWidth("100%");
		hlFilter.setSpacing(true);
		hlFilter.addComponent(hlFilter_RRDPath);
		
		vlHeader.addComponent(lFilter_Title);
		vlHeader.addComponent(hlFilter);
		
		hlHeader.addComponent(vlHeader);
	}

	private void buildWorkspace(){
		Ctl_RRD_Record crrd = new Ctl_RRD_Record();
		vlWorkspace = new VerticalLayout();

		jc_RRD_Record = crrd.jcGetAllRrdRecord();
		tbl_RRDRecord = new Table();
		tbl_RRDRecord.setMultiSelect(true);
		tbl_RRDRecord.setImmediate(true);
		tbl_RRDRecord.setSelectable(true);
		tbl_RRDRecord.setContainerDataSource(jc_RRD_Record);
		tbl_RRDRecord.setVisibleColumns(new Object[] { "id", "rrdPath", "description" });
		tbl_RRDRecord.setColumnWidth("id", 50);
		tbl_RRDRecord.setColumnWidth("rrdPath", 400);
		tbl_RRDRecord.setColumnWidth("description", 400);
		vlWorkspace.addComponent(tbl_RRDRecord);
	}

	private void buildFooter(){
		hlFooter = new HorizontalLayout();
		Button bCreateGraphs = new NativeButton();
		bCreateGraphs.setWidth("180px");
		bCreateGraphs.setImmediate(true);
		bCreateGraphs.setCaption("Create selected graphs");
		bCreateGraphs.setStyleName("vrsn-quit-button");
		bCreateGraphs.addListener(new Button.ClickListener() {
			private static final long serialVersionUID = 1L;

			@Override
			public void buttonClick(ClickEvent event) {
                            Logger.info("Button clicked");
			}
		});

		Button bCancel = new NativeButton();
		bCancel.setWidth("180px");
		bCancel.setImmediate(true);
		bCancel.setCaption(" Cancel ");
		bCancel.setStyleName("vrsn-quit-button");
		bCancel.addListener(new Button.ClickListener(){
			private static final long serialVersionUID = 1L;

			public void buttonClick(ClickEvent event){
				myApp.getMainWindow().removeWindow(wAddGraph);
			}
		});

		hlFooter.setWidth("100%");
		hlFooter.setSpacing(true);
		hlFooter.addComponent(bCancel);
		hlFooter.addComponent(bCreateGraphs);
	}
}

12307.png

You need to setSizeFull on the table.

tbl_RRDRecord.setSizeFull();

Your workspace is expanded appropriately, but your table isn’t taking all of the workspace. Unless you setSizeFull, table will only take up a max of table#getPageSize rows (default 15)

HTH,

Cheers,

Charles.

I had already tried:


tbl_RRDRecord.setWidth("100%");
tbl_RRDRecord.setHeight("100%");

and that didn’t work. Changed those to lines to ‘setSizeFull()’ and that doesn’t work ether - I’m still getting only 15 lines in the table.

nbc

Sorry - wasn’t paying close enough attention.

Actually, I see that the footer is not displayed at the bottom of the sub-window → something else going on.

I’ll see if I can knock something up to show how to do what you are attempting.

Here’s a mini demo-ette. As you resize the sub-window, the table space adjusts, and the header stays at the top, and the footer at the bottom.

If I’ve missed the point again, sorry!

Cheers,

Charles

  
...
    Button showWorkspace = new Button("Show Workspace", new Button.ClickListener() {
      @Override
      public void buttonClick(Button.ClickEvent event) {
        getMainWindow().addWindow(new Window("Workspace Example", new AddGraphsThing()));
      }
    });
...

protected class AddGraphsThing extends VerticalLayout {
    protected Component header;
    protected Component workspace;
    protected Component footer;

    public AddGraphsThing() {
      header = buildHeader();
      workspace = buildWorkspace();
      footer = buildFooter();

      addComponent(header);
      addComponent(workspace);
      addComponent(footer);
      
      setExpandRatio(workspace, 1f);
      
      setSizeFull();
    }

    private HorizontalLayout buildHeader() {
      HorizontalLayout header = new HorizontalLayout();
      header.addComponent(new Button("Header Button 1"));
      header.addComponent(new Button("Header Button 2"));
      return header;
    }

    private Table buildWorkspace() {
      Table table = new Table();
      table.addContainerProperty("ID", Integer.class, null);
      table.addContainerProperty("Thing", String.class, null);

      for (int i = 0; i < 200; i++) {
        table.addItem(new Object[]{i, "Value #" + i}, i);
      }

      table.setSizeFull();
      return table;
    }

    private Component buildFooter() {
      HorizontalLayout footer = new HorizontalLayout();
      footer.addComponent(new Button("Foot Button 1"));
      footer.addComponent(new Button("Foot Button 2"));
      return footer;
    }
  }

12308.png

The difference between your example and my code seems to be that I put the table into another Vertical Layout, so my workspace contains a VL which contains a table and yours has only the table… My original system had more than just the table in the workspace area, but it got reduced to just the table - maybe I can get rid of the extra vertical layout…

I will experiment and let you know what I find. Thanks for the example tho - it should help…

nbc

I tried returning just the table in the workspace area without success. I’m wondering if the fact that my table data source is a JPAContainer is causing the problem - is that limited to 15 rows per page? I’ll have to see about increasing the amount of data returned - although how I can set that dynamically based on the screen size may be an issue…

nbc

The page length is actually in the table, not the container, and I have found that if I call tbl_RRDRecord.setPageLength(20) then the table increases in size on the page and pushes the footer section down. But I’m going to have to experiment with the page length to fit the chosen window size - doesn’t look like there is a way to get it to ‘fill the space’ automatically. But at least I know what to do now…

Thanks for the help Charles

nbc

This fixed my problem! :slight_smile: I was also putting my table into another HorizontalLayout before adding to the root layout but removing that and adding the table directly with its size set to full has worked perfectly.

Thank you!