SlideShare a Scribd company logo
1 of 73
Download to read offline
Glimmer DSL for SWT
Ruby Desktop Development GUI Framework
Andy Maleh (Senior Software Developer at Lexop)
Montreal.rb • 2022-10-05
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
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
Intro GUI Samples
Intro GUI Samples
● Prerequisites: JRuby & JVM
● Install:
○ gem install glimmer-dsl-swt
● Run samples through Glimmer Meta-Sample (Sample of Samples):
○ glimmer samples
Intro GUI Samples
● Hello, World!
Intro GUI Samples
● Contact Manager
Intro GUI Samples
● Tetris
Real World Apps - Math Bowling 2
Real World Apps - Math Bowling 2
Real World Apps - Are We There Yet?
Real World Apps - Gladiator Code Editor
Real World Apps - DCR Prog Lang
Real World Apps - Befunge Prog Lang
Real World Apps - Klondike Solitaire
Real World Apps - Wordle
Real World Apps - Wordle
GUI DSL Basics
● Widget Keyword
○ Underscored case of SWT widget class name
○ Declarative widget construction
GUI DSL Basics
● 1) Widget Keyword
○ Underscored case of SWT widget class name
○ Declarative widget construction
GUI DSL Basics
● 1) Widget Keyword
○ Underscored case of SWT widget class name
○ Declarative widget construction
GUI DSL Basics
● 1) Widget Keyword
○ Underscored case of SWT widget class name
○ Declarative widget construction
GUI DSL Basics
● 1) Widget Keyword
○ Underscored case of SWT widget class name
○ Declarative widget construction
GUI DSL Basics
● 2) Widget Arguments
○ Optional
○ Usually SWT Styles (underscored-case Ruby symbols)
GUI DSL Basics
● 2) Widget Arguments
○ Optional
○ Usually SWT Styles (underscored-case Ruby symbols)
GUI DSL Basics
● 3) Widget Content Block
○ Properties
○ Listeners
GUI DSL Basics
● 3) Widget Content Block
○ Properties
○ Listeners
GUI DSL Basics
● 3a) Widget Content Block - Properties
○ Include Layout and Layout Data
GUI DSL Basics
● 3a) Widget Content Block - Properties
GUI DSL Basics
● 3b) Widget Content Block - Listeners
○ Observer Pattern
○ Imperative code block
GUI DSL Basics
● 3b) Widget Content Block - Listeners
GUI DSL Basics
● 3b) Widget Content Block - Listeners
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
GUI DSL Basics
● 4) Widget Operations
GUI DSL Basics
● 4) Widget Operations
GUI DSL Basics
● 4) Widget Operations
Software Architecture - MVC
Software Architecture - MVC
Software Architecture - MVP
MVC Example - Explicit Controller
https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_GUI_DSL_SYNTAX.md#mvc-example---explicit-controller
MVC Example - Implicit Controller
https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_GUI_DSL_SYNTAX.md#mvc-example---implicit-controller
MVC Example - Explicit Presenter
https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_GUI_DSL_SYNTAX.md#mvp-example---explicit-presenter
MVC Example - Implicit Presenter
https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_GUI_DSL_SYNTAX.md#mvp-example---implicit-presenter
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
Data-Binding
● Bidirectional with <=> for read/write properties
Data-Binding
● Unidirectional with <= for read-only properties
Data-Binding
● Converters
○ on_read from the model
○ on_write to the model
Data-Binding
● Converters
○ on_read from the model
○ on_write to the model
Data-Binding
● Hooks
○ before_read
○ after_read
○ before_write
○ after_write
Data-Binding
● Nested Data-Binding
Data-Binding
● Indexed Data-Binding
Data-Binding
● Keyed Data-Binding
Data-Binding
● Computed Data-Binding
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)
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!
Widget Samples - Dialogs
● Hello, Message Box!
● Hello, Color Dialog!
● Hello, Font Dialog!
● Hello, File Dialog!
● Hello, Directory Dialog!
● Hello, Print Dialog!
● Hello, Dialog!
Canvas Graphics
● Canvas Shape DSL shapes:
○ point
○ line
○ rectangle
○ oval
○ arc
○ polygon
○ polyline
○ image
○ text
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!
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
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
Custom Components
● Custom Shapes (Hello, Custom Shape!)
○ include Glimmer::UI::CustomShape
○ Accept options
○ Aggregate multiple shapes
○ Support relative positioning
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!
Canvas Drag and Drop
● drag_source
● on_drop
● drag_and_move
● 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
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]
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
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]
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
Review Intro GUI Samples
● Hello, World!
Review Intro GUI Samples
● Contact Manager
Review Intro GUI Samples
● Tetris
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
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)
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

