setComponentAlignment does not seem to work in CustomComponent attach()

Vaadin 6 / 7 / 8 Framework UI
1

Hi

I am trying to create an app and decided to create a CustomComponent to create a pageHeading which can be reused on each page. it would have a Caption to the left and a list of buttons to the right. But the buttons always gets drawn next to the Label and they dont seem to move to the right edge…

Am i missing anything… I am reasonably new to Vaadin.

Thanks in advance…
Hari

I am using the PageHeading class like this
I see that the PageHeading is getting streatched across the page because of the style given to it draws a bottom border all the way across…

	PageHeading pageHeading = new PageHeading("Project Details");
	Button manageProjectButton = new Button("Manage project", new ClickListener() {
		
		@Override
		public void buttonClick(ClickEvent event) 
		{
		}
	});
	manageProjectButton.addStyleName("manageProjectButton");
	pageHeading.addButton(manageProjectButton);
	root.addComponent(pageHeading);

---------------------------- code of PageHeading ------------

import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;

public class PageHeading extends CustomComponent
{
HorizontalLayout root = new HorizontalLayout();

private String caption;
private List buttons = new ArrayList();
public PageHeading() 
{
}

public PageHeading(String caption)
{
	this.caption = caption;
}

public void setCaption(String caption)
{
	this.caption = caption;
}

@Override
public void attach()
{
	this.setCompositionRoot(root);

	this.setStyleName("page_heading");
	this.setWidth("98%");
	root.setMargin(true);
	
	Label cap = new Label(caption);
	cap.addStyleName("caption");
	root.addComponent(cap);
	root.setExpandRatio(cap, (float)20.0);
	root.setComponentAlignment(cap, Alignment.MIDDLE_LEFT);
	
	HorizontalLayout bL = new HorizontalLayout();
	bL.setSpacing(true);
	root.addComponent(bL);
	root.setExpandRatio(bL, (float)1.0);
	root.setComponentAlignment(bL, Alignment.MIDDLE_RIGHT);
	if(this.buttons.size() >0)
	{
		for (Iterator iterator = this.buttons.iterator(); iterator.hasNext();)
		{
			Button aButton = (Button) iterator.next();
			bL.addComponent(aButton);
		}
	}
}

public void removeAllButtons()
{
	this.buttons = new ArrayList();
}

public void addButton(Button aButton)
{
	this.buttons.add(aButton);
}

}

2

Welcome to Vaadin.

To find out easily what is happening in this kind of situation, you can run your application with :

?debug

At the end of the URL, it will show a small window with some useful Vaadin tools inside.

Then click in that window on “Analyse Layout” or “AL” (depending on version) and it will output as text all the errors in your layout.
This would have told you that “root” does not have it’s width set.

Add something like :

root.setWidth(100, Component.UNITS_PERCENTAGE);

near setCompositionRoot and your buttons will be aligned correctly.

3

Thanks a lot… it worked … Woh…