Table (Grid) question

Vaadin 6 / 7 / 8 Framework UI
1

Hello!
I have a question according to the grid. I use the BeanItemContainer to retrieve the objects from the database and display it in a table.
This objects also contain some boolean values and at the moment this values are displayed as true or false in the table. What and where do I have to change if I want to replace the written letters by an image. Must that be done in the BeanItemContainer or in the frontend where I render the table and add the datasource?

I did not find anything about that in the documentation or in the vaadin book.

Thanks for your help,
Florian

This is my BeanItemContainer for getting information about a webiste:


public class WebsiteContainer extends BeanItemContainer<Website> {
	
	private static Logger log = Logger.getLogger(WebsiteContainer.class);
	
	// natural order
	public static Object[] NATURAL_COL_ORDER;
	// Human Readable order
	public static String[] COL_HEADERS;
	
	public WebsiteContainer() throws InstantiationException, IllegalAccessException {
		super(Website.class);
		
		// natural order
		NATURAL_COL_ORDER = new Object[] {"websiteId", "creationDate", "websiteName", "websiteHost", "enableHttpCheck"};
		// Human Readable order
		COL_HEADERS = new String[] {"WID", "Creation date", "Name", "Host", "HTTP check enabled"};
	}
	
	/**
	 * This method returns a list with all users
	 * @param users
	 * @return
	 */
	public static WebsiteContainer getWebsiteList(List<Website> websites){
		try {
			WebsiteContainer cont = new WebsiteContainer();
			
			for(int i = 0; i<websites.size(); i++){
				// We need to load the complete object form the database because the list object does not contain the pages and responses of the object
				Website temp = WebsiteRepository.getWebsite(websites.get(i).getWebsiteId());
				cont.addItem(temp);
			}
			return cont;
		}
		catch(Exception e){
			log.error(e.getMessage());
			return null;
		}
	}
}
2

Hello, Florian!

You can do that with generated columns, see
The Book of Vaadin
 chapter “5.14.5 Generated Table Columns”.

HTH,
/Jonatan

3

Thank you for your help. But in this case I cannot use the BeanItemContainer? Or is that wrong?

And if I use this method do I have to convert the result into my distinct object. At the moment I am a little bit helpless.

Thanks,
Florian

4

The TableColumnGenerator is independent from the ContainerDataSource.
Here is a simple example, you can use for your boolean value:

public class BooleanColumnGenerator implements ColumnGenerator
{
	@Override
	public Component generateCell(Table source, Object itemId, Object columnId)
	{
		Object value = source.getItem(itemId).getItemProperty(columnId).getValue();
		if(value==null) value=Boolean.FALSE;
		else if(!(value instanceof Boolean)) value=Boolean.valueOf(value.toString());
		CheckBox checkBox = new CheckBox();
		checkBox.setValue(value);
		checkBox.setReadOnly(!source.isEditable());
		return checkBox;
	}
}
5

Thank you this code is a big help for me. But there is one simple and I believe also stupid quetion left. How do I integrate this class into my table.


public class WebsiteTable extends CustomComponent {

	@AutoGenerated
	private AbsoluteLayout mainLayout;
	@AutoGenerated
	private VerticalLayout main;
	@AutoGenerated
	private HorizontalLayout navigation;
	@AutoGenerated
	private Button refreshTable;
	@AutoGenerated
	private Button deleteWebsite;
	@AutoGenerated
	private Button changeWebsite;
	@AutoGenerated
	private Button viewWebsiteDetails;
	@AutoGenerated
	private Table websiteTable;
	private static final long serialVersionUID = 9114032401836992115L;
	private Company company;

