Post on 08-Jul-2015
description
Tabular Data Using Cell-based Widgets
ByRogelio.Flores @gmail.com
Verifi / http://verificoncrete.com
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
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
Stock Cell-based Widgets
● CellList● CellTree● CellBrowser● CellTable● DataGrid● CellWidget
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
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)
Custom Cell used in a CellList
Style and content can change based on Data
Custom Resources
Stock Cell-based Widgets come with their own Resources (ClientBundle which includes a CSSResource) which you can replace/override
How to Override Resources
Demo: StyledDataGrid.css and compare stock DataGrid (Showcase) with a custom-styled one
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
Single Selection
What about combining selection models with custom styles? (Demo)
Multiple Selection using CheckBoxes
Paging and Data Providers
● SimplePager
● ListDataProvider
● AsyncDataProvider● Create your own extending the above or AbstractDataProvier
● Demo– Simple Pager (custom style)
– Infinite Scrolling
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)
Real-world Example
● Requirements:– grid with many columns
– each column needs long descriptive header text
● Solution:– Slanted Headers! (to save horizontal space)
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!
Custom Cell and Header
And after some CSS:
https://gist.github.com/elmentecato/7994293
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
Drag and Drop
Cell-based widgets are so flexible that you can add basic DnD:See more code: https://gist.github.com/elmentecato/7994450
Composite Widgets and Beyond
Used within a Composite can add functionality or create a more advanced widget
Demo
Questions?
Rogelio.flores+gwtcreate@gmail.com