Going Virtual

colorstrip.gifT THE NEW ERA OF WEB DEVELOPMENT Going Virtual Virtual Widget Framework for qooxdoo Fabian Jakobs Jonathan Weiß

Table in qooxdoo 0.8

Virtual Widget Use Cases

Design Principles

Design Principles • Low dependencies

Design Principles • Low dependencies • No policies

Design Principles • Low dependencies • No policies • No implicit actions

Design Principles • Low dependencies • No policies • No implicit actions • Small API

Design Principles • Low dependencies • No policies • No implicit actions • Small API • Pluggable components

Design Principles • Low dependencies • No policies • No implicit actions • Small API • Pluggable components

Design Principles • Low dependencies • No policies • No implicit actions • Small API • Pluggable components • Customized widgets on top

Core: Virtual Pane

Core: Virtual Pane virtual scrolling

Core: Virtual Pane virtual scrolling

Core: Virtual Pane virtual variable scrolling cell sizes

Pane Architecture Pane Layer Container Layer #1 Layer #2 Layer #3

Pane Pane • Renders window of Layer Container Layer #1 virtual grid Layer #2 • variable row/column Layer #3 sizes • Layers are widgets

Axis • Converts virtual pixel coordinates into: • Cell indexes • Cell Offsets • Allows custom cell sizes

Layer Examples • Row Color • Grid Line • HTML Cell • Widget Cell

Layer Examples • Row Color • Grid Line • HTML Cell • Widget Cell

Layer Examples • Row Color • Grid Line • HTML Cell • Widget Cell

Layer Examples • Row Color • Grid Line • HTML Cell • Widget Cell

Row Layer

Scroller • Provides scroll bars for the pane • Extends qx.ui.core.AbstractScrollArea

Wish list

Wish list Selection

Wish list Selection Focus

Wish list Selection Cell Renderer Focus

Wish list Selection Cell Renderer Focus Cell Editor

Wish list Selection Cell Renderer Focus Cell Editor Header

Wish list Selection Cell Renderer Focus Cell Editor Header Grouping

Wish list Selection Cell Renderer Focus Cell Editor Row/Column Grouping Header span

Wish list Column Selection Sorting Cell Renderer Focus Cell Editor Row/Column Grouping Header span

Wish list Column Selection Sorting Cell Renderer Focus Cell Editor Row/Column Grouping Header span Column Resizing

Wish list Column Selection Sorting Cell Renderer Focus Cell Editor Row/Column Grouping Header span Frozen Column Columns Resizing

Wish list Column Selection Sorting Cell Renderer Focus Cell Editor Row/Column Grouping Header span Frozen Column ... Resizing Columns

DEMO