ItemLayout

ItemLayout is used for representing items from data container in layouts.

View larger

Close

View larger

Close

View larger

Close

ItemLayout offers a way to generate components from data container. Generated components will be displayed in custom layouts such as Grid, Vertical or horizontal.

To achieve that three custom components are available :

• ItemGrid - use a gwt Grid to display items - column number can be specify

• ItemHorizontal - use a gwt HorizonalPanel to display items - use a custom scroll bar - scroll interval can be specify - first index to display can be specify

• ItemVertical (same as Horizontal but on vertical way) - use a gwt VerticalPanel to display items - use a custom scroll bar - scroll interval can be specify - first index to display can be specify

Each component handles single or multi-select items, to do so you just need to add an ItemClickHandler.

Next development :

• Customize scroll buttons for ItemHorizontal and ItemVertical

The original idea came from ItemGrid Addon available on vaadin directory but we need horizontal and vertical layout with custom scrollbar.

Sample code

<dependency>
	<groupId>org.vaadin.addon</groupId>
	<artifactId>itemlayout</artifactId>
	<version>1.0.0</version>
</dependency>
<dependency>
	<groupId>org.vaadin.addon</groupId>
	<artifactId>itemlayout</artifactId>
	<version>1.0.0</version>
	<classifier>sources</classifier>
	<scope>provided</scope>
</dependency>

public class ItemLayoutDemoUI extends UI
{

  @Override
  protected void init(final VaadinRequest request)
  {
    // Main layout
    final VerticalLayout example = new VerticalLayout();
    example.addComponent(new Label("Demo for ItemHorizontal"));

    // Initialize ItemHorizontal
    final ItemHorizontal item = new ItemHorizontal();
    item.setWidth(600, Unit.PIXELS);

    // Set the index of the first element to show
    item.setScrollerIndex(10);

    // Set the interval used for scrolling
    item.setScrollInterval(3);

    //Build a container
    final IndexedContainer container = buildDefaultContainer();
    item.setContainerDataSource(container);

    example.addComponent(item);
    setContent(layout);
  }


  private IndexedContainer buildDefaultContainer()
  {
    final IndexedContainer container = new IndexedContainer();
    container.addContainerProperty("caption", String.class, null);
    container.addContainerProperty("description", String.class, null);
    for (int i = 0; i < 25; i++)
    {
      final Object itemId = container.addItem();
      container.getContainerProperty(itemId, "caption").setValue("Item " + i);
      container.getContainerProperty(itemId, "description").setValue("Item at index " + i);
    }
    return container;
  }

}

import com.vaadin.data.Item;
import com.vaadin.data.Property;
import com.vaadin.ui.Component;
import com.vaadin.ui.Label;

public final class ExampleItemGenerator implements ItemGenerator
{

  /**
   * Default item property id for caption
   */
  private static final String CAPTION          = "caption";
  /**
   * Default item property id for description
   */
  private static final String DESCRIPTION      = "description";
  /**
   * Serail version id
   */
  private static final long   serialVersionUID = 8610707033723162234L;

  @Override
  public Component generateItem(final AbstractItemLayout pSource, final Object pItemId)
  {
    final Label defaultLabel = new Label(pItemId.toString());
    final Item item = pSource.getContainerDataSource().getItem(pItemId);
    final Property<?> captionProperty = item.getItemProperty(CAPTION);
    if ((captionProperty != null) && (captionProperty.getValue() != null))
    {
      defaultLabel.setValue((String) captionProperty.getValue());
    }
    final Property<?> descriptionProperty = item.getItemProperty(DESCRIPTION);
    if ((descriptionProperty != null) && (descriptionProperty.getValue() != null))
    {
      defaultLabel.setDescription((String) descriptionProperty.getValue());
    }
    return defaultLabel;
  }
}

Links

• Issue Tracker
• Source Code
• Online Demo

Compatibility