FilterTable and addGeneratedColumn

Hi,
The application need to add a generated column in a filtertable. It works fine with one component. I have a problem with the following component, the component is not display and there is no error message.


public class TemplateListView extends CustomComponent {
...
	public TemplateListView(Workspace workspace) {
...
		filterTable = new FilterTable();
		layoutList.addComponent(filterTable);
		layoutList.setComponentAlignment(filterTable, Alignment.TOP_CENTER);
		filterTable.setSizeFull();
		filterTable.setFilterDecorator(new TemplateFilterDecorator());
		filterTable.setFilterGenerator(new TemplateFilterGenerator());
		filterTable.setImmediate(true);
		refresh();
...
	}

	/**
	 * Refresh partner table content.
	 */
	public void refresh() {
		// update table data source
		filterTable.setContainerDataSource(new TemplateTableContainer(templateManager, templateState, Template.class)
				.createDateSource(workspace));
		// Generate the edit column
		filterTable.addGeneratedColumn("action", new CustomTable.ColumnGenerator() {
			@Override
			public Object generateCell(final CustomTable source, final Object itemId, Object columnId) {
				final HorizontalLayout layout = new HorizontalLayout();
				...
				return layout;
			}
		});
		filterTable.setVisibleColumns(new Object[] { "name", "action" });
		filterTable.setColumnHeader("name", "Name");
		filterTable.setColumnHeader("action", "");
		filterTable.setFiltersVisible(true);
	}
}

Is there something wrong ?
Thanks

Hi,

if I understood correctly, you are not seeing the HorizontalLayout in your browser in the generated column?

I just tried this with the following simple test and it works and displays just fine:

filterTable.addGeneratedColumn("foo", new ColumnGenerator() {
    public Object generateCell(CustomTable source, Object itemId,
            Object columnId) {
        HorizontalLayout hl = new HorizontalLayout();
        hl.setSizeUndefined();
        hl.setSpacing(true);
        Label l = new Label("L1");
        l.setSizeUndefined();
        hl.addComponent(l);
        l = new Label("L2");
        l.setSizeUndefined();
        hl.addComponent(l);
        return hl;
    }
});

Is it possible for you to share exactly what you are putting into the problematic HorizontalLayout? I don’t think I’m able to help/debug this otherwise.

-tepi

I’m using vaadin 6.8.4.

This is the code used :

filterTable.addGeneratedColumn("foo", new ColumnGenerator() {
    public Object generateCell(CustomTable source, Object itemId,
            Object columnId) {
				final HorizontalLayout layout = new HorizontalLayout();
				layout.setSizeUndefined();
				final Button itemEditButton = new Button();
				layout.addComponent(itemEditButton);
				itemEditButton.setStyleName("small");
				itemEditButton.addStyleName("link");
				itemEditButton.setIcon(new ThemeResource("images/item_edit_16.png"));
				itemEditButton.setWidth(16, UNITS_PIXELS);
				itemEditButton.addListener(new Button.ClickListener() {
					@Override
					public void buttonClick(ClickEvent event) {
						...
					}
				});
				final Button itemRemoveButton = new Button();
				layout.addComponent(itemRemoveButton);
				itemRemoveButton.setStyleName("small");
				itemRemoveButton.addStyleName("link");
				itemRemoveButton.setIcon(new ThemeResource("images/item_delete_16.png"));
				itemRemoveButton.setWidth(16, UNITS_PIXELS);
				itemRemoveButton.addListener(new Button.ClickListener() {
					@Override
					public void buttonClick(ClickEvent event) {
						...
					}
				});
				return layout;
    }
});

The display is ok when I make the generated column hidden first and then show it later in the code after the first display. Why such behavior?

Hi,

seems that the difference is somewhere else… I tried the code you posted as such (expect for changing the icons since I don’t have the ones you’re using) and it works just fine. Tested with Vaadin 6.8.4 and 6.8.5 and the latest FilteringTable add-on. See the image below for result:

I did not need to hide/show the column for it to function.

In case this is a sizing issue, you might want to try setting explicit heights to the buttons (height: 16px) and maybe the layout too (height: 16px, width: 32px).

I was using plugin version 0.5.3. I have upgrade to the last version and I get the same problem.

This is the source code.