More Related Content

Similar to Montreal.rb 2022-10-05 - Glimmer DSL for SWT - Ruby Desktop Development GUI Framework

Griffon for the Enterprise
Griffon for the EnterpriseGriffon for the Enterprise
Griffon for the EnterpriseJames Williams
 
Intro to Flutter SDK
Intro to Flutter SDKIntro to Flutter SDK
Intro to Flutter SDKdigitaljoni
 
How I Built My Code Editor in Ruby
How I Built My Code Editor in RubyHow I Built My Code Editor in Ruby
How I Built My Code Editor in RubyAndy Maleh
 
Towards shipping Ozone/Wayland (BlinkOn 10)
Towards shipping Ozone/Wayland (BlinkOn 10)Towards shipping Ozone/Wayland (BlinkOn 10)
Towards shipping Ozone/Wayland (BlinkOn 10)Igalia
 
2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec PolymerHoracio Gonzalez
 
Front-End Developer's Career Roadmap
Front-End Developer's Career RoadmapFront-End Developer's Career Roadmap
Front-End Developer's Career RoadmapWebStackAcademy
 
Desktop apps with node webkit
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkitPaul Jensen
 
React native introduction (Mobile Warsaw)
React native introduction (Mobile Warsaw)React native introduction (Mobile Warsaw)
React native introduction (Mobile Warsaw)Jarek Potiuk
 
HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan KrausHTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan KrausWomen in Technology Poland
 
Android Lollipop: The developer's perspective
Android Lollipop: The developer's perspectiveAndroid Lollipop: The developer's perspective
Android Lollipop: The developer's perspectiveSebastian Vieira
 
Who needs containers in a serverless world
Who needs containers in a serverless worldWho needs containers in a serverless world
Who needs containers in a serverless worldMatthias Luebken
 
Asynchronous single page applications without a line of HTML or Javascript, o...
Asynchronous single page applications without a line of HTML or Javascript, o...Asynchronous single page applications without a line of HTML or Javascript, o...
Asynchronous single page applications without a line of HTML or Javascript, o...Robert Schadek
 
Introducing chrome apps (ogura)
Introducing chrome apps (ogura)Introducing chrome apps (ogura)
Introducing chrome apps (ogura)Kazuhiro Ogura
 
Xlab #2: wzorce projektowe
Xlab #2: wzorce projektoweXlab #2: wzorce projektowe
Xlab #2: wzorce projektoweXSolve
 
NodeWay in my project & sails.js
NodeWay in my project & sails.jsNodeWay in my project & sails.js
NodeWay in my project & sails.jsDmytro Ovcharenko
 
Dot Net Training in Chennai
Dot Net Training in ChennaiDot Net Training in Chennai
Dot Net Training in Chennaijeevanfita
 
The Chromium/Wayland project (Web Engines Hackfest 2017)
The Chromium/Wayland project (Web Engines Hackfest 2017)The Chromium/Wayland project (Web Engines Hackfest 2017)
The Chromium/Wayland project (Web Engines Hackfest 2017)Igalia
 

Similar to Montreal.rb 2022-10-05 - Glimmer DSL for SWT - Ruby Desktop Development GUI Framework (20)

Griffon for the Enterprise
Griffon for the EnterpriseGriffon for the Enterprise
Griffon for the Enterprise
 
Intro to Flutter SDK
Intro to Flutter SDKIntro to Flutter SDK
Intro to Flutter SDK
 
How I Built My Code Editor in Ruby
How I Built My Code Editor in RubyHow I Built My Code Editor in Ruby
How I Built My Code Editor in Ruby
 
Towards shipping Ozone/Wayland (BlinkOn 10)
Towards shipping Ozone/Wayland (BlinkOn 10)Towards shipping Ozone/Wayland (BlinkOn 10)
Towards shipping Ozone/Wayland (BlinkOn 10)
 
2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer
 
Front-End Developer's Career Roadmap
Front-End Developer's Career RoadmapFront-End Developer's Career Roadmap
Front-End Developer's Career Roadmap
 
Desktop apps with node webkit
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkit
 
React native introduction (Mobile Warsaw)
React native introduction (Mobile Warsaw)React native introduction (Mobile Warsaw)
React native introduction (Mobile Warsaw)
 
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon LondonForensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
 
HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan KrausHTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
 
Dust.js
Dust.jsDust.js
Dust.js
 
Android Lollipop: The developer's perspective
Android Lollipop: The developer's perspectiveAndroid Lollipop: The developer's perspective
Android Lollipop: The developer's perspective
 
Who needs containers in a serverless world
Who needs containers in a serverless worldWho needs containers in a serverless world
Who needs containers in a serverless world
 
Asynchronous single page applications without a line of HTML or Javascript, o...
Asynchronous single page applications without a line of HTML or Javascript, o...Asynchronous single page applications without a line of HTML or Javascript, o...
Asynchronous single page applications without a line of HTML or Javascript, o...
 
Introducing chrome apps (ogura)
Introducing chrome apps (ogura)Introducing chrome apps (ogura)
Introducing chrome apps (ogura)
 
Revealing ALLSTOCKER
Revealing ALLSTOCKERRevealing ALLSTOCKER
Revealing ALLSTOCKER
 
Xlab #2: wzorce projektowe
Xlab #2: wzorce projektoweXlab #2: wzorce projektowe
Xlab #2: wzorce projektowe
 
NodeWay in my project & sails.js
NodeWay in my project & sails.jsNodeWay in my project & sails.js
NodeWay in my project & sails.js
 
Dot Net Training in Chennai
Dot Net Training in ChennaiDot Net Training in Chennai
Dot Net Training in Chennai
 
The Chromium/Wayland project (Web Engines Hackfest 2017)
The Chromium/Wayland project (Web Engines Hackfest 2017)The Chromium/Wayland project (Web Engines Hackfest 2017)
The Chromium/Wayland project (Web Engines Hackfest 2017)
 

More from Andy Maleh

Fukuoka Ruby Award 2023 - Opal
Fukuoka Ruby Award 2023 - OpalFukuoka Ruby Award 2023 - Opal
Fukuoka Ruby Award 2023 - OpalAndy Maleh
 
Becoming a SOC2 Ruby Shop - Montreal.rb November, 5, 2022 Ruby Meetup
Becoming a SOC2 Ruby Shop - Montreal.rb November, 5, 2022 Ruby MeetupBecoming a SOC2 Ruby Shop - Montreal.rb November, 5, 2022 Ruby Meetup
Becoming a SOC2 Ruby Shop - Montreal.rb November, 5, 2022 Ruby MeetupAndy Maleh
 
Ultra Light and Maintainable Rails Wizards at RailsConf 2014
Ultra Light and Maintainable Rails Wizards at RailsConf 2014Ultra Light and Maintainable Rails Wizards at RailsConf 2014
Ultra Light and Maintainable Rails Wizards at RailsConf 2014Andy Maleh
 
RailsConf 2014 Recap at Montreal.rb by Andy Maleh
RailsConf 2014 Recap at Montreal.rb by Andy MalehRailsConf 2014 Recap at Montreal.rb by Andy Maleh
RailsConf 2014 Recap at Montreal.rb by Andy MalehAndy Maleh
 
Ultra Light and Maintainable Wizards in Rails at Montreal.rb
Ultra Light and Maintainable Wizards in Rails at Montreal.rbUltra Light and Maintainable Wizards in Rails at Montreal.rb
Ultra Light and Maintainable Wizards in Rails at Montreal.rbAndy Maleh
 
Revised Rails Engine Patterns for Montreal.rb meetup Oct 16, 2012
Revised Rails Engine Patterns for Montreal.rb meetup Oct 16, 2012Revised Rails Engine Patterns for Montreal.rb meetup Oct 16, 2012
Revised Rails Engine Patterns for Montreal.rb meetup Oct 16, 2012Andy Maleh
 
Software Craftsmanship VS Software Engineering
Software Craftsmanship VS Software EngineeringSoftware Craftsmanship VS Software Engineering
Software Craftsmanship VS Software EngineeringAndy Maleh
 
Rails Engine Patterns
Rails Engine PatternsRails Engine Patterns
Rails Engine PatternsAndy Maleh
 
Software Craftsmanship vs Software Engineering (Lightning Talk)
Software Craftsmanship vs Software Engineering (Lightning Talk)Software Craftsmanship vs Software Engineering (Lightning Talk)
Software Craftsmanship vs Software Engineering (Lightning Talk)Andy Maleh
 
