Toplo, Bloc & Spec: A Graphic Layer for the Future

Talk from ESUG 2024

Toplo, Bloc & Spec: A Graphic Layer for the Future. Pablo Tesone & Martín Dias

PDF: http://archive.esug.org/ESUG2024/day1/10-pablo-toplo.pdf

1. Pablo Tesone & Martín Dias - ESUG 2024 - Lille
Toplo, Bloc & Spec
A Graphic Layer for the Future
Consortium
1

2. 2
Pablo Tesone
Pharo Consortium
Engineer
It’s us!
@tesonep
Martín Dias
Pharo Consortium
Engineer
@tinchodias
Just in the
presentation effort…
a lot of development
behind

3. 3
a low-level UI
infrastructure &
framework for Pharo
geometry
(polygon)
a BlElement
background
border
transformation
(a matrix with
skew and translation)
What is Bloc?

4. What is Bloc?
Architecture
4
harfbuzz.dll
Alexandrie
SDL2.dll
OSWindow
Bloc
cairo.dll freetype.dll
applications
FFI

5. Why Cairo and SDL2?
Stay with simple FFI bindings to C libraries
•Works on all Pharo's platforms
•GPU acceleration
•Active gamer community
•Stable with active development. Support by
gnome community (it's the way to draw custom
widgets in gtk 3 and 4).
•Not GPU-optimized but we can use buffering,
layer composition and other techniques to
mitigate.
5

6. Improvements
•SVG importer bugfixing
•Cleanup (#Classes / Methods, Lines of code)
•Documentation improvements
•Improved Text Rendering
•Nicer Shadows, Polygons and Rounded figures
6

7. Performance & Stability
Running Faster and Reliable
•Performance Improvements
•Regression Testing
•CI Integration
•Correct Versioning & Repeatable Builds
7
How you see
the test fixture Mouse events were only
dispatched on the colored
regions
After the fix
!

8. Stable and Ready to Use
•Loadable from the menu in P12 & P13
•Compatible Versions for P11 / P12 / P13
8

9. Toplo
Widget Framework on Top of Bloc
9

10. 10
Toplo
Widget Framework on Top of Bloc
•No New Revolutionary Concepts
•Keep it Simple
•Bloc has many of the features
•Bloc + Element States and Skins
•+ 18 Widgets ready to use
•Collaboration with

11. •No New Revolutionary Concepts
•Keep it Simple
•Bloc has many of the features
•Bloc + Element States and Skins
•+ 18 Widgets ready to use
•Collaboration with
11
Toplo
Widget Framework on Top of Bloc
Widgets: 600 Classes
~ 3000 Methods
Core: 200 Classes ~
2000 Methods
Tests: +1000

12. 12
Toplo
Architecture Overview
ToElement
BlElement
ToTheme
ToSkinManager
ToSkin
<<Event Handler>>
ToSkinStateGenerator
ToSkinStateQueue
ToElementState
0..1
0..1
0..10..1
0..n
1
•Extending Bloc
•Adding Skin & States

13. Beautiful and Powerful
13

14. Beautiful and Powerful (2)
14

15. 15
Toplo

16. 16
Toplo

17. 17
Toplo

18. Based in ANT Design
•https://ant.design/
•Rich Components
•UI / UX Designed
•Validated design values & guidelines
•Intended for Theming and Customization
18

19. What is a Skin in Toplo?
•Adapt properties of BlElements
•Visual (background, border, font, …)
•Structural (Layout, alignment, margin, padding)
•Composition (Adding / Removing Children)
19

20. When adaptations occur?
20
•On Skin Installation / Uninstallation
•On state changes
•Hovered, pressed, leave, …
•Checked, enabled, selected, …

21. When adaptations occur?
•On Skin Installation / Uninstallation
•On state changes
•Hovered, pressed, leave, …
•Checked, enabled, selected, …
21
Driven by Events.
A skin is a event
handler

22. Element State
•Dynamically created
•3 Kinds of States
•Skin Management (Install / Uninstall)
•Intrinsic States (checked, selected, focused, …)
•Transient States (Hovered, leave, enter, …)
•Skin contributes new states (ToSkinStateGenerator)
22

23. Element State
Generation
23
Mouse Click
ToCheckbox
ToCheckableEventHandler
event handler
ToCheckedSkinEventnew
Event Queueapply
enqueue
1
2
3
4
- Extends Bloc Events
- Events are handled
in the correct
rendering stage

24. Toplo StyleSheets
Declarative Skins
•A nice script version
•CSS Like rules
script = rule*

rule = selector property*

property = event_class property value
24
Still in
Development

25. Toplo - Spec
The power of Toplo, the ease of Spec
25

26. 26
Toplo
& Spec

27. Toplo - Spec
The power of Toplo, the ease of Spec
27
•A new Backend for Spec
•Transparent
•Full support

28. Toplo - Spec
The power of Toplo, the ease of Spec
28
•A new Backend for Spec
•Transparent
•Full support
Still in
Development

29. Our Application Stack
29
harfbuzz.dll
Alexandrie
SDL2.dll
OSWindow
Bloc
cairo.dll freetype.dll
Toplo
FFI
Spec App
Spec - Toplo

30. Future
•Faster & More Stable Bloc
•More Widgets in Toplo (Tables / Trees)
•Full Implementation of Spec-Toplo
•Tests & Documentation
•Roassal in Bloc
30

31. Mailing-list: [email protected]
(subscribe at: http://sympa.inria.fr)
Discord: Pharo server / #bloc channel
Bloc: https://github.com/pharo-graphics/Bloc
Toplo: https://github.com/pharo-graphics/Toplo
Spec-Toplo: https://github.com/pharo-graphics/Spec-Toplo
31
STAY
TUNED!
Consortium