ComponentRenderer
A ComponentRenderer for the Vaadin Grid
ComponentRenderer
CAUTION!!! Does NOT support Vaadin 8 Grid. Only Vaadin 7 compatibility Grid. Version 2.0.0 runs with Vaadin 8 but is only compatible with Vaadin 8 V7 compatibility layer components. For Vaadin 7 you can still use the latest 1.X.X Version which is stable.
Vaadin 8.1 supports components out-of-the box: https://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/component-renderer
Renders standard Vaadin components in the grid.
Online Demo User: demo Pw: demo
For a full description see the Readme
For usage, look at the demo-source-code: Link to Source-Code of the Demo UI
Features
- Plain Java server side coding, as usual
- Standard Tooltips work
- Components can be combined in layouts (e.g. multiple images in a horizontal layout)
- Works with static columns, generated columns or Converters
- Standard ValueChange/ClickListeners
- Supports Keyboard-Navigation (ENTER focuses the component inside the cell or its input field if it has one, ESC switches the focus back to the surrounding cell, so navigating through the grid with the arrow keys can continue)
- Open and Close the row-details with CTRL + DOWN and CTRL + UP
- Preserve the grid focus on manual triggered refresh
- HeaderGenerator to easily set column headers e.g. from ResourceBundles
- creates component editor fields for the grid editor
Limitations
- Components inside a cell should have fixed sizes, otherwise all browsers expect Chrome do lots of measurements and relayout which slows down rendering
Bugs & Features
Please report bugs or feature-wishes in the github issue-tracker to further improve this renderer.
Use the renderer
Add the maven dependency to your pom then recompile the widgetset.
Demo Application
Have a look at the demo app, you can start it with:
cd componentrenderer-demo
mvn jetty:run
Sample code
Grid grid = new Grid(); addComponent(createEnableDisableCheckBox(grid)); ComponentCellKeyExtension.extend(grid); focusPreserveExtension = FocusPreserveExtension.extend(grid); DetailsKeysExtension.extend(grid); grid.setWidth(100, Unit.PERCENTAGE); grid.setHeight(100, Unit.PERCENTAGE); // Initialize Containers BeanItemContainer<Customer> bc = new BeanItemContainer<Customer>(Customer.class); GeneratedPropertyContainer gpc = new GeneratedPropertyContainer(bc); grid.setContainerDataSource(gpc); // Load the data bc.addAll(createDummyData()); // Initialize DetailsGenerator (Caution: the DetailsGenerator is set to null // when grid#setContainerDatasource is called, so make sure you call setDetailsGenerator // after setContainerDatasource grid.setDetailsGenerator(rowReference -> { VerticalLayout layout = new VerticalLayout(); layout.setHeight(100, Unit.PIXELS); layout.addComponent(new Label(((Customer) rowReference.getItemId()).getFirstName())); return layout; }); gpc.addGeneratedProperty(FOOD, new PropertyValueGenerator<Component>() { @Override public Component getValue(Item item, Object itemId, Object propertyId) { return createFoodSelector(grid, (Customer) itemId); } @Override public Class<Component> getType() { return Component.class; } // You must override getSortProperties to allow sorting by the values // underlying of the GeneratedValue. The default is that generated // property columns cannot be sorted (see PropertyValueGenerator default implementation) // if the generated column is not shadowing a real data column DO NOT overwrite this method // otherwise an exception is thrown when you sort it because the bean property cannot be found @Override public SortOrder[] getSortProperties(SortOrder order) { return new SortOrder[]{order}; } }); // Don't forget to set the ComponentRenderer AFTER adding the column grid.getColumn(FOOD).setRenderer(new ComponentRenderer());
ComponentGrid<Customer> grid = new ComponentGrid<>(Customer.class); grid.setWidth(100, Unit.PERCENTAGE); grid.setHeight(70, Unit.PERCENTAGE); grid.setRows(createDummyData()); grid.setDetailsGenerator(rowReference -> { VerticalLayout layout = new VerticalLayout(); layout.setHeight(100, Unit.PIXELS); layout.addComponent(new Label(((Customer)rowReference.getItemId()).getFirstName())); return layout; }); grid.addComponentColumn(FOOD, cust -> createFoodSelector(grid, cust)); grid.addComponentColumn(FOOD_ICON, cust -> createFoodIcon(cust)); grid.addComponentColumn(RATING, cust -> createRating(cust)); grid.addComponentColumn(DELETE, cust -> createDeleteButton(grid, cust)); grid.addComponentColumn(DETAILS_ICONS, cust -> createDetailsIcons(grid, cust)); grid.setFrozenColumnCount(1); grid.setColumns(DETAILS_ICONS, ID, FIRST_NAME, LAST_NAME, FOOD, FOOD_ICON, RATING, DELETE); layout.addComponent(grid);
Grid grid = new Grid(); grid.setContainerDataSource(new BeanItemContainer<Customer>(Customer.class)); ComponentGridDecorator<Customer> componentGridDecorator = new ComponentGridDecorator<>(grid, Customer.class); componentGridDecorator.addAll(CustomerProvider.createDummyData()); addComponent(ViewComponents.createEnableDisableCheckBox(grid)); grid.setSizeFull(); // Initialize DetailsGenerator (Caution: the DetailsGenerator is set to null // when grid#setContainerDatasource is called, so make sure you call setDetailsGenerator // after setContainerDatasource grid.setDetailsGenerator(new CustomerDetailsGenerator()); componentGridDecorator.addComponentColumn(Customer.FOOD, cust -> ViewComponents.createFoodSelector(componentGridDecorator, cust)); componentGridDecorator.addComponentColumn(GENERATED_FOOD_ICON, cust -> ViewComponents.createFoodIcon(cust)); componentGridDecorator.addComponentColumn(GENERATED_RATING, cust -> ViewComponents.createRating(cust)); componentGridDecorator.addComponentColumn(GENERATED_DELETE, cust -> ViewComponents.createDeleteButton(componentGridDecorator, cust)); componentGridDecorator.addComponentColumn(GENERATED_DETAILS_ICONS, cust -> ViewComponents.createDetailsIcons(grid, cust)); // always display the details column grid.setFrozenColumnCount(1); grid.setColumns(GENERATED_DETAILS_ICONS, Customer.ID, Customer.FIRST_NAME, Customer.LAST_NAME, Customer.FOOD, GENERATED_FOOD_ICON, GENERATED_RATING, GENERATED_DELETE); addComponent(grid);
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Migrate to Vaadin 8 with compatibility layer. CAUTION this version is still experimental!
- Released
- 2017-02-24
- Maturity
- BETA
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 8.0+
- Vaadin 7.6+ in 1.0.3
- Vaadin 7.5+ in 0.1.3
- Browser
- Firefox
- Opera
- Google Chrome
- Internet Explorer
ComponentRenderer - Vaadin Add-on Directory
A ComponentRenderer for the Vaadin GridOnline Demo
Issue Tracker
Source Code
ComponentRenderer version 0.1.0
initial version
ComponentRenderer version 0.1.1
improve performance by removing unneeded clientside rpc calls and adding a item<-> component tracking
ComponentRenderer version 0.1.2
- fix issue #2 (100% size components not expanding to full size), thanks klaath for reporting it
ComponentRenderer version 0.1.3
- improved speed
- updated demo
ComponentRenderer version 0.1.4
Used new 7.6.2 features (thanks Teemu for your time at Jfokus)
ComponentRenderer version 0.1.5
remove obsolete dependencies and set language level to 1.7
ComponentRenderer version 0.2.0
fix bug with generated columns, add a typed ComponentGrid for ease of use
ComponentRenderer version 0.2.1
added null checks before adding/removing components
ComponentRenderer version 0.2.2
- move the componentrender style which centers the component inside the cell out of the theme into the extension
- add classical grid approach to the demo
ComponentRenderer version 0.2.3
- added keyboard navigation
- preserve grid focus cursor on manual refresh
ComponentRenderer version 0.3.0
- fixed memory leak (regression)
ComponentRenderer version 0.3.1
- add ComponentGridDecorator for easy decoration of existing grids
- add viritin example
- move theme into correct folder
ComponentRenderer version 0.3.2
added HeaderGenerator, to easily set all Headers of a grid with internationalized column headings. Supports Text, Html and Components and handles the setting for you (see the different Demo Grids).
ComponentRenderer version 0.3.3
Fixes Issue #11 : Problem selecting a row when clicking on a cell
ComponentRenderer version 0.3.4
Fixes #12 : Checkbox cannot be checker or unchecked
make renderer osgi compatible
rename componentrenderer class to cr-component-cell
fix stylesheets
ComponentRenderer version 0.3.5
- add editor default field for components
- fix json exception for null connector in generateData
ComponentRenderer version 0.3.6
- fix missing API change in addComponentColumn for ComponentGrid
ComponentRenderer version 1.0.0beta1
add unit and integration tests, stabilize API (semantic versioning from now on)
ComponentRenderer version 1.0.0beta2
Issue #16: fix issue that grid editor is moved when clicking checkboxes
ComponentRenderer version 1.0.0beta3
make NativeSelect keyboard selectable
ComponentRenderer version 1.0.0beta4
fixes #18 : Removing a column with ComponentRenderer caused an exception
ComponentRenderer version 1.0.0beta5
fixes #19 : Components vanish when using NativeSelect with a static container
Also fixes probable memory leak by wrong use of isAssignableFrom() and deactivated automatic MemoryIT (as it checked the wrong vm), checked this version manually again with jvisualvm
ComponentRenderer version 1.0.0rc1
no changes on the renderer, just updated the memory integration test and built a 1.0.0-rc1 preparing for stable release. Thanks for all the valuable feedback
ComponentRenderer version 1.0.0
promoted 1.0.0rc1 to 1.0.0 for release (no code changes)
ComponentRenderer version 1.0.1
Fixes #25 Cell containing Vaadin charts disappear when scrolling grid
Fixes #26 After removing one ComponentRenderer column the other renderer stop working
ComponentRenderer version 1.0.2
fixes #28 ComponentGridDecorator should implements Serializable
ComponentRenderer version 1.0.3
null
ComponentRenderer version 2.0.0
Migrate to Vaadin 8 with compatibility layer. CAUTION this version is still experimental!