	/**
	 * The constructor should first build the main layout, set the
	 * composition root and then do any custom initialization.
	 *
	 * The constructor will not be automatically regenerated by the
	 * visual editor.
	 */
	public WebsiteTable(Company company2) {
		buildMainLayout();
		setCompositionRoot(mainLayout);

		// TODO add user code here
		this.company = company2;
		List<Website> websiteList = WebsiteRepository.getWebsites(company);
		System.out.println("Size: "+websiteList.size());
		websiteTable.setContainerDataSource(WebsiteContainer.getWebsiteList(websiteList));
		websiteTable.setVisibleColumns(WebsiteContainer.NATURAL_COL_ORDER);
		websiteTable.setColumnHeaders(WebsiteContainer.COL_HEADERS);
		websiteTable.setSelectable(true);
		websiteTable.setMultiSelect(false);
		
		// icons for the Buttons
		....
		
		// disable all buttons
		....
		
		websiteTable.addListener(new Table.ValueChangeListener() {

			private static final long serialVersionUID = 8598017260481487582L;

			public void valueChange(ValueChangeEvent event) {
				// enable all buttons
				refreshTable.setEnabled(true);
				deleteWebsite.setEnabled(true);
				changeWebsite.setEnabled(true);
				viewWebsiteDetails.setEnabled(true);
				
			}});
		
		/*
		 * Action listeners for the buttons
		 */
		
		// Listener for the change button
		....
		
		// Listener for the refresh Button
		....
		
		// Listener for the delete button
		....
		
		// Listener for the company details button
		....
	}

	public VerticalLayout create(){
		return main;
	}

	@AutoGenerated
	private AbsoluteLayout buildMainLayout() {
		// common part: create layout
		mainLayout = new AbsoluteLayout();
		
		// top-level component properties
		setWidth("100.0%");
		setHeight("100.0%");
		
		// main
		main = buildMain();
		mainLayout.addComponent(main, "top:0.0px;left:0.0px;");
		
		return mainLayout;
	}

	@AutoGenerated
	private VerticalLayout buildMain() {
		// common part: create layout
		main = new VerticalLayout();
		main.setWidth("100.0%");
		main.setHeight("-1px");
		main.setImmediate(true);
		main.setMargin(true);
		main.setSpacing(true);
		
		// companyTable
		websiteTable = new Table();
		websiteTable.setWidth("100.0%");
		websiteTable.setHeight("-1px");
		websiteTable.setImmediate(true);
		main.addComponent(websiteTable);
		
		// navigation
		navigation = buildNavigation();
		main.addComponent(navigation);
		main.setComponentAlignment(navigation, new Alignment(20));
		
		return main;
	}

	@AutoGenerated
	private HorizontalLayout buildNavigation() {
		// common part: create layout
		navigation = new HorizontalLayout();
		navigation.setWidth("100.0%");
		navigation.setHeight("-1px");
		navigation.setImmediate(true);
		navigation.setMargin(false);
		navigation.setSpacing(true);
		
		// viewCompanyDetails
		viewWebsiteDetails = new Button();
		viewWebsiteDetails.setWidth("-1px");
		viewWebsiteDetails.setHeight("-1px");
		viewWebsiteDetails.setCaption("Website details");
		viewWebsiteDetails.setImmediate(true);
		navigation.addComponent(viewWebsiteDetails);
		navigation.setComponentAlignment(viewWebsiteDetails, new Alignment(48));
		
		// changeCompany
		changeWebsite = new Button();
		changeWebsite.setWidth("-1px");
		changeWebsite.setHeight("-1px");
		changeWebsite.setCaption("Change website");
		changeWebsite.setImmediate(true);
		navigation.addComponent(changeWebsite);
		navigation.setComponentAlignment(changeWebsite, new Alignment(48));
		
		// deleteCompany
		deleteWebsite = new Button();
		deleteWebsite.setWidth("-1px");
		deleteWebsite.setHeight("-1px");
		deleteWebsite.setCaption("Delete website");
		deleteWebsite.setImmediate(true);
		navigation.addComponent(deleteWebsite);
		navigation.setComponentAlignment(deleteWebsite, new Alignment(48));
		
		// refreshTable
		refreshTable = new Button();
		refreshTable.setWidth("-1px");
		refreshTable.setHeight("-1px");
		refreshTable.setCaption("Refresh table");
		refreshTable.setImmediate(true);
		navigation.addComponent(refreshTable);
		navigation.setComponentAlignment(refreshTable, new Alignment(48));
		
		return navigation;
	}

}

Where do I have to integrate this, I have the problem to get the connection between the ColumnGenerator and my table.

I am sorry, I would be very grateful for any help.

Florian

6

Hi,

Just add the column generator to the table in the WebsiteTable constructor after the “add user code here” comment just like how you add the listeners.

HTH,
/Jonatan