The full material of this workshop will be released on day 2 of RubyConf 2024 (Thursday, Nov 14, 2024).
| Mac | Windows | Linux |
|---|---|---|
 |
 |
 |
Please star ("⭐️") this project and Glimmer DSL for LibUI to save for later reference with regards to Ruby Desktop Development. Glimmer DSL for LibUI was used in this workshop because it is the simplest and quickest to setup in standard Ruby (aka MRI / CRuby), but the lessons learned are applicable to other Glimmer GUI DSLs (with some syntax variations), including more mature ones like Glimmer DSL for SWT, which might be better for more serious usage after finishing the workshop. If you discover any issues or get stuck while going through the material of this repo, please report them in GitHub issues or discuss in the Glimmer Gitter Chat.
Presentation Slides Online Short Link:
https://bit.ly/rubyconf2024desktop
Presentation Slides Online Long Link:
Presentation Slides Offline Download Links:
- PowerPoint: https://github.com/AndyObtiva/how-to-build-desktop-applications-in-ruby/raw/refs/heads/rubyconf2024/RubyConf%202024%20-%20How%20To%20Build%20Basic%20Desktop%20Applications%20in%20Ruby%20-%20Andy%20Maleh.pptx
- PDF: https://github.com/AndyObtiva/how-to-build-desktop-applications-in-ruby/raw/refs/heads/rubyconf2024/RubyConf%202024%20-%20How%20To%20Build%20Basic%20Desktop%20Applications%20in%20Ruby%20-%20Andy%20Maleh.pdf
Please make sure to follow these instructions on your laptop successfully before attending the workshop.
1- Open Terminal (on Mac or Linux) or Command-Prompt/Git-Bash (on Windows) [do not use WSL or PowerShell]
2- Install glimmer-dsl-libui gem
Run:
gem install glimmer-dsl-libui -v0.12.5
3- Load Glimmer Meta-Example to test gem
Run:
glimmer examples
You should see the Glimmer Meta-Example (the example of examples).
| Mac | Windows | Linux |
|---|---|---|
 |
 |
 |
