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.
(aka Exercise 0)
1- Follow Presentation Slides at:
Short Link:
https://bit.ly/rubyconf2023desktop
Long Link:
2- Open Terminal (on Mac or Linux) or Command-Prompt/Git-Bash (on Windows) [do not use WSL or PowerShell]
3- Install glimmer-dsl-libui gem
Run:
gem install glimmer-dsl-libui -v0.11.4
4- Load Glimmer Meta-Example to test gem
Run:
glimmer examples
You should see the Glimmer Meta-Example (the example of examples).
| Mac | Windows | Linux |
|---|---|---|
 |
 |
 |
5- Launch 3 basic examples:
| Mac | Windows | Linux |
|---|---|---|
 |
 |
 |
| Mac | Windows | Linux |
|---|---|---|
  |
  |
  |
| Mac | Windows | Linux |
|---|---|---|
  |
  |
  |
6- Launch 3 advanced examples:
| Mac | Windows | Linux |
|---|---|---|
 |
 |
 |
| Mac | Windows | Linux |
|---|---|---|
   |
   |
   |
| Mac | Windows | Linux |
|---|---|---|
  |
  |
  |
git clone https://github.com/AndyObtiva/how-to-build-desktop-applications-in-ruby.git
cd how-to-build-desktop-applications-in-ruby
bundle
- How To Build Desktop Applications in Ruby Workshop Presentation Slides
- Glimmer DSL for LibUI
- Glimmer DSL for LibUI Supported Keywords
Exercises are numbered and organized under sections.
You can run an exercise by simply passing the exercise main Ruby file name as an argument to the glimmer command.
Example:
glimmer section-01-gui-basics/exercise-09/hello_operations.rb
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/option_selector.rb
Run this command from cloned repo directory:
glimmer section-01-gui-basics/exercise-09/option_selector.rb
Screenshot(s):
See another version of the Option Selector in Section 2 Exercise 10.
section-02-mvc-software-architecture/exercise-10/option_selector_mvc_explicit_controller.rb
Run this command from cloned repo directory:
glimmer section-02-mvc-software-architecture/exercise-10/option_selector_mvc_explicit_controller.rb
Screenshot(s):
See another version of the Option Selector in Section 2 Exercise 11.
section-02-mvc-software-architecture/exercise-11/option_selector_mvc_implicit_controller.rb
Run this command from cloned repo directory:
glimmer section-02-mvc-software-architecture/exercise-11/option_selector_mvc_implicit_controller.rb
Screenshot(s):
See another version of the Option Selector in Section 3 Exercise 12.
section-03-mvp-data-binding/exercise-12/option_selector_mvp_and_data_binding.rb
Run this command from cloned repo directory:
glimmer section-03-mvp-data-binding/exercise-12/option_selector_mvp_and_data_binding.rb
Screenshot(s):
See another version of the Option Selector in Section 3 Exercise 13.
section-03-mvp-data-binding/exercise-13/option_selector_mvp_and_data_binding_with_reset.rb
Run this command from cloned repo directory:
glimmer section-03-mvp-data-binding/exercise-13/option_selector_mvp_and_data_binding_with_reset.rb
Screenshot(s):
See another version of the Option Selector in Section 4 Exercise 17.
section-03-mvp-data-binding/exercise-14/address_form.rb
Run this command from cloned repo directory:
glimmer section-03-mvp-data-binding/exercise-14/address_form.rb
Screenshot(s):
section-03-mvp-data-binding/exercise-14b/form_table.rb
Run this command from cloned repo directory:
glimmer section-03-mvp-data-binding/exercise-14b/form_table.rb
Screenshot(s):
| Mac | Windows | Linux |
|---|---|---|
| |
|
|
section-03-mvp-data-binding/exercise-15/dynamic_form.rb
Run this command from cloned repo directory:
glimmer section-03-mvp-data-binding/exercise-15/dynamic_form.rb
Screenshot(s):
section-03-mvp-data-binding/exercise-16/dynamic_address_forms.rb
Run this command from cloned repo directory:
glimmer section-03-mvp-data-binding/exercise-16/dynamic_address_forms.rb
Screenshot(s):
section-04-advanced-data-binding/exercise-17/option_selector_data_binding_converters_and_hooks.rb
Run this command from cloned repo directory:
glimmer section-04-advanced-data-binding/exercise-17/option_selector_data_binding_converters_and_hooks.rb
Screenshot(s):
See another version of the Option Selector in Section 4 Exercise 18.
section-04-advanced-data-binding/exercise-18/option_selector_with_computed_data_binding.rb
Run this command from cloned repo directory:
glimmer section-04-advanced-data-binding/exercise-18/option_selector_with_computed_data_binding.rb
Screenshot(s):
section-04-advanced-data-binding/exercise-19/address_form_with_nested_indexed_data_binding.rb
Run this command from cloned repo directory:
glimmer section-04-advanced-data-binding/exercise-19/address_form_with_nested_indexed_data_binding.rb
Screenshot(s):
In addition to Nested Indexed Data-Binding, this exercise demonstrated how to reuse the Address Form as a Method-Based Custom Control component.
See another version of this Address Form reused as a Class-Based Custom Control component in Section 7 Exercise 24.
1- Line
section-05-area-canvas-graphics/exercise-20/line.rb
Run this command from cloned repo directory:
glimmer section-05-area-canvas-graphics/exercise-20/line.rb
Screenshot(s):
2- Rectangle
section-05-area-canvas-graphics/exercise-20/rectangle.rb
Run this command from cloned repo directory:
glimmer section-05-area-canvas-graphics/exercise-20/rectangle.rb
Screenshot(s):
3- Square
section-05-area-canvas-graphics/exercise-20/square.rb
Run this command from cloned repo directory:
glimmer section-05-area-canvas-graphics/exercise-20/square.rb
Screenshot(s):
4- Arc
section-05-area-canvas-graphics/exercise-20/arc.rb
Run this command from cloned repo directory:
glimmer section-05-area-canvas-graphics/exercise-20/arc.rb
Screenshot(s):
5- Circle
section-05-area-canvas-graphics/exercise-20/circle.rb
Run this command from cloned repo directory:
glimmer section-05-area-canvas-graphics/exercise-20/circle.rb
Screenshot(s):
6- Bezier
section-05-area-canvas-graphics/exercise-20/bezier.rb
Run this command from cloned repo directory:
glimmer section-05-area-canvas-graphics/exercise-20/bezier.rb
Screenshot(s):
7- Figure
section-05-area-canvas-graphics/exercise-20/figure.rb
Run this command from cloned repo directory:
glimmer section-05-area-canvas-graphics/exercise-20/figure.rb
Screenshot(s):
8- Polygon
section-05-area-canvas-graphics/exercise-20/polygon.rb
Run this command from cloned repo directory:
glimmer section-05-area-canvas-graphics/exercise-20/polygon.rb
Screenshot(s):
9- Polyline
section-05-area-canvas-graphics/exercise-20/polyline.rb
Run this command from cloned repo directory:
glimmer section-05-area-canvas-graphics/exercise-20/polyline.rb
Screenshot(s):
10- Polybezier
section-05-area-canvas-graphics/exercise-20/polybezier.rb
Run this command from cloned repo directory:
glimmer section-05-area-canvas-graphics/exercise-20/polybezier.rb
Screenshot(s):
11- Composite Shape
section-05-area-canvas-graphics/exercise-20/composite_shape.rb
Run this command from cloned repo directory:
glimmer section-05-area-canvas-graphics/exercise-20/composite_shape.rb
Screenshot(s):
section-05-area-canvas-graphics/exercise-21/area_shapes.rb
Run this command from cloned repo directory:
glimmer section-05-area-canvas-graphics/exercise-21/area_shapes.rb
Screenshot(s):
section-05-area-canvas-graphics/exercise-22/area_shapes_with_selection_and_movement.rb
Run this command from cloned repo directory:
glimmer section-05-area-canvas-graphics/exercise-22/area_shapes_with_selection_and_movement.rb
Screenshot(s):
section-06-drag-and-drop/exercise-23/shape_coloring.rb
Run this command from cloned repo directory:
glimmer section-06-drag-and-drop/exercise-23/shape_coloring.rb
Screenshot(s):
section-07-custom-components/exercise-24/address_form_custom_control.rb
Run this command from cloned repo directory:
glimmer section-07-custom-components/exercise-24/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-07-custom-components/exercise-25/user_manager.rb
Run this command from cloned repo directory:
glimmer section-07-custom-components/exercise-25/user_manager.rb
Screenshot(s):
section-07-custom-components/exercise-26/basic_custom_shape.rb
Run this command from cloned repo directory:
glimmer section-07-custom-components/exercise-26/basic_custom_shape.rb
Screenshot(s):
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.
Scaffold an application by running:
glimmer "scaffold[hello_world]"
section-08-application-scaffolding/exercise-27/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-08-application-scaffolding/exercise-27/hello_world
glimmer run
or
cd section-08-application-scaffolding/exercise-27/hello_world
bin/hello_world
Screenshot(s):
Copyright (c) 2023 Andy Maleh