Download as PDF, PPTX
Tabular Data Using GWT Cell-based Widgets
- 1. Tabular Data UsingCell-based Widgets By Rogelio.Flores @gmail.com Verifi / http://verificoncrete.com
- 2. Contents â—Ź GWT Cell-based Widgets â—Ź Customizationand 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 arethey? â—Ź 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 Youcan 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 usecustom 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 usedin a CellList
- 9. Style and contentcan change based on Data
- 10. Custom Resources Stock Cell-basedWidgets come with their own Resources (ClientBundle which includes a CSSResource) which you can replace/override
- 11. How to OverrideResources Demo: StyledDataGrid.css and compare stock DataGrid (Showcase) with a custom-styled one
- 12. Selection Models Out ofthe 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 aboutcombining selection models with custom styles? (Demo)
- 14.
- 15. Paging and DataProviders ● 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/tdtags 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 withmany columns each column needs long descriptive header text Solution: – Slanted Headers! (to save horizontal space)
- 18. CustomHeaderBuilder to therescue 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 andHeader
- 20. And after someCSS: https://gist.github.com/elmentecato/7994293
- 21. Cell-based Widgets AsEditor/s ● ImplementLeafValueEditor<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-basedwidgets are so flexible that you can add basic DnD: See more code: https://gist.github.com/elmentecato/7994450
- 23. Composite Widgets andBeyond Used within a Composite can add functionality or create a more advanced widget Demo
- 24.