Software Design Trilogy Part III - Domain Driven Design for Ruby on Rails App...
Software Design Trilogy Part III - Domain Driven Design for Ruby on Rails App...Software Design Trilogy Part III - Domain Driven Design for Ruby on Rails App...
Software Design Trilogy Part III - Domain Driven Design for Ruby on Rails App...Andy Maleh
 
Software Design Trilogy Part II - Design Patterns for Rubyists
Software Design Trilogy Part II - Design Patterns for RubyistsSoftware Design Trilogy Part II - Design Patterns for Rubyists
Software Design Trilogy Part II - Design Patterns for RubyistsAndy Maleh
 
Software Design Trilogy Part I - Responsibility Driven Design for Rubyists
Software Design Trilogy Part I - Responsibility Driven Design for RubyistsSoftware Design Trilogy Part I - Responsibility Driven Design for Rubyists
Software Design Trilogy Part I - Responsibility Driven Design for RubyistsAndy Maleh
 
The Rails Engine That Could - In Motion
The Rails Engine That Could - In MotionThe Rails Engine That Could - In Motion
The Rails Engine That Could - In MotionAndy Maleh
 
The Rails Engine That Could
The Rails Engine That CouldThe Rails Engine That Could
The Rails Engine That CouldAndy Maleh
 
How I Learned To Apply Design Patterns
How I Learned To Apply Design PatternsHow I Learned To Apply Design Patterns
How I Learned To Apply Design PatternsAndy Maleh
 
Simplifying Desktop Development With Glimmer
Simplifying Desktop Development With GlimmerSimplifying Desktop Development With Glimmer
Simplifying Desktop Development With GlimmerAndy Maleh
 

More from Andy Maleh (16)

Fukuoka Ruby Award 2023 - Opal
Fukuoka Ruby Award 2023 - OpalFukuoka Ruby Award 2023 - Opal
Fukuoka Ruby Award 2023 - Opal
 
Becoming a SOC2 Ruby Shop - Montreal.rb November, 5, 2022 Ruby Meetup
Becoming a SOC2 Ruby Shop - Montreal.rb November, 5, 2022 Ruby MeetupBecoming a SOC2 Ruby Shop - Montreal.rb November, 5, 2022 Ruby Meetup
Becoming a SOC2 Ruby Shop - Montreal.rb November, 5, 2022 Ruby Meetup
 
Ultra Light and Maintainable Rails Wizards at RailsConf 2014
Ultra Light and Maintainable Rails Wizards at RailsConf 2014Ultra Light and Maintainable Rails Wizards at RailsConf 2014
Ultra Light and Maintainable Rails Wizards at RailsConf 2014
 
RailsConf 2014 Recap at Montreal.rb by Andy Maleh
RailsConf 2014 Recap at Montreal.rb by Andy MalehRailsConf 2014 Recap at Montreal.rb by Andy Maleh
RailsConf 2014 Recap at Montreal.rb by Andy Maleh
 
Ultra Light and Maintainable Wizards in Rails at Montreal.rb
Ultra Light and Maintainable Wizards in Rails at Montreal.rbUltra Light and Maintainable Wizards in Rails at Montreal.rb
Ultra Light and Maintainable Wizards in Rails at Montreal.rb
 
Revised Rails Engine Patterns for Montreal.rb meetup Oct 16, 2012
Revised Rails Engine Patterns for Montreal.rb meetup Oct 16, 2012Revised Rails Engine Patterns for Montreal.rb meetup Oct 16, 2012
Revised Rails Engine Patterns for Montreal.rb meetup Oct 16, 2012
 
Software Craftsmanship VS Software Engineering
Software Craftsmanship VS Software EngineeringSoftware Craftsmanship VS Software Engineering
Software Craftsmanship VS Software Engineering
 
Rails Engine Patterns
Rails Engine PatternsRails Engine Patterns
Rails Engine Patterns
 
Software Craftsmanship vs Software Engineering (Lightning Talk)
Software Craftsmanship vs Software Engineering (Lightning Talk)Software Craftsmanship vs Software Engineering (Lightning Talk)
Software Craftsmanship vs Software Engineering (Lightning Talk)
 
Software Design Trilogy Part III - Domain Driven Design for Ruby on Rails App...
Software Design Trilogy Part III - Domain Driven Design for Ruby on Rails App...Software Design Trilogy Part III - Domain Driven Design for Ruby on Rails App...
Software Design Trilogy Part III - Domain Driven Design for Ruby on Rails App...
 