public class ContactListView extends CustomComponent {
...
	private final PagedFilterTable<ContactTableContainer> filterTable;
...
	public ContactListView(...) {
...
		final VerticalLayout layoutList = new VerticalLayout();
		setCompositionRoot(layoutList);
		layoutList.setSizeFull();

		final HorizontalLayout layoutListCommand = new HorizontalLayout();
		layoutList.addComponent(layoutListCommand);

		final Button btnAdd = new Button("+");
		layoutListCommand.addComponent(btnAdd);
		btnAdd.addStyleName("small");
...
		layoutListCommand.setHeight(btnAdd.getHeight(), UNITS_PIXELS);

		final HorizontalLayout layoutFilterBar = new HorizontalLayout();
		layoutListCommand.addComponent(layoutFilterBar);
		layoutFilterBar.setStyleName("segment");
		layoutFilterBar.addStyleName("segment-alternate");
...
		filterTable = new PagedFilterTable<ContactTableContainer>();
		layoutList.addComponent(filterTable);
		layoutList.setComponentAlignment(filterTable, Alignment.TOP_CENTER);
		filterTable.setSizeFull();
		filterTable.setFilterDecorator(new ContactFilterDecorator());
		filterTable.setFilterGenerator(new ContactFilterGenerator());
		filterTable.setFilterBarVisible(true);
		filterTable.setSelectable(true);
		filterTable.setColumnReorderingAllowed(true);
		container = new ContactTableContainer(...);
...
		filterTable.setContainerDataSource(container.createDateSource(...));

		filterTable.addGeneratedColumn("action", new CustomTable.ColumnGenerator() {
			@Override
			public Object generateCell(final CustomTable source, final Object itemId, Object columnId) {
				final HorizontalLayout layout = new HorizontalLayout();
				layout.setHeight(20, UNITS_PIXELS);
				layout.setWidth(40, UNITS_PIXELS);
				final Button itemEditButton = new Button();
				layout.addComponent(itemEditButton);
				itemEditButton.setStyleName("small");
				itemEditButton.addStyleName("link");
				itemEditButton.setIcon(new ThemeResource("images/item_edit_16.png"));
				itemEditButton.setWidth(16, UNITS_PIXELS);
				itemEditButton.addListener(new Button.ClickListener() {
					@Override
					public void buttonClick(ClickEvent event) {
						editContact(itemId);
					}
				});
				final Button itemRemoveButton = new Button();
				layout.addComponent(itemRemoveButton);
				itemRemoveButton.setStyleName("small");
				itemRemoveButton.addStyleName("link");
				itemRemoveButton.setIcon(new ThemeResource("images/item_delete_16.png"));
				itemRemoveButton.setWidth(16, UNITS_PIXELS);
				itemRemoveButton.addListener(new Button.ClickListener() {
					@Override
					public void buttonClick(ClickEvent event) {
						removeContact(itemId);
					}
				});
				return layout;
			}
		});
		filterTable.setVisibleColumns(new Object[] { "firstName", "lastName", "city", "action" });
		filterTable.setColumnHeader("firstName", I18nApplication.getTextLoader().getMessage("view.contact.firstName.header"));
		filterTable.setColumnHeader("lastName", I18nApplication.getTextLoader().getMessage("view.contact.lastName.header"));
		filterTable.setColumnHeader("city", I18nApplication.getTextLoader().getMessage("view.contact.city.header"));
		filterTable.setColumnHeader("action", "");
		filterTable.removeAllItems();

		// shortcut menu actions
		final Action actionAddContact = new Action(I18nApplication.getTextLoader().getMessage("view.contact.add.menu"));
		final Action actionRemoveContact = new Action(I18nApplication.getTextLoader().getMessage("view.contact.remove.menu"));

		filterTable.addActionHandler(new Action.Handler() {
			@Override
			public void handleAction(Action action, Object sender, Object target) {
				if (action == action1) {
					...
				} else if (action == action2) {
					...
				}
			}

			@Override
			public Action[] getActions(Object target, Object sender) {
				return new Action[] { action1, action2 };
			}
		});
	}
...
}

I get the same problem if I replace the content of generateCell() method with yours.

final HorizontalLayout layout = new HorizontalLayout();
layout.setSizeUndefined();
final Label l1 = new Label("Test 1");
layout.addComponent(l1);
l1.setSizeUndefined();

Is there somthing wrong here ?

