Tabular Data Using GWT Cell-based Widgets
- 1. Tabular Data Using Cell-based Widgets By Rogelio.Flores @gmail.com Verifi / http://verificoncrete.com
- 2. Contents ● GWT Cell-based Widgets ● Customization and Styling ● Selection Models ● Paging and Data Providers ● Customizing Format ● Cell-based Widgets as Editors ● Adding Drag and Drop support ● Composite Widgets
- 3. Cell-based Widgets What are they? ● Data presentation widgets composed of Cells ● High performance, light weight ● Rendered using innerHTML instead of DOM manipulation ● Use Flyweight Pattern ● Work great for Data Binding
- 5. Stock Cell-based Widgets CellList ● CellTree ● CellBrowser ● CellTable ● DataGrid ● CellWidget ●
- 6. Customization and Styling You can customize and style Cell-based Widgets in two ways ● Using Custom Cells – Your own HTML + CSS templates – Can apply to columns, headers, and footers ● Override Resources
- 7. When to use custom Cells ● ● If using CellList/CellWidget, you probably want to use a custom Cell or a combination of stock Cells (think CompositeCell or IconCellDecorator) Whenever a stock Cell type doesn't do what you want (in any Cell-based Widget)
- 8. Custom Cell used in a CellList
- 9. Style and content can change based on Data
- 10. Custom Resources Stock Cell-based Widgets come with their own Resources (ClientBundle which includes a CSSResource) which you can replace/override
- 11. How to Override Resources Demo: StyledDataGrid.css and compare stock DataGrid (Showcase) with a custom-styled one
- 12. Selection Models Out of the box, you can specify single or multiple selection, and use different triggers for multiple selection You can also extend the provided Selection Models to create a custom one
- 13. Single Selection What about combining selection models with custom styles? (Demo)
- 15. Paging and Data Providers ● SimplePager ● ListDataProvider ● AsyncDataProvider ● ● Create your own extending the above or AbstractDataProvier Demo – Simple Pager (custom style) – Infinite Scrolling
- 16. Custom Headers/Footers ● ● Custom Cells Extend AbstractHeaderOrFooterBuilder – th/tr/td tags can be used – Access to header properties (is it sortable?, sort direction) – CSS can be applied granularly (e.g. based on properties)
- 17. Real-world Example ● Requirements: – – ● grid with many columns each column needs long descriptive header text Solution: – Slanted Headers! (to save horizontal space)
- 18. CustomHeaderBuilder to the rescue 1. Create custom Cell/Header that uses the needed HTML structure (not always needed) 2. Add custom styles, in this case to rotate text element(s) and add visual cues for sorting 3. Enjoy!
- 19. Custom Cell and Header
- 20. And after some CSS: https://gist.github.com/elmentecato/7994293
- 21. Cell-based Widgets AsEditor/s ● Implement LeafValueEditor<P> – – ● You simply get/setValue(List<P>) Not all values need to be sent/received on flush() Implement HasDataEditor<P> plus EditTextCell – Every value is editable Demo
- 22. Drag and Drop Cell-based widgets are so flexible that you can add basic DnD: See more code: https://gist.github.com/elmentecato/7994450
- 23. Composite Widgets and Beyond Used within a Composite can add functionality or create a more advanced widget Demo