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