4- Clone Repository
Clone the GitHub repository to avoid running into issues if WIFI service is unreliable at the event:
git clone https://github.com/AndyObtiva/how-to-build-desktop-applications-in-ruby.git
This will download the presentation slides.
On the morning of day 2 (Thursday, Nov 14, 2024), pull the latest version of the repository before you go into the workshop to get all the code exercises and the latest version of the presentation slides.
5- (Optional) Scaffold Application
This step is helpful for the Hack Day event that follows the 2-hour workshop, but is not necessary for the workshop itself and can be skipped till you get to the Hack Day event if you run into any issues with it.
Application Scaffolding relies on the juwelier Ruby gem, which expects a local Git config of:
user.name(git config --global user.name "FirstName LastName")github.user(git config --global github.user githubusername)
Scaffold Glimmer DSL for LibUI application with this command:
glimmer "scaffold[hello_world]"
section-01-gui-basics/exercise-01/empty_window.rb
Run this command from cloned repo directory:
glimmer section-01-gui-basics/exercise-01/empty_window.rb
Screenshot(s):
section-01-gui-basics/exercise-02/hello_world_window_with_args.rb
Run this command from cloned repo directory:
glimmer section-01-gui-basics/exercise-02/hello_world_window_with_args.rb
Screenshot(s):
section-01-gui-basics/exercise-03/hello_world_window_with_props.rb
Run this command from cloned repo directory:
glimmer section-01-gui-basics/exercise-03/hello_world_window_with_props.rb
Screenshot(s):
section-01-gui-basics/exercise-04/hello_world_window_label_with_args.rb
Run this command from cloned repo directory:
glimmer section-01-gui-basics/exercise-04/hello_world_window_label_with_args.rb
Screenshot(s):
section-01-gui-basics/exercise-05/hello_world_window_label_with_props.rb
Run this command from cloned repo directory:
glimmer section-01-gui-basics/exercise-05/hello_world_window_label_with_props.rb
Screenshot(s):
section-01-gui-basics/exercise-06/hello_button.rb
Run this command from cloned repo directory:
glimmer section-01-gui-basics/exercise-06/hello_button.rb
Screenshot(s):
section-01-gui-basics/exercise-07/hello_layout_with_horizontal_box.rb
Run this command from cloned repo directory:
glimmer section-01-gui-basics/exercise-07/hello_layout_with_horizontal_box.rb
Screenshot(s):
section-01-gui-basics/exercise-08/hello_layout_with_horizontal_and_vertical_boxes.rb
Run this command from cloned repo directory:
glimmer section-01-gui-basics/exercise-08/hello_layout_with_horizontal_and_vertical_boxes.rb
Screenshot(s):
section-01-gui-basics/exercise-09/hello_layout_with_horizontal_and_vertical_boxes_stretchy.rb
Run this command from cloned repo directory:
glimmer section-01-gui-basics/exercise-09/hello_layout_with_horizontal_and_vertical_boxes_stretchy.rb
Screenshot(s):
section-01-gui-basics/exercise-10/hello_layout_form.rb
Run this command from cloned repo directory:
glimmer section-01-gui-basics/exercise-10/hello_layout_form.rb
Screenshot(s):
section-01-gui-basics/exercise-11/option_selector.rb
Run this command from cloned repo directory:
glimmer section-01-gui-basics/exercise-11/option_selector.rb
Screenshot(s):
See another version of the Option Selector in Section 2 Exercise 1.
section-02-mvc-software-architecture
section-02-mvc-software-architecture/exercise-01/option_selector_mvc_explicit_controller.rb
Run this command from cloned repo directory:
glimmer section-02-mvc-software-architecture/exercise-01/option_selector_mvc_explicit_controller.rb
Screenshot(s):
See another version of the Option Selector in Section 2 Exercise 02.
section-02-mvc-software-architecture/exercise-02/option_selector_mvc_implicit_controller.rb
Run this command from cloned repo directory:
glimmer section-02-mvc-software-architecture/exercise-02/option_selector_mvc_implicit_controller.rb
Screenshot(s):
See another version of the Option Selector in Section 3 Exercise 01.
section-03-mvp-data-binding/exercise-01/option_selector_mvp_and_data_binding_model_attr_writers.rb
Run this command from cloned repo directory:
glimmer section-03-mvp-data-binding/exercise-01/option_selector_mvp_and_data_binding_model_attr_writers.rb
Screenshot(s):
See another version of the Option Selector in Section 3 Exercise 02.
section-03-mvp-data-binding/exercise-02/option_selector_mvp_and_data_binding_model_observer.rb
Run this command from cloned repo directory:
glimmer section-03-mvp-data-binding/exercise-02/option_selector_mvp_and_data_binding_model_observer.rb
Screenshot(s):
See another version of the Option Selector in Section 3 Exercise 03.
section-03-mvp-data-binding/exercise-03/option_selector_mvp_and_data_binding_with_computed_by.rb
Run this command from cloned repo directory:
glimmer section-03-mvp-data-binding/exercise-03/option_selector_mvp_and_data_binding_with_computed_by.rb
Screenshot(s):
See another version of the Option Selector in Section 3 Exercise 04.
section-03-mvp-data-binding/exercise-04/option_selector_mvp_and_data_binding_with_reset.rb
Run this command from cloned repo directory:
glimmer section-03-mvp-data-binding/exercise-04/option_selector_mvp_and_data_binding_with_reset.rb
Screenshot(s):
section-03-mvp-data-binding/exercise-05/form_table.rb
Run this command from cloned repo directory:
glimmer section-03-mvp-data-binding/exercise-05/form_table.rb
Screenshot(s):
| Mac | Windows | Linux |
|---|---|---|
   |
   |
   |
