Tabular Data Using GWT Cell-based Widgets
-
Upload
rogelio-flores -
Category
Technology
-
view
1.437 -
download
3
description
Transcript of Tabular Data Using GWT Cell-based Widgets
![Page 1: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/1.jpg)
Tabular Data Using Cell-based Widgets
ByRogelio.Flores @gmail.com
Verifi / http://verificoncrete.com
![Page 2: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/2.jpg)
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
![Page 3: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/3.jpg)
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
![Page 4: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/4.jpg)
![Page 5: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/5.jpg)
Stock Cell-based Widgets
● CellList● CellTree● CellBrowser● CellTable● DataGrid● CellWidget
![Page 6: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/6.jpg)
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
![Page 7: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/7.jpg)
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)
![Page 8: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/8.jpg)
Custom Cell used in a CellList
![Page 9: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/9.jpg)
Style and content can change based on Data
![Page 10: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/10.jpg)
Custom Resources
Stock Cell-based Widgets come with their own Resources (ClientBundle which includes a CSSResource) which you can replace/override
![Page 11: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/11.jpg)
How to Override Resources
Demo: StyledDataGrid.css and compare stock DataGrid (Showcase) with a custom-styled one
![Page 12: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/12.jpg)
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
![Page 13: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/13.jpg)
Single Selection
What about combining selection models with custom styles? (Demo)
![Page 14: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/14.jpg)
Multiple Selection using CheckBoxes
![Page 15: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/15.jpg)
Paging and Data Providers
● SimplePager
● ListDataProvider
● AsyncDataProvider● Create your own extending the above or AbstractDataProvier
● Demo– Simple Pager (custom style)
– Infinite Scrolling
![Page 16: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/16.jpg)
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)
![Page 17: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/17.jpg)
Real-world Example
● Requirements:– grid with many columns
– each column needs long descriptive header text
● Solution:– Slanted Headers! (to save horizontal space)
![Page 18: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/18.jpg)
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!
![Page 19: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/19.jpg)
Custom Cell and Header
![Page 20: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/20.jpg)
And after some CSS:
https://gist.github.com/elmentecato/7994293
![Page 21: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/21.jpg)
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
![Page 22: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/22.jpg)
Drag and Drop
Cell-based widgets are so flexible that you can add basic DnD:See more code: https://gist.github.com/elmentecato/7994450
![Page 23: Tabular Data Using GWT Cell-based Widgets](https://reader033.fdocuments.us/reader033/viewer/2022042516/559d19d81a28ab5e558b4740/html5/thumbnails/23.jpg)
Composite Widgets and Beyond
Used within a Composite can add functionality or create a more advanced widget
Demo