Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Multicolumn Panel with FormLayout

Ivan Saorin
1 decade ago Jan 16, 2010 3:25pm

I solved my layout needs implementing a custom panel.

I will post the code: any comment on that is appreciated. I hope this can be useful to someone.

The component ia a panel that maintains a list of columns (each column ia a FormLayout). The component also manage automatically the tabIndex order to have it horizzontal.

public class DetailPanel extends Panel {
	
	private static final long serialVersionUID = -4703606467813607326L;
	
	private ArrayList<CustomTabIndexFormLayout> columns = new ArrayList<CustomTabIndexFormLayout>();
	private int requestedColumns = 0;
	private int firstTabIndex = 0;
	
	public DetailPanel(String caption, String width, int requestedColumns, int firstTabIndex) {
		setCaption(caption);
		setWidth(width);
		this.requestedColumns = requestedColumns;
		this.firstTabIndex = firstTabIndex;
		
		if (requestedColumns < 1) {
			throw new IllegalArgumentException("The requestedColumn must be greater than 0!");
		}
		
		init();
	}

	public int getFirstTabIndex() {
		return firstTabIndex;
	}

	public int getLastTabIndex() {
		int c = 0;
		for (Layout l : columns) {
			c += getComponentCount(l);
		}
		return getFirstTabIndex() + c - 1;
	} 
	
	private int getComponentCount(Layout l) {
		Iterator<Component> components = l.getComponentIterator();
		int i = 0;
		while (components.hasNext()) {
			Component c = components.next();
			if (c instanceof Focusable)
				i++;
		}
		return i;
	}

	public int getColumnsCount() {
		return requestedColumns;
	}

	private void init() {		
        HorizontalLayout hLayout;
        hLayout= new HorizontalLayout();
        hLayout.setWidth("100%");
        hLayout.setSpacing(true);
        addComponent(hLayout);        
        
        String alignment = "left";
        for (int i = 0; i < requestedColumns; i++) {
        	if (i > 0) {
        		alignment = "middle";
        		if (i == (requestedColumns - 1)) {
        			alignment = "right";
        		}
        	}
        	columns.add(createFormLayout(hLayout, i, alignment));
        }
	}

	public CustomTabIndexFormLayout createFormLayout(HorizontalLayout parent, int index, String alignment) {
		CustomTabIndexFormLayout fLayout = new CustomTabIndexFormLayout(
				parent,
				getFirstTabIndex() + index, 
				requestedColumns);		
		fLayout.setWidth("98%");
		parent.addComponent(fLayout);
		parent.setComponentAlignment(fLayout, alignment);
		return fLayout;
	}

	public FormLayout getColumn(int index) {
		return columns.get(index);
	}
	
	public class CustomTabIndexFormLayout extends FormLayout {
		private static final long serialVersionUID = 2827505355429299323L;
		
		private int firstComponentIndex = 0;
		private int increment = 0;
		public CustomTabIndexFormLayout(HorizontalLayout parent, int firstComponentIndex, int increment) {
			this.firstComponentIndex = firstComponentIndex;
			this.increment = increment;
		}
		
		@Override
		public void addComponent(Component c, int index) {
			super.addComponent(c, index);
			refreshTabIndexes();			
		}

		@Override
		public void addComponent(Component c) {
			super.addComponent(c);
			updateTabIndex(c, components.size() - 1);			
		}

		@Override
		public void addComponentAsFirst(Component c) {
			super.addComponentAsFirst(c);
			refreshTabIndexes();
		}

		public void refreshTabIndexes() {
			int i = 0;
			for (Component c : components) {
				updateTabIndex(c, i++);
			}			
		}

		private void updateTabIndex(Component c, int index) {
			if (c instanceof Focusable) {
				Focusable f = (Focusable) c;
				Component current = null;
				Focusable currentFocusable = null;
				for (int i = index-1; i > -1; i--) { 
					current = components.get(i);
					if ((!current.equals(c)) && (current instanceof Focusable)) {
						currentFocusable = (Focusable) current;
						break;
					}
				}
				
				if (Check.notNull(currentFocusable)) {
					f.setTabIndex((currentFocusable.getTabIndex() + increment));					
				}
				else {
					f.setTabIndex(firstComponentIndex);
				}
			}
		}

	}
}

usage:

VerticalLayout vLayout = new VerticalLayout();
        vLayout.setWidth(MAX_WIDTH);       
        main.addComponent(vLayout);

        int tabIndex = 1;
       
        tabIndex = populateDebugPanel(vLayout, tabIndex);
        
        GebTitlebar title = new GebTitlebar(main.getCaption());
        vLayout.addComponent(title);
        
        DetailPanel partyPanel = new DetailPanel("Ordinante " + tabIndex, MAX_WIDTH, 2, tabIndex);
        populatePartyPanelLeft(partyPanel.getColumn(0));
        populatePartyPanelRight(partyPanel.getColumn(1));
        tabIndex = partyPanel.getLastTabIndex() + 1;        
        vLayout.addComponent(partyPanel);
        
        DetailPanel counterpartyPanel = new DetailPanel("Debitore " + tabIndex, MAX_WIDTH, 2, tabIndex);
        populateCounterpartyLeft(counterpartyPanel.getColumn(0));
        populateCounterpartyRight(counterpartyPanel.getColumn(1));
        tabIndex = counterpartyPanel.getLastTabIndex() + 1;
        vLayout.addComponent(counterpartyPanel);

Cheers,

Ivan

Guy DS
1 decade ago Jan 17, 2010 8:30pm
David Wall
1 decade ago Jan 19, 2010 2:35am
Ivan Saorin
1 decade ago Jan 20, 2010 9:58pm
Fred Reedsalvor
8 years ago Jun 17, 2013 7:51am
Vitor Eduardo da Silva
8 years ago Jun 17, 2013 12:03pm
Benoit de Biolley
8 years ago Sep 25, 2013 2:25pm
Stefan U
7 years ago Apr 29, 2014 7:47am
Dino Fancellu
7 years ago Feb 13, 2015 2:36pm
Dino Fancellu
7 years ago Feb 13, 2015 2:45pm

So if I want to do a form layout where SOME of the rows have another field, but not all. How should I do this?
Each row should spread to take 100 percent of width, so the rows with extra fields split that in half.

e.g.

label1 field1
label2 field2 label3 field3
label4 field4 label5 field5
label6 field6

 

Dino Fancellu
7 years ago Feb 13, 2015 2:53pm
Mark Wright
6 years ago Jan 27, 2016 11:55am
Hafiz Sunesara
6 years ago Mar 22, 2016 5:25pm