This document introduces Glimmer DSL for SWT, a Ruby GUI framework that allows building native graphical user interfaces in Ruby. It discusses the motivation for building native GUIs, provides examples of sample apps built with Glimmer, and outlines the basics of the GUI DSL syntax. Key aspects covered include widgets, properties, listeners, operations, software architecture patterns like MVC and MVP, data binding, custom components, drag and drop, and scaffolding tools. It also mentions the ability to package apps into various native executable formats like DMG, PKG, EXE, MSI, DEB, and RPM for different platforms.

1. Glimmer DSL for SWT
Ruby Desktop Development GUI Framework
Andy Maleh (Senior Software Developer at Lexop)
Montreal.rb • 2022-10-05

2. We Want Native GUI
● We want to build a native Graphical User Interface in Ruby to:
○ Productively build apps that support visual user interaction
○ Build online applications for specific users w/o needing browser
○ Quickly build offline applications that do not need Internet
○ Report and summarize data from databases securely locally
○ Provide user-friendly platform-conforming native user interfaces

3. We Want Native GUI
● We want to build a native Graphical User Interface in Ruby to:
○ Avoid writing many layers of complex web code
○ Avoid wasting time fine-tuning graphical user interfaces
○ Provide fast performance for graphical widget input/output
○ Quickly invent brand new visual concepts for user interaction
○ Build local games

4. Intro GUI Samples

5. Intro GUI Samples
● Prerequisites: JRuby & JVM
● Install:
○ gem install glimmer-dsl-swt
● Run samples through Glimmer Meta-Sample (Sample of Samples):
○ glimmer samples

6. Intro GUI Samples
● Hello, World!

7. Intro GUI Samples
● Contact Manager

8. Intro GUI Samples
● Tetris

9. Real World Apps - Math Bowling 2

10. Real World Apps - Math Bowling 2

11. Real World Apps - Are We There Yet?

12. Real World Apps - Gladiator Code Editor

13. Real World Apps - DCR Prog Lang

14. Real World Apps - Befunge Prog Lang

15. Real World Apps - Klondike Solitaire

16. Real World Apps - Wordle

17. Real World Apps - Wordle

18. GUI DSL Basics
● Widget Keyword
○ Underscored case of SWT widget class name
○ Declarative widget construction

19. GUI DSL Basics
● 1) Widget Keyword
○ Underscored case of SWT widget class name
○ Declarative widget construction

20. GUI DSL Basics
● 1) Widget Keyword
○ Underscored case of SWT widget class name
○ Declarative widget construction

21. GUI DSL Basics
● 1) Widget Keyword
○ Underscored case of SWT widget class name
○ Declarative widget construction

22. GUI DSL Basics
● 1) Widget Keyword
○ Underscored case of SWT widget class name
○ Declarative widget construction

23. GUI DSL Basics
● 2) Widget Arguments
○ Optional
○ Usually SWT Styles (underscored-case Ruby symbols)

24. GUI DSL Basics
● 2) Widget Arguments
○ Optional
○ Usually SWT Styles (underscored-case Ruby symbols)

25. GUI DSL Basics
● 3) Widget Content Block
○ Properties
○ Listeners

26. GUI DSL Basics
● 3) Widget Content Block
○ Properties
○ Listeners

27. GUI DSL Basics
● 3a) Widget Content Block - Properties
○ Include Layout and Layout Data

28. GUI DSL Basics
● 3a) Widget Content Block - Properties

29. GUI DSL Basics
● 3b) Widget Content Block - Listeners
○ Observer Pattern
○ Imperative code block

30. GUI DSL Basics
● 3b) Widget Content Block - Listeners

31. GUI DSL Basics
● 3b) Widget Content Block - Listeners

32. GUI DSL Basics
● 4) Widget Operations
○ Invoked through Ruby Methods
○ Match SWT widget API
○ Proxy calls to SWT wrapped widget objects
○ JRuby provides ruby-friendly versions of SWT API methods
○ Behavior is sometimes augmented with smart defaults
■ e.g. shell.open starts GUI event loop

33. GUI DSL Basics
● 4) Widget Operations

34. GUI DSL Basics
● 4) Widget Operations

35. GUI DSL Basics
● 4) Widget Operations

36. Software Architecture - MVC

37. Software Architecture - MVC

38. Software Architecture - MVP

39. MVC Example - Explicit Controller
https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_GUI_DSL_SYNTAX.md#mvc-example---explicit-controller

40. MVC Example - Implicit Controller
https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_GUI_DSL_SYNTAX.md#mvc-example---implicit-controller

41. MVC Example - Explicit Presenter
https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_GUI_DSL_SYNTAX.md#mvp-example---explicit-presenter

42. MVC Example - Implicit Presenter
https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_GUI_DSL_SYNTAX.md#mvp-example---implicit-presenter

43. MVC Example - Bidirectional Data-Binding
https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_GUI_DSL_SYNTAX.md#mvp-example---implicit-presenter-with-bidirectional-data-binding

44. Data-Binding
● Bidirectional with <=> for read/write properties

45. Data-Binding
● Unidirectional with <= for read-only properties

46. Data-Binding
● Converters
○ on_read from the model
○ on_write to the model

47. Data-Binding
● Converters
○ on_read from the model
○ on_write to the model

48. Data-Binding
● Hooks
○ before_read
○ after_read
○ before_write
○ after_write

49. Data-Binding
● Nested Data-Binding

50. Data-Binding
● Indexed Data-Binding