I don’t see anything wrong with your code. To the best of my knowledge and what I have tested of it, it should work. A few questions/suggestion:

  • Which browser are you using? Just in case if it’s a bug on a specific browser.
  • Could you provide a ‘complete’ minimal testcase that reproduces this issue (without your own containers and such)? I’m having no luck reproducing it based on the code snippets so this could help.
  • Check the output of the AL (Analyze Layouts) button in debug mode (add ?debug to your application url).
  • Try also the FL (Force Layout) button in the debug dialog to see if that fixes it.
  • Does this also happen if you replace the FilteringTable with the common vaadin Table component? Just to single out whether it’s a bug in vaadin or filteringtable.

I’m using chrome under linux/gnome
FL solve the problem and show the page content
It works fine using Table component.
AL send the following result


Variable burst to be sent to server:
	PID17 (class com.vaadin.terminal.gwt.client.ui.VNativeButton) :
		mousedetails (s) : 1,928,124,false,false,false,false,1,33,19
		state (b) : true
Making UIDL Request with params: 929c7d5c-f99e-49d0-b42e-0770b051294f1,928,124,false,false,false,false,1,33,19PID17mousedetailsstruePID17stateb
Server visit took 866ms
JSON parsing took 1ms
-Response:
-change format=uidl pid=PID21
-com.vaadin.terminal.gwt.client.ui.VVerticalLayout id=PID21 width=100.0% margins=0 alignments={} expandRatios={}
-com.vaadin.terminal.gwt.client.ui.VCustomComponent id=PID34 width=100.0%
-com.vaadin.terminal.gwt.client.ui.VPanel id=PID35 width=100.0% caption=Carnet d'adresses
-variables
tabindex=-1
-com.vaadin.terminal.gwt.client.ui.VSplitPanelHorizontal id=PID36 width=100.0% margins=0 position=50.0% minimumPosition=0.0% maximumPosition=100.0% reversed=false
-com.vaadin.terminal.gwt.client.ui.VCustomComponent id=PID37 width=100.0%
-com.vaadin.terminal.gwt.client.ui.VVerticalLayout id=PID38 width=100.0% margins=0 alignments={} expandRatios={}
-com.vaadin.terminal.gwt.client.ui.VHorizontalLayout id=PID39 margins=0 alignments={} expandRatios={}
+com.vaadin.terminal.gwt.client.ui.VButton
+com.vaadin.terminal.gwt.client.ui.VButton
-com.vaadin.addon.treetable.client.ui.VTreeTable id=PID42 width=100.0% caption=Listes de diffusion eventListeners={0:itemClick,} alb={0:1,1:2,} dragmode=1 selectmode=none cols=2 rows=2 firstrow=0 totalrows=2 pagelength=15 colheaders=true colfooters=false vcolorder={0:1,1:2,}
+variables
+rows
+actions
+visiblecolumns
+-ac
-com.vaadin.terminal.gwt.client.ui.VCustomComponent id=PID51 width=100.0%
-com.vaadin.terminal.gwt.client.ui.VVerticalLayout id=PID52 width=100.0% margins=0 alignments={PID60:20,} expandRatios={}
-com.vaadin.terminal.gwt.client.ui.VHorizontalLayout id=PID53 margins=0 alignments={} expandRatios={}
+com.vaadin.terminal.gwt.client.ui.VButton
+com.vaadin.terminal.gwt.client.ui.VButton
+com.vaadin.terminal.gwt.client.ui.VHorizontalLayout
-org.tepi.filtertable.gwt.client.ui.VFilterTable id=PID60 width=100.0% style=pagedtable eventListeners={0:itemClick,} alb={0:1,1:2,} selectmode=single cols=4 rows=0 firstrow=-1 totalrows=0 pagelength=25 colheaders=true colfooters=false vcolorder={0:1,1:2,2:3,3:4,} clearKeyMap=true
+variables
+rows
+actions
+visiblecolumns
+filters
JavaScriptException: (TypeError): Cannot read property '1' of undefined
 Processing time was 117ms for 7880 characters of JSON