section-03-mvp-data-binding/exercise-06/dynamic_form.rb
Run this command from cloned repo directory:
glimmer section-03-mvp-data-binding/exercise-06/dynamic_form.rb
Screenshot(s):
Note: there are no exercises for this section as it is too advanced for this workshop, so it will only be covered briefly in the presentation slides.
Note: this section is an optional bonus section outside the original plan of the workshop, so it is only covered if workshop participants finished previous exercises early and had extra time.
section-05-custom-components/exercise-01/address_form_custom_control.rb
Run this command from cloned repo directory:
glimmer section-05-custom-components/exercise-01/address_form_custom_control.rb
Screenshot(s):
Compared to Method-Based Custom Controls, Class-Based Custom Controls provide the added benefit of dividing and conquering the complexity of component code into separate Ruby files, which can even be wrapped as Ruby gems for cross-project reuse if needed.
section-05-custom-components/exercise-02/user_manager.rb
Run this command from cloned repo directory:
glimmer section-05-custom-components/exercise-02/user_manager.rb
Screenshot(s):
Note: this section is an optional bonus section outside the original plan of the workshop, so it is only covered if workshop participants finished previous exercises early and had extra time.
Glimmer DSL for LibUI Application Scaffolding requires a Git configuration for user.name (git config --global user.name "FirstName LastName") and github.user (git config --global github.user githubusername) as needed by the juwelier Ruby gem used for scaffolding.
Go out of this GitHub repository directory:
cd ..
Run:
gem install glimmer-dsl-libui -v0.12.5
Scaffold an application by running:
glimmer "scaffold[hello_world]"
section-08-scaffolding/exercise-01/hello_world
The following files are generated and reported by the glimmer command:
Created hello_world/.gitignore
Created hello_world/.ruby-version
Created hello_world/.ruby-gemset
Created hello_world/VERSION
Created hello_world/LICENSE.txt
Created hello_world/Gemfile
Created hello_world/Rakefile
Created hello_world/app/hello_world.rb
Created hello_world/app/hello_world/view/hello_world.rb
Created hello_world/app/hello_world/model/greeting.rb
Created hello_world/icons/windows/Hello World.ico
Created hello_world/icons/macosx/Hello World.icns
Created hello_world/icons/linux/Hello World.png
Created hello_world/app/hello_world/launch.rb
Created hello_world/bin/hello_world
They include a basic Hello, World! application with menus and about/preferences dialogs.
Views live under app/app_name/view (e.g. app/hello_world/view)
Models live under app/app_name/model (e.g. app/hello_world/model)
The application runs automatically once scaffolding is done.
You can run scaffolded application with this command from cloned repo directory:
cd section-06-application-scaffolding/exercise-01/hello_world
glimmer run
or
cd section-06-application-scaffolding/exercise-01/hello_world
bin/hello_world
Screenshot(s):
There will be 2 events associated with this workshop:
- The Workshop: it takes place from 11:15pm-1:15pm
- The Hack Day event: it takes place from 3:45pm-5:45pm
Everyone is welcome to attend the Hack Day event for "How To Build Basic Desktop Applications in Ruby", including Software Developers who are missing the Workshop.
To participate in the Hack Day event, please make sure to Setup Glimmer DSL for LibUI beforehand.
Aftewrwards, you may engage in one of the following activities:
- Go through the workshop exercises if you missed the workshop
- Finish the workshop exercises if you attended the workshop, but did not get around to finishing all exercises
- Do the additional exercises that are in the RubyConf 2023 longer version of the workshop
- Build an application that stores its data in memory (in Ruby variables)
- Build an application that stores its data in flat files (e.g. CSV files)
- Build an application that stores its data with a relational database (e.g. SQLite)
- Build a board game or 2D game (e.g. Hangman). This requires advanced knowledge that is available in the RubyConf 2023 longer version of the workshop
I will be availble at the Hack Day event to answer any questions or help with any problems.
Happy hacking!!!
Copyright (c) 2024 Andy Maleh