Software Design Trilogy Part II - Design Patterns for Rubyists
Software Design Trilogy Part II - Design Patterns for RubyistsSoftware Design Trilogy Part II - Design Patterns for Rubyists
Software Design Trilogy Part II - Design Patterns for Rubyists
 
Software Design Trilogy Part I - Responsibility Driven Design for Rubyists
Software Design Trilogy Part I - Responsibility Driven Design for RubyistsSoftware Design Trilogy Part I - Responsibility Driven Design for Rubyists
Software Design Trilogy Part I - Responsibility Driven Design for Rubyists
 
The Rails Engine That Could - In Motion
The Rails Engine That Could - In MotionThe Rails Engine That Could - In Motion
The Rails Engine That Could - In Motion
 
The Rails Engine That Could
The Rails Engine That CouldThe Rails Engine That Could
The Rails Engine That Could
 
How I Learned To Apply Design Patterns
How I Learned To Apply Design PatternsHow I Learned To Apply Design Patterns
How I Learned To Apply Design Patterns
 
Simplifying Desktop Development With Glimmer
Simplifying Desktop Development With GlimmerSimplifying Desktop Development With Glimmer
Simplifying Desktop Development With Glimmer
 

Recently uploaded

The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxThe Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxRTS corp
 
Large Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLarge Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLionel Briand
 
Mastering Project Planning with Microsoft Project 2016.pptx
Mastering Project Planning with Microsoft Project 2016.pptxMastering Project Planning with Microsoft Project 2016.pptx
Mastering Project Planning with Microsoft Project 2016.pptxAS Design & AST.
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldRoberto Pérez Alcolea
 
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfEnhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfRTS corp
 
What’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 UpdatesWhat’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 UpdatesVictoriaMetrics
 
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...kalichargn70th171
 
Osi security architecture in network.pptx
Osi security architecture in network.pptxOsi security architecture in network.pptx
Osi security architecture in network.pptxVinzoCenzo
 
Effectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorEffectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorTier1 app
 
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...OnePlan Solutions
 
Advantages of Cargo Cloud Solutions.pptx
Advantages of Cargo Cloud Solutions.pptxAdvantages of Cargo Cloud Solutions.pptx
Advantages of Cargo Cloud Solutions.pptxRTS corp
 
Best Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITBest Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITmanoharjgpsolutions
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsJean Silva
 
2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shardsChristopher Curtin
 
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonLeveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonApplitools
 
Understanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptxUnderstanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptxSasikiranMarri
 
eSoftTools IMAP Backup Software and migration tools
eSoftTools IMAP Backup Software and migration toolseSoftTools IMAP Backup Software and migration tools
eSoftTools IMAP Backup Software and migration toolsosttopstonverter
 
Introduction to Firebase Workshop Slides
Introduction to Firebase Workshop SlidesIntroduction to Firebase Workshop Slides
Introduction to Firebase Workshop Slidesvaideheekore1
 
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdfAndrey Devyatkin
 
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdfPros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdfkalichargn70th171
 

Recently uploaded (20)

The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxThe Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
 
Large Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLarge Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and Repair
 
Mastering Project Planning with Microsoft Project 2016.pptx
Mastering Project Planning with Microsoft Project 2016.pptxMastering Project Planning with Microsoft Project 2016.pptx
Mastering Project Planning with Microsoft Project 2016.pptx
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository world
 
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfEnhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
 
What’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 UpdatesWhat’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 Updates
 
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
 
Osi security architecture in network.pptx
Osi security architecture in network.pptxOsi security architecture in network.pptx
Osi security architecture in network.pptx
 
Effectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorEffectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryError
 
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
 
Advantages of Cargo Cloud Solutions.pptx
Advantages of Cargo Cloud Solutions.pptxAdvantages of Cargo Cloud Solutions.pptx
Advantages of Cargo Cloud Solutions.pptx
 
Best Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITBest Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh IT
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero results
 
2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards
 
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonLeveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
 
Understanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptxUnderstanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptx
 
eSoftTools IMAP Backup Software and migration tools
eSoftTools IMAP Backup Software and migration toolseSoftTools IMAP Backup Software and migration tools
eSoftTools IMAP Backup Software and migration tools
 
Introduction to Firebase Workshop Slides
Introduction to Firebase Workshop SlidesIntroduction to Firebase Workshop Slides
Introduction to Firebase Workshop Slides
 
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
 
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdfPros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
 

Montreal.rb 2022-10-05 - Glimmer DSL for SWT - Ruby Desktop Development GUI Framework

  • 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
  • 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
  • 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
  • 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
  • 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