Referenced paintables: 56
Making UIDL Request with params: 929c7d5c-f99e-49d0-b42e-0770b051294f
Server visit took 28ms
JSON parsing took 4ms
-Response:
-change format=uidl pid=PID0
-com.vaadin.terminal.gwt.client.ui.VWindow id=PID0 height=923px width=1920px caption=Mobile Communication & Relation name=1 theme=timm resizable=true main=true layoutRelativeWidth=true
-variables
tabindex=-1
scrollLeft=0
scrollTop=0
positionx=-1
positiony=-1
close=false
-com.vaadin.terminal.gwt.client.ui.VVerticalLayout id=PID78 width=100.0% margins=15 spacing=true alignments={PID79:20,} expandRatios={PID87:1,}
-com.vaadin.terminal.gwt.client.ui.VVerticalLayout id=PID79 width=100.0% margins=0 alignments={} expandRatios={}
+com.vaadin.terminal.gwt.client.ui.VEmbedded
+com.vaadin.terminal.gwt.client.ui.VVerticalLayout
-com.vaadin.terminal.gwt.client.ui.VVerticalLayout id=PID87 width=100.0% margins=0 alignments={PID88:20,PID95:20,} expandRatios={PID95:1,}
-com.vaadin.terminal.gwt.client.ui.VHorizontalLayout id=PID88 height=32px style=segment segment-alternate margins=0 alignments={} expandRatios={}
+com.vaadin.terminal.gwt.client.ui.VNativeButton
+com.vaadin.terminal.gwt.client.ui.VNativeButton
+com.vaadin.terminal.gwt.client.ui.VNativeButton
+com.vaadin.terminal.gwt.client.ui.VNativeButton
+com.vaadin.terminal.gwt.client.ui.VNativeButton
+com.vaadin.terminal.gwt.client.ui.VNativeButton
-com.vaadin.terminal.gwt.client.ui.VVerticalLayout id=PID95 width=100.0% margins=0 alignments={} expandRatios={}
-com.vaadin.terminal.gwt.client.ui.VCustomComponent id=PID96 width=100.0%
-com.vaadin.terminal.gwt.client.ui.VPanel id=PID97 width=100.0% caption=Carnet d'adresses
+variables
+com.vaadin.terminal.gwt.client.ui.VSplitPanelHorizontal
JavaScriptException: (TypeError): Cannot read property '1' of undefined
************************
Layouts analyzed on server, total top level problems: 2 

-Root problems
-
VLabel id: PID83
Width problem: Component with relative width inside a HorizontalLayout with no width defined
Emphasize component in UI
-
VVerticalLayout id: PID87
Height problem: Component with relative height inside a VerticalLayout with no height defined.
Emphasize component in UI
Expand this node to show problems that may be dependent on this problem.
-
VVerticalLayout id: PID95
Height problem: Component with relative height inside a VerticalLayout with no height defined.
Emphasize component in UI
Expand this node to show problems that may be dependent on this problem.
-
VCustomComponent id: PID96
Height problem: Component with relative height inside a VerticalLayout with no height defined.
Emphasize component in UI
Expand this node to show problems that may be dependent on this problem.
-
VPanel id: PID97
Height problem: A component with relative height needs a parent with defined height.
Emphasize component in UI
Expand this node to show problems that may be dependent on this problem.
-
VSplitPanelHorizontal id: PID98
Height problem: A component with relative height needs a parent with defined height.
Emphasize component in UI
Expand this node to show problems that may be dependent on this problem.
-
VCustomComponent id: PID99
Height problem: A component with relative height needs a parent with defined height.
Emphasize component in UI
Expand this node to show problems that may be dependent on this problem.
-
VVerticalLayout id: PID100
Height problem: A component with relative height needs a parent with defined height.
Emphasize component in UI
Expand this node to show problems that may be dependent on this problem.
-
VTreeTable id: PID104
Height problem: Component with relative height inside a VerticalLayout with no height defined.
Emphasize component in UI
-
VCustomComponent id: PID113
Height problem: A component with relative height needs a parent with defined height.
Emphasize component in UI
Expand this node to show problems that may be dependent on this problem.
-
VVerticalLayout id: PID114
Height problem: A component with relative height needs a parent with defined height.
Emphasize component in UI
Expand this node to show problems that may be dependent on this problem.
-
VFilterTable id: PID122
Height problem: Component with relative height inside a VerticalLayout with no height defined.
Emphasize component in UI
************************
 Processing time was 147ms for 13523 characters of JSON
Referenced paintables: 49

It seems to be a problem with component height.

I have rebuild widgets and now all is ok.

Thanks for your help.

Ok, so it seems to be an issue with invalid sizes… Can you resolve this issue and then try again? Basically, you should never have a component with a % width/height inside a component with undefined width/height (undefined = null or -1).

Do note that some components have undefined sizes by default. E.g. the CustomComponent has undefined height by default, as does the VerticalLayout. HorizontalLayout has undefined width by default and so on.

So please, go through your components sizes and try to get into a situation where the AL button no longer reports any issues.

For more information about this, read
this part
from the book of Vaadin.