colorstrip.gifT
      THE NEW ERA OF WEB DEVELOPMENT




    Going Virtual
Virtual Widget Framework for qooxdoo




      ...
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 ...
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
  virt...
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

          ...
Wish list

Selection
                             Cell Renderer
      Focus
                       Cell Editor

          ...
Wish list

   Selection
                                Cell Renderer
         Focus
                          Cell Editor...
Wish list
                   Column
   Selection
                   Sorting      Cell Renderer
         Focus
            ...
Wish list
                   Column
   Selection
                   Sorting      Cell Renderer
         Focus
            ...
Wish list
                   Column
   Selection
                   Sorting      Cell Renderer
         Focus
            ...
Wish list
                       Column
   Selection
                       Sorting      Cell Renderer
         Focus
    ...
DEMO
Upcoming SlideShare
Loading in …5
×

Going Virtual

702 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
702
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide







































  • Going Virtual

    1. 1. colorstrip.gifT THE NEW ERA OF WEB DEVELOPMENT Going Virtual Virtual Widget Framework for qooxdoo Fabian Jakobs Jonathan Weiß
    2. 2. Table in qooxdoo 0.8
    3. 3. Virtual Widget Use Cases
    4. 4. Design Principles
    5. 5. Design Principles • Low dependencies
    6. 6. Design Principles • Low dependencies • No policies
    7. 7. Design Principles • Low dependencies • No policies • No implicit actions
    8. 8. Design Principles • Low dependencies • No policies • No implicit actions • Small API
    9. 9. Design Principles • Low dependencies • No policies • No implicit actions • Small API • Pluggable components
    10. 10. Design Principles • Low dependencies • No policies • No implicit actions • Small API • Pluggable components
    11. 11. Design Principles • Low dependencies • No policies • No implicit actions • Small API • Pluggable components • Customized widgets on top
    12. 12. Core: Virtual Pane
    13. 13. Core: Virtual Pane virtual scrolling
    14. 14. Core: Virtual Pane virtual scrolling
    15. 15. Core: Virtual Pane virtual variable scrolling cell sizes
    16. 16. Pane Architecture Pane Layer Container Layer #1 Layer #2 Layer #3
    17. 17. Pane Pane • Renders window of Layer Container Layer #1 virtual grid Layer #2 • variable row/column Layer #3 sizes • Layers are widgets
    18. 18. Axis • Converts virtual pixel coordinates into: • Cell indexes • Cell Offsets • Allows custom cell sizes
    19. 19. Layer Examples • Row Color • Grid Line • HTML Cell • Widget Cell
    20. 20. Layer Examples • Row Color • Grid Line • HTML Cell • Widget Cell
    21. 21. Layer Examples • Row Color • Grid Line • HTML Cell • Widget Cell
    22. 22. Layer Examples • Row Color • Grid Line • HTML Cell • Widget Cell
    23. 23. Row Layer
    24. 24. Scroller • Provides scroll bars for the pane • Extends qx.ui.core.AbstractScrollArea
    25. 25. Wish list
    26. 26. Wish list Selection
    27. 27. Wish list Selection Focus
    28. 28. Wish list Selection Cell Renderer Focus
    29. 29. Wish list Selection Cell Renderer Focus Cell Editor
    30. 30. Wish list Selection Cell Renderer Focus Cell Editor Header
    31. 31. Wish list Selection Cell Renderer Focus Cell Editor Header Grouping
    32. 32. Wish list Selection Cell Renderer Focus Cell Editor Row/Column Grouping Header span
    33. 33. Wish list Column Selection Sorting Cell Renderer Focus Cell Editor Row/Column Grouping Header span
    34. 34. Wish list Column Selection Sorting Cell Renderer Focus Cell Editor Row/Column Grouping Header span Column Resizing
    35. 35. Wish list Column Selection Sorting Cell Renderer Focus Cell Editor Row/Column Grouping Header span Frozen Column Columns Resizing
    36. 36. Wish list Column Selection Sorting Cell Renderer Focus Cell Editor Row/Column Grouping Header span Frozen Column ... Resizing Columns
    37. 37. DEMO

    ×