First ideas of a frame work for virtual widgets in qooxdoo.

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

2. Table in qooxdoo 0.8

3. Virtual Widget
Use Cases

4. Design Principles

5. Design Principles
• Low dependencies

6. Design Principles
• Low dependencies
• No policies

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

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

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

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

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

12. Core:
Virtual Pane

13. Core:
Virtual Pane
virtual
scrolling

14. Core:
Virtual Pane
virtual
scrolling

15. Core:
Virtual Pane
virtual variable
scrolling cell sizes

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

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

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

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

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

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

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

23. Row Layer

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

25. Wish list

26. Wish list
Selection

27. Wish list
Selection
Focus

28. Wish list
Selection
Cell Renderer
Focus

29. Wish list
Selection
Cell Renderer
Focus
Cell Editor

30. Wish list
Selection
Cell Renderer
Focus
Cell Editor
Header

31. Wish list
Selection
Cell Renderer
Focus
Cell Editor
Header Grouping

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

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

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

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

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

37. DEMO