51. Data-Binding
● Keyed Data-Binding

52. Data-Binding
● Computed Data-Binding

53. Widget Samples - General
● Hello, World!
● Hello, Label!
● Hello, Text!
● Hello, Button!
● Hello, Spinner!
● Hello, Checkbox!
● Hello, Radio!
● Hello, Shell!
● Hello, Combo!
● Hello, List!
● Hello, Table!
● Hello, Refined Table!
● Hello, Tree!
● Hello, Styled Text!
● Hello, Code Text!
● Hello, Browser!
(Webkit/Edge/Chromium webview
with ability to hook Ruby code to
JavaScript page events)

54. Widget Samples - Organizational
● Hello, Composite!
● Hello, Scrolled Composite!
● Hello, Sash Form!
● Hello, Group!
● Hello, Tab!
● Hello, Tool Bar!
● Hello, Cool Bar!
● Hello, Tray Item!
● Hello, Menu Bar!
● Hello, Pop Up Context Menu!

55. Widget Samples - Dialogs
● Hello, Message Box!
● Hello, Color Dialog!
● Hello, Font Dialog!
● Hello, File Dialog!
● Hello, Directory Dialog!
● Hello, Print Dialog!
● Hello, Dialog!

56. Canvas Graphics
● Canvas Shape DSL shapes:
○ point
○ line
○ rectangle
○ oval
○ arc
○ polygon
○ polyline
○ image
○ text

57. Canvas Graphics
● Hello, Canvas!
● Hello, Canvas Shape Listeners!
● Hello, Canvas Data Binding!
● Hello, Canvas Drag and Drop!
● Hello, Canvas Transform!
● Hello, Canvas Path!
● Hello, Canvas Animation!
● Hello, Canvas Animation Multi!

58. Custom Components
● Custom Widgets (Hello, Custom Widget!)
○ include Glimmer::UI::CustomWidget
○ Accept options
○ Useful for:
■ Specializing Widgets
■ Aggregating Widgets
■ Build brand new non-native widgets with Canvas graphics

59. Custom Components
● Custom Shells (Hello, Custom Shell!)
○ include Glimmer::UI::CustomShell
○ Or include Glimmer::UI::CustomWindow
○ Or include Glimmer::UI::Application
○ Apps or Reusable custom windows
○ Custom shells are also custom widgets

60. Custom Components
● Custom Shapes (Hello, Custom Shape!)
○ include Glimmer::UI::CustomShape
○ Accept options
○ Aggregate multiple shapes
○ Support relative positioning

61. Drag and Drop
● drag_source
● drop_target
● on_drag_detected
● on_drag_start
● on_drag_set_data
● on_drop
● Hello, Drag and Drop!
● Hello, Canvas Drag and Drop!

62. Canvas Drag and Drop
● drag_source
● on_drop
● drag_and_move

63. ● Run glimmer command to get instructions:
○ glimmer
glimmer scaffold[app_name]
glimmer scaffold:customshape[name,namespace]
glimmer scaffold:customshell[name,namespace]
glimmer scaffold:customwidget[name,namespace]
Scaffolding

64. Scaffolding
● Run glimmer command to get instructions:
○ glimmer
glimmer scaffold:desktopify[app_name,website]
glimmer scaffold:gem:customshape[name,namespace]
glimmer scaffold:gem:customshell[name,namespace]
glimmer scaffold:gem:customwidget[name,namespace]

65. Scaffolding - Application
● glimmer scaffold[app] will generate a full app
● Models live in app/app_name/model namespace
● Views live in app/app_name/view namespace
● App can be run with bin/script or this command:
○ glimmer run
● App can be packaged as a Ruby gem out of the box using Juwelier
● App main window entry point is:
app/app_name/view/app_view.rb

66. Native Executable Packaging
● Make sure to have MSI packaging prerequisites on Windows only
● Run packaging command:
○ glimmer package
● Run specialized packaging command:
○ glimmer package[dmg]
○ glimmer package[pkg]
○ glimmer package[msi]
○ glimmer package[deb]
○ glimmer package[rpm]

67. Native Executable Packaging
● On Mac, it will generate under packages:
○ DMG file format
○ PKG file format
● On Windows, it will generate under packages:
○ EXE file format
○ MSI file format
● On Linux, it will generate under packages:
○ DEB file format
○ RPM file format

68. Review Intro GUI Samples
● Hello, World!

69. Review Intro GUI Samples
● Contact Manager

70. Review Intro GUI Samples
● Tetris

71. Summary
● We Want Native GUI
● Intro GUI Samples
● Real World Apps
● GUI DSL Basics
● Data-Binding
● Software Architecture
● Widget Samples
● Canvas Graphics
● Custom Components
● Drag and Drop
● Scaffolding
● Native Executable Packaging

72. Other Glimmer GUI
DSLs
● Glimmer DSL for LibUI (CRuby)
[Fukuoka Ruby 2022 Special
Award Winner]
● Glimmer DSL for Tk (CRuby)
● Glimmer DSL for GTK (CRuby)
● Glimmer DSL for FX (CRuby)
● Glimmer DSL for Swing (JRuby)
● Glimmer DSL for JavaFX (JRuby)

73. Resources
● https://github.com/AndyObtiva
/glimmer-dsl-swt
● https://github.com/AndyObtiva
● https://andymaleh.blogspot.com
● https://twitter.com/AndyObtiva
● https://www.youtube.com/chann
el/UC5hzDE23HZXsZLAxYk2UJEw
● We are hiring at https://lexop.com