Presentation given at GWT.create conference 2013 in San Francisco, CA.

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)

14. Multiple Selection using
CheckBoxes

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

24. Questions?
Rogelio.flores+gwtcreate